## 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/vercel-com/9f6134af-817e-461c-9f8e-dd4299d73956-1789059978911.webp
- Design on Kage: https://kage.design/designs/vercel-empty-state

## Before you start
Ask the user what they are building, who the product is for, and what brand assets they already have (name, logo mark, colours, typeface). Wait for the answers. Everything below is applied to *their* product, not to the reference site.

## Page structure
1. **Announcement strip** — the very top of the page, above the nav: a single centered line of small (~14px) text with a short inline arrow link. Low emphasis, one line, no background fill.
2. **Global nav** — a slim transparent bar: small logo mark on the far left, 3–4 text links with dropdown carets next to it, and on the right a secondary pill button, a text link, and one solid dark pill button. All text ~14px, generous horizontal padding.
3. **Hero** — fills nearly the whole viewport on a plain background, laid out as an asymmetric three-part grid:
   - Left: a massive two-line display headline, sentence case, breaking naturally across lines.
   - Center: one enormous flat single-colour geometric shape (the brand's simplest mark) as the only graphic element.
   - Right: a small vertical stack of three short value lines (~16px), left-aligned within their column.
   - Below the headline, two pill CTAs side by side: solid dark primary + outlined secondary.
4. **Customer logo strip** — directly under the hero, an edge-to-edge horizontal row of customer wordmarks rendered in plain monochrome, partially visible at the fold to invite scrolling. Continue below the fold with product sections that keep the same sparse, section-per-idea rhythm.

## Design language
- **Palette is strictly two-tone**: pure white background (#FFFFFF), near-black text and graphics (#0A0A0A–#000). Use mid-grey (#666–#888) only for secondary nav links and small copy. No gradients, no photography, no coloured panels — colour contrast does all the work.
- **Hierarchy through scale, not weight or colour**: one gigantic display headline (~96–120px, geometric sans like Geist/Inter, regular weight, line-height ~0.95–1.0, slightly negative tracking) against everything else at 14–16px. Avoid intermediate sizes; the jump from huge to small is the signature.
- **Grid**: content constrained to ~1200px with large side gutters. The hero is asymmetric — roughly headline 1/3 left, graphic centered, small text column right. Whitespace is the dominant material; do not fill empty areas.
- **Buttons are fully-rounded pills**: primary = solid near-black fill, white ~14px label, generous x-padding (~24–28px); secondary = white fill with a 1px light-grey border, dark label. No drop shadows on controls.
- **Nav treatment**: transparent over the page background, text-only links, hairline separation implied by spacing rather than borders.
- **Graphics**: one large flat vector shape per view, centred, no texture or shading. Logos/wordmarks appear only in the trust strip, in monochrome, evenly spaced, edge to edge.
- **Motion**: minimal — hover states should invert or darken (e.g. pill buttons shift between black and grey-100), no parallax or heavy animation.
- **Rhythm down the page**: alternate sparse full-viewport statements (big type, one idea) with denser utility sections; each section gets one focal element and lots of air around it.

## Never
- Never use the reference's triangle mark, wordmark, product names, headline copy, taglines, or its customer logo list.
- Never copy the reference's illustrations, icon sets, or photography (there is none — don't invent equivalents of theirs).
- Never present the result as the reference product; build for the user's own brand and content.