## 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/lleverage/eac68c5d-da08-47d0-87c7-a0881c7a49ba-1792130485042.webp
- Design on Kage: https://kage.design/designs/lleverage-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type). Wait for their answers before proceeding. Apply everything below to that product, using placeholder branding and copy until the user supplies real assets.

## Page structure
- **1200×630 social-card canvas:** Create a fixed-ratio image intended for sharing on social platforms, with generous inset margins and a warm off-white background.
- **Construction frame:** Add a very thin gray rectangular border inset from the edges, with subtle crosshair/registration marks at the corners and mid-edge alignment points.
- **Upper-left brand lockup:** Place a compact placeholder icon and wordmark near the upper-left inside the frame; keep it horizontal, dark, and visually quiet.
- **Eyebrow line:** Below the lockup, add a small uppercase placeholder category statement in orange with generous letter spacing; optionally finish it with a short diagonal hatch accent.
- **Primary headline:** Set a large editorial serif placeholder headline beneath the eyebrow, left aligned and wrapping across two or three lines. Make this the dominant element on the card.
- **Supporting line:** Place a smaller neutral sans-serif sentence beneath the headline, aligned to the same left column and clearly subordinate.
- **Balancing motif:** Add a sparse grid of evenly spaced gray dots in the lower-right area, with one or two dots highlighted in orange. Keep it decorative and low contrast.

## Design language
- Build hierarchy through scale and position: the wordmark is small, the eyebrow is tightly tracked, the serif headline is oversized, and the supporting line is compact and readable.
- Use an editorial pairing: a high-contrast serif for the headline and a clean sans-serif for the eyebrow, descriptor, and brand lockup. Use a restrained type scale with the headline occupying roughly 70–90px at 1200px wide, depending on copy length.
- Use a warm paper-like background around `#f1f1eb`, near-black text around `#10161b`, cool gray construction lines around `#c9cbc5`, and a muted orange accent around `#d9823b`.
- Keep the composition mostly monochrome and calm; reserve orange for the eyebrow, hatch marks, and a tiny point of emphasis in the lower-right motif.
- Preserve generous negative space and a strong left alignment. Keep the headline within a broad but controlled text column so it does not collide with the decorative motif.
- Treat borders as hairlines, not panels: use 1px strokes, square geometry, no heavy shadows, and minimal or no corner radius. The visual language should feel precise, printed, and lightly technical.
- Make the frame and registration marks subtle enough to support the content rather than compete with it. The dotted motif should use small circular marks with consistent spacing.
- Produce the final result as a 1200×630 image, for example by creating HTML/CSS and rendering it to PNG or by generating an SVG and exporting it. Ensure text remains crisp, margins are safe for social previews, and the output has no browser chrome.

## Never
- Do not use the reference product's logo, wordmark, product name, tagline, exact copy, or distinctive icon.
- Do not copy the reference's exact typography, line breaks, decorative marks, or text content; use placeholder branding and original copy for the user's product.
- Do not add unrelated illustrations, photography, or a large icon set.
- Never present the result as Lleverage or imply affiliation with it.