## 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/zella/a38dc36f-2225-41eb-949f-1729e994dc99-1789711293892.webp
- Design on Kage: https://kage.design/designs/zella-og-image

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (brand name, colours, typefaces, logo or other marks). Wait for their answers before designing. Apply the reference composition to their product, using placeholder branding and copy until those details are provided.

## Page structure
- **Social-card canvas:** Produce a 1200×630 image intended for link previews, implemented as HTML/CSS rendered to PNG or as an SVG.
- **Top edge accent:** Add a slim, high-visibility colour rule running across the full top edge.
- **Brand lockup:** Place a small placeholder symbol and spaced placeholder wordmark in the upper-left with generous inset margins.
- **Eyebrow:** Below the lockup, add a short uppercase or widely tracked monospace product descriptor in the accent colour.
- **Primary headline:** Set a two-line, oversized serif statement below the eyebrow, aligned left and occupying most of the visual weight without touching the edges.
- **Supporting line:** Add a restrained monospace or typewriter-style sentence beneath the headline in a muted light gray.
- **URL or metadata:** Place a small low-contrast URL or metadata label near the lower-left as the final anchor.
- **Background field:** Keep the rest of the card open and mostly empty, using a restrained tonal glow rather than a busy illustration or image.

## Design language
- Build hierarchy through scale and position: a small brand lockup, compact eyebrow, very large headline, then quiet supporting metadata.
- Keep the composition asymmetric and left-led; reserve the right side for breathing room and a faint atmospheric glow so the headline remains the focal point.
- Use a near-black base around `#0d0d0f`, with a subtle olive-black warmth around `#202011` fading into the background. Use one vivid accent, approximately `#ffd21a`, for the top rule, mark, and eyebrow; use warm cream around `#f1efe8` for the headline and gray around `#9a999b` for supporting text.
- Pair a high-contrast editorial serif for the headline with a monospaced face for the eyebrow, descriptor, and URL. Make the headline extremely large, tightly leading, and set in sentence case; use generous tracking for the eyebrow and wordmark.
- Maintain broad inset margins of roughly 96px horizontally and 80px vertically. Let the headline span roughly two-thirds of the width while keeping the lower metadata small and calm.
- Keep borders nearly absent apart from the single top accent rule. Avoid cards, panels, heavy shadows, rounded containers, and decorative UI chrome; the depth should come from the background gradient only.
- Treat this as a static image: no interaction is necessary, but ensure text is crisp, high contrast, safely inside the social-preview crop, and legible at thumbnail size.

## Never
- Do not copy the reference logo, wordmark, product name, headline, URL, or exact copy.
- Do not reuse reference-specific imagery, illustrations, icon sets, or brand assets.
- Do not present the result as Zella or imply an affiliation with it. Use placeholder branding and product-specific copy supplied by the user.