## 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/cursor-com/5392efee-9a9c-40ed-b07e-39a30ea372bb-1789072662881.webp
- Design on Kage: https://kage.design/designs/cursor-empty-state

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the product name, colours, typefaces, logo, and imagery. Wait for their answers before proceeding. Apply the guidance below to their product, not to the reference product.

## Page structure
1. **Global header** — Place a compact brand mark at the far left, centered navigation links across the top, and sign-in plus two right-aligned actions; keep the header horizontally spacious and visually quiet.
2. **Hero statement** — Use a large, left-aligned two-line headline in the upper-left portion of a broad, mostly empty canvas. Keep supporting copy minimal or absent so the statement is the main message.
3. **Hero actions** — Put two adjacent rounded buttons below the headline: a dark primary action with a small directional/download affordance and a pale secondary demo or contact action.
4. **Product showcase** — After generous vertical space, place a wide, nearly full-width media frame with a warm neutral background and a large desktop application screenshot layered inside it. Let the screenshot extend below the viewport so the page continues into a denser product proof section.
5. **Continuation sections** — Continue the page with alternating spacious narrative blocks and denser product-interface demonstrations, preserving the same restrained navigation, neutral surfaces, and action hierarchy.

## Design language
- Build hierarchy through whitespace first: a short headline at roughly 25–30px with a tight line height, a compact navigation scale around 14px, and generous empty space between header, hero, actions, and showcase.
- Use an editorial left edge: align the headline and controls to the same inset while allowing the product image to expand almost to the viewport margins.
- Keep the palette nearly monochrome: warm off-white background around `#f7f7f5`, charcoal text and primary controls around `#242422`, soft gray secondary surfaces around `#e9e9e5`, and a muted beige image surround around `#d8d2c7`.
- Pair a clean geometric sans-serif for all interface text. Use medium weight for navigation and buttons, and regular-to-medium weight for the headline; avoid decorative display typography.
- Treat controls as compact pills with fully rounded corners, subtle tonal contrast, and little or no shadow. Use thin gray borders only where needed to separate the secondary action or navigation control.
- Keep the top of the page sparse and calm, then increase visual density through the large application screenshot, layered windows, tabs, panels, and readable interface details.
- Use imagery as product evidence rather than decoration: frame the software UI in a broad rectangular panel with restrained rounding and a softly blurred/warm background.
- Keep interactions understated: buttons should darken or slightly shift contrast on hover, navigation links should use a subtle text-colour change, and avoid dramatic animations; if the showcase animates, use a slow, quiet reveal or parallax.
- Maintain generous horizontal gutters on desktop, collapse navigation into a compact mobile menu, and stack the two hero actions without losing the dark-primary/light-secondary order.

## Never
- Do not use the reference product's logos, wordmarks, product names, copy, illustrations, photography, screenshots, or icon sets.
- Do not reproduce the reference interface as a clone or present the result as that product.
- Create original brand assets, product language, imagery, and interface examples for the user's product while preserving only the reusable layout and design principles.