kage
temprl.org
Design analysis
A 1200×630 social card with no text, presenting the brand as a single concentric-circle mark: a heavy black outer ring, a wide yellow ring, then alternating black and white rings narrowing to a hot red core. It reads like a bold target/eye, sitting on a plain background so the mark carries all the visual weight. The card's focal hierarchy is purely geometric — colour blocks are used at full saturation with hard edges, no gradients or shadows, giving it a strong, instantly recognisable presence at thumbnail size in X or Slack previews.
Prompt preview
## Reference images Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language. - Screenshot: https://kage-design-assets.t3.tigrisfiles.io/screenshots/simo/65efc766-3fe8-489f-8bde-dfa2303b7525-1791525745935.webp - Design on Kage: https://kage.design/designs/simo-og-image ## Before you start Ask the user what product the social card is for, who will see it (X, Slack, LinkedIn, iMessage), and whether they already have brand assets: name, wordmark/logo file, brand colours and typeface. Wait for the answers before building. Everything below is applied to their product, not to the reference. ## Page structure Produce a single 1200×630 image (HTML/CSS rendered to PNG, or an SVG). This reference card is text-free, but for a usable share card, structure it as: - **Canvas**: one 1200×630 frame, flat solid background. Centre or strongly offset a single focal graphic. - **Focal mark**: one large concentric-circle emblem built from 4–6 nested rings of alternating colour and white/black, reading like a bold target or eye. Rings have hard edges — no gradients, no shadows. The innermost dot is a hot accent colour. - **Wordmark area**: (add this for the user's card) the product name set in heavy type, aligned on a clear axis with the mark — e.g. mark left, wordmark right on one baseline. - **Tagline area**: one short line of supporting text below the wordmark, smaller and lower contrast, so the hierarchy is mark → name → tagline. ## Design language - **Focal hierarchy**: exactly one dominant shape. The mark occupies roughly 40–60% of the canvas height; supporting text is much smaller and does not compete with it. - **Colour**: a two-colour brand scheme plus white and black. In this reference: deep black (#000000) for the outer ring and structure, saturated yellow (#FFC800) for the major ring, hot red (#F5265A-ish pink-red) as the accent core, with white used as an inter-ring separator. Keep colour blocks at full saturation with hard edges. - **Type**: if the user has no typeface, use one single heavy sans (e.g. Inter 800/900 or Archivo Black) for the wordmark and one regular weight for the tagline. Two type sizes only. - **Shape treatment**: pure geometric circles, uniform stroke logic (ring thicknesses either equal or in a deliberate ratio), generous even spacing between rings. No rounded-corner rectangles, no iconography. - **Composition**: strong centred or asymmetric layout, lots of clean negative space around the mark, everything optically balanced rather than mathematically centred if an axis is used. - **Motion/interaction**: none — this is a static image. If building as HTML/CSS, render at exactly 1200×630 and export at 2× for retina previews. ## Never Do not reproduce the reference's wordmark, product name, tagline, exact logo or its exact colour pairing as-is; build the concentric-mark composition with the user's own brand name, colours and copy. Never present the result as the referenced product.
