---
version: alpha
name: v0
description: "Near-white paper, ink-black display type, a teal badge holding the colour budget."
colors:
  on-surface-variant: "#666666"
  on-surface: "#171717"
  surface: "#FAFAFA"
  outline: "#EBEBEB"
  primary: "#FF5F57"
  surface-2: "#FFFFFF"
  panel: "#F2F2F2"
  campaign-ink: "#000000"
  placeholder-ink: "#575757"
  divider: "#EAEAEA"
  chip-border: "#E6E6E6"
  button-border: "#E4E4E7"
  composer-border: "#C9C9C9"
  alpha-400: "rgba(0, 0, 0, 0.08)"
  alpha-300: "rgba(0, 0, 0, 0.1)"
  alpha-200: "rgba(0, 0, 0, 0.05)"
  inverse-hairline: "rgba(255, 255, 255, 0.08)"
  fade-veil: "rgba(255, 255, 255, 0.8)"
  accent: "#0FA594"
  keycap-ramp: "#9A9A9A"
typography:
  mock-ui-label:
    fontFamily: GeistSans
    fontSize: 8px
    fontWeight: 400
    lineHeight: 9.5px
    letterSpacing: -0.4px
  mono-chip:
    fontFamily: GeistMono
    fontSize: 10px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: 0em
  counter:
    fontFamily: GeistSans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 13px
    letterSpacing: 0em
  body-link:
    fontFamily: GeistSans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  copy:
    fontFamily: GeistSans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  lead:
    fontFamily: GeistSans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  subheading:
    fontFamily: GeistSans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: -0.4px
  price:
    fontFamily: GeistSans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.96px
  plan-name:
    fontFamily: GeistSans
    fontSize: 30px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.75px
  heading:
    fontFamily: GeistSans
    fontSize: 32px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: -1.28px
  section-heading:
    fontFamily: GeistSans
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -2.4px
  page-heading:
    fontFamily: GeistSans
    fontSize: 48px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -2.88px
  display:
    fontFamily: GeistSans
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -3.2px
  display-xl:
    fontFamily: GeistSans
    fontSize: 72px
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: -4.32px
rounded:
  label-chip-footer-link: 4px
  nav-link-menu-trigger: 6px
  button-16-9-media-frame: 8px
  device-mock-tile: 8.44px
  composer-chat-card-model-card-4-8-5-medi: 12px
  content-card-bento-tile-pricing-card: 16px
  closing-block-framed-screenshot: 24px
  positioned-image-mask-absolute-left-1-2-: 35px
  pill-avatar-badge: 9999px
spacing:
  2xs: 2px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 10px
  xl: 12px
  2xl: 16px
  3xl: 24px
  4xl: 32px
  5xl: 40px
  6xl: 48px
  7xl: 64px
  8xl: 80px
  9xl: 96px
---
# v0 — Style Reference

> Near-white paper, ink-black display type, a teal badge holding the colour budget.

**Theme:** light

The system runs on one near-white ground, #FAFAFA, with #FFFFFF reserved for things you can touch: buttons, cards, the prompt composer. Two registers share that ground — home and pricing set their ink at #171717 under the `.light-theme` class, while enterprise and iOS add #000000 alongside it and enlarge the display type; the difference is ink and scale, not canvas. The signature move is structural: a 1px hairline drawn as `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`, a shadow doing a border's job, so avatars, media frames and raised buttons separate by ring rather than blur. Type is GeistSans 600, and tracking carries the hierarchy weight would carry elsewhere: −0.04em at 32px, −0.06em at 40, 48 and 72px, −0.05em at 64px, the largest headlines set on a line-height equal to their own size. Sections breathe on a 64/80/96px rhythm inside a 1400px cap.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#FAFAFA` | `--color-canvas` | The page ground on `html`, `body` and the sticky `header`, and the fill of the media frames in content cards. |
| Surface | `#FFFFFF` | `--color-surface` | Anything that reads as an object — `.rounded-2xl.border.border-v0-gray-200.bg-v0-white`, `"Log In"`, `"Contact Form"`, the composer. |
| Panel | `#F2F2F2` | `--color-panel` | The quiet grey plane: the pricing card `.shadow-base.flex.flex-1.flex-col` and the enterprise closing block. |
| Ink | `#171717` | `--color-ink` | Primary text on the home and pricing pages, and the fill of `"Sign Up"`, `"Get Started"`, `"Select Plan"`. |
| Campaign Ink | `#000000` | `--color-ink-absolute` | Headings and labels on the enterprise and iOS pages — `"Create"`, `"Anything."`. It shares those pages with #171717 rather than replacing it. |
| Muted Ink | `#666666` | `--color-ink-muted` | Secondary copy, nav links, inactive tabs. Painted 276 times as text and zero times as a fill. |
| Placeholder Ink | `#575757` | `--color-ink-faint` | The placeholder in the iOS phone render, `"Ask v0 to build…"` at 9px — one observation. |
| Hairline | `#EBEBEB` | `--color-hairline` | The default opaque 1px border — content cards, avatars, media frames. The home page's structural line. |
| Divider | `#EAEAEA` | `--color-divider` | The FAQ row rule `.border-b.relative.py-2.md:py-4` — a divider, not a box border. |
| Chip Border | `#E6E6E6` | `--color-chip-border` | The 4px-radius label chip `.px-3.py-1.5.border.border-v0-gray-300`. |
| Button Border | `#E4E4E7` | `--color-button-border` | The one cool-tinted grey in the set, on `"Log In"` and `"Browse all"`. |
| Composer Border | `#C9C9C9` | `--color-composer-border` | Darker than every other hairline, on the prompt form `.@container/composer.z-20.relative.rounded-xl`. |
| Alpha 400 | `rgba(0, 0, 0, 0.08)` | `--color-alpha-400` | The translucent hairline for controls near artwork; also the ring shadow's first layer. |
| Alpha 300 | `rgba(0, 0, 0, 0.1)` | `--color-alpha-300` | The enterprise page's border of choice — bento tiles, the 48px CTA block, inset panels. |
| Alpha 200 | `rgba(0, 0, 0, 0.05)` | `--color-alpha-200` | The feature-row rule inside pricing cards; a hairline that must survive on #F2F2F2. |
| Inverse Hairline | `rgba(255, 255, 255, 0.08)` | `--color-inverse-hairline` | The `hr` inside the dark model cards — the same 8% trick, inverted. |
| Fade Veil | `rgba(255, 255, 255, 0.8)` | `--color-veil` | The gradient masks on `.absolute.inset-0.bg-gradient-to-r.from-v0-background-100/80`, home and pricing only; edges dissolve instead of clipping. |
| Accent | `#0FA594` | `--color-accent` | One observation, on the `"Popular"` badge. Keep it off CTAs, links and borders. |
| Window Dots | `#FF5F57` `#FEBC2E` `#28C840` | `--color-dot-red` `--color-dot-amber` `--color-dot-green` | Three 10px dots in the enterprise screenshot chrome, one each — literal, not brand colour. |
| Keycap Ramp | `#9A9A9A → #686868 → #848484 → #3A3A3A` | `--gradient-keycap` | The metallic gradient on the pricing page's keycap connectors. |

## Tokens — Typography

### GeistSans — the display and marketing voice: every headline, the nav labels, the enterprise body copy · `--font-sans`
- **Substitute:** Inter, ui-sans-serif, system-ui
- **Weights:** 400, 500, 600
- **Sizes:** 14px, 16px, 18px, 20px, 24px, 32px, 40px, 48px, 64px, 72px
- **Line height:** 1.00–1.63 — 20px on 14px copy, 48px on 40px headings, 72px on 72px
- **Letter spacing:** normal at 14px and 16px/400 but −0.4px on 16px/500 `"Plus"`; −0.4px at 20px, −0.96px at 24px, −1.28px at 32px, −2.4px at 40px, −2.88px at 48px, −3.2px at 64px, −4.32px at 72px
- **Role:** the display and marketing voice: every headline, the nav labels, the enterprise body copy

### Inter — the product-surface face: pricing headings, list titles, counters, interface labels · `--font-ui`
- **Substitute:** Geist, ui-sans-serif, system-ui
- **Weights:** 400, 500, 600, 700
- **Sizes:** 13px, 14px, 16px, 24px, 30px, 40px
- **Line height:** 1.00–1.71 — 13px on 13px counters, 16px on 16px list titles, 53.3333px on `"Model Pricing"`
- **Letter spacing:** normal at 13–16px; −0.24px at 24px on the 700-weight keycaps `.flex.flex-col.items-center.justify-center`; −0.75px at 30px, −1px at 40px
- **Role:** the product-surface face: pricing headings, list titles, counters, interface labels

### GeistMono — technical labels, at the single size the census measures · `--font-mono`
- **Substitute:** Geist Mono, ui-monospace, SFMono-Regular
- **Weights:** 400
- **Sizes:** 10px
- **Line height:** 15px (1.5)
- **Letter spacing:** normal
- **Role:** technical labels, at the single size the census measures — the `"Web"` badge on the home page

### system-ui — the simulated OS layer inside device mockups · `--font-system`
- **Substitute:** -apple-system, BlinkMacSystemFont, Segoe UI
- **Weights:** 400, 500
- **Sizes:** 8px
- **Line height:** 9.5px
- **Letter spacing:** −0.4px
- **Role:** the simulated OS layer inside device mockups — `"iOS Chat"` on the iOS page. The inventory also names -apple-system at 400 and ui-serif at 500 in these stacks; no row measures either as a display face.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Mock UI label | 8px | 9.5px | −0.4px | `--text-8` |
| Mono chip | 10px | 15px | normal | `--text-10` |
| Counter | 13px | 13px | normal | `--text-13` |
| Body / link | 14px | 20px | normal | `--text-14` |
| Copy | 16px | 24px | normal | `--text-16` |
| Lead | 18px | 28px | normal | `--text-18` |
| Subheading | 20px | 26px | −0.4px | `--text-20` |
| Price | 24px | 32px | −0.96px | `--text-24` |
| Plan name | 30px | 36px | −0.75px | `--text-30` |
| Heading | 32px | 40px | −1.28px | `--text-32` |
| Section heading | 40px | 48px | −2.4px | `--text-40` |
| Page heading | 48px | 56px | −2.88px | `--text-48` |
| Display | 64px | 64px | −3.2px | `--text-64` |
| Display XL | 72px | 72px | −4.32px | `--text-72` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable — 32px card padding, 64–96px sections

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 2xs | 2px | `--spacing-2xs` |
| xs | 4px | `--spacing-xs` |
| sm | 6px | `--spacing-sm` |
| md | 8px | `--spacing-md` |
| lg | 10px | `--spacing-lg` |
| xl | 12px | `--spacing-xl` |
| 2xl | 16px | `--spacing-2xl` |
| 3xl | 24px | `--spacing-3xl` |
| 4xl | 32px | `--spacing-4xl` |
| 5xl | 40px | `--spacing-5xl` |
| 6xl | 48px | `--spacing-6xl` |
| 7xl | 64px | `--spacing-7xl` |
| 8xl | 80px | `--spacing-8xl` |
| 9xl | 96px | `--spacing-9xl` |

### Border Radius

| Element | Value |
|---------|-------|
| Label chip, footer link | 4px |
| Nav link, menu trigger | 6px |
| Button, 16:9 media frame | 8px |
| Device-mock tile | 8.44px |
| Composer, chat card, model card, 4:8.5 media frame | 12px |
| Content card, bento tile, pricing card | 16px |
| Closing block, framed screenshot | 24px |
| Positioned image mask `.absolute.left-1/2.-translate-x-1/2.top-[14px]` | 35px |
| Pill, avatar, badge | 9999px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Ring | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px` | `--shadow-ring` |
| Ring + Lift | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 1px 0px` | `--shadow-lift` |
| Card | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | `--shadow-card` |
| Panel | `rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px` | `--shadow-panel` |
| Float | `rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px` | `--shadow-float` |
| Modal | `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | `--shadow-modal` |
| Keycap | `rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.15) 0px 6px 4px -2px, rgba(0, 0, 0, 0.25) 0px -3px 1px -1px inset` | `--shadow-key` |

### Layout
- **Page max-width:** 1400px
- **Section gap:** five sections at 80px, five at 64px, three at 96px, plus a 192px hero well on the home page and 88px on the enterprise grid
- **Card padding:** 32px on the bento tile; 48px on the bordered CTA block; 64px top with 40px sides on the closing panel
- **Element gap:** 6px is the workhorse, then 12px, 4px, 8px, 16px and 24px for section columns

## Components

### Sticky Nav Bar
**Role:** The persistent top rail carrying the wordmark, the page links and one dark call to action.
Two carriers. Enterprise, pricing and iOS use the header box row `.items-center.w-full.bg-background-200.sticky`: fill #FAFAFA, padding 0px 8px, radius 0px, border none, shadow none, 3 elements — the bar is the canvas, dissolving into the ground under scroll. Home carries `.@container/chat-header.relative.z-20.flex` instead: no fill, not sticky, a 1px #F2F2F2 rule beneath — the census's only header border. Links centred, CTA hard right.

### Nav Link
**Role:** A page destination in the top rail, and the pattern for every low-emphasis text control.
Cited from `.text-v0-gray-900.font-medium.data-[active=true]:bg-transparent.d` — the `"Enterprise"` link: no fill, ink #666666, 14px/500/20px normal tracking, padding 4px 8px, radius 6px, border none, shadow none, 18 across all pages. The dropdown trigger `.group.inline-flex.w-max.items-center` (`"Templates"`) matches it value for value — a menu and a link are identical until the chevron. Home and pricing promote nothing — six links at #666666; the active link is #171717 on enterprise and iOS, never #000000.

### Primary Button — "Sign Up"
**Role:** The account action in the nav rail; the highest-contrast control in the system.
From the controls row whose text is `"Sign Up"`: fill #171717, text #FFFFFF, 14px/500, padding 0px 12px, radius 8px, border 1px #171717, shadow none, 4 across all pages — but only one of the four reads `"Sign Up"`, on home; the rest are nav `"Get Started"` buttons. The border matches the fill — a hairline kept for focus geometry, not looks. That row measures no shadow; contrast against #FAFAFA does the work.

### Pill CTA — "Get Started"
**Role:** The campaign conversion button — two links on enterprise, one button on home.
From the controls rows whose text is `"Get Started"`: fill #171717, text #FFFFFF, 16px/500, padding 0px 20px, radius 9999px, border 1px #171717, shadow none — 2 links on enterprise, 1 button on home. The same label also runs as a 14px/8px-radius nav button on enterprise, pricing and iOS. Size, not shape, marks the register: enterprise's 16px `"Contact Sales"` and `"Upgrade to Plus"` are 8px rectangles.

### Raised Button — "Start Building"
**Role:** The plan-selection action on a grey pricing card, where a border would disappear.
From the controls row whose text is `"Start Building"`: fill #FFFFFF, text #171717, 14px/500, padding 0px 16px, radius 8px, border none, and the shadow `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 1px 0px`, 3 of them. The border property is empty; the outline is the shadow's first layer, with a 2px blur beneath doing the lifting — on #F2F2F2 a flat hairline would sink.

### Suggestion Pill — "Contact Form"
**Role:** A one-tap prompt starter under the composer, and the filter row above the template grid.
From the control row whose text is `"Contact Form"`: fill #FFFFFF, text #666666, 14px/500, padding 0px 12px, radius 9999px, border 1px `rgba(0, 0, 0, 0.08)`, shadow none, 4 buttons; the link variant `"Apps and Games"` measures the same, 4 links. Muted ink is deliberate — these are optional, not urged. The border is translucent rather than #EBEBEB because 8% black tracks whatever it lands on.

### Prompt Composer
**Role:** The home page's primary input — the control the whole first screen is arranged around.
Cited from `.@container/composer.z-20.relative.rounded-xl`: a `form` at 12px radius with a 1px #C9C9C9 border, the darkest hairline the pages paint, and a shadow resting at five fully transparent layers — pre-wired for a transition with nothing to show until focus. Padding is `not measured`.

### Content Card
**Role:** The bordered white card carrying a thumbnail, a title and its author row on the home page.
From `.rounded-2xl.border.border-v0-gray-200.bg-v0-white`: fill #FFFFFF, padding 0px 0px, radius 16px, border 1px #EBEBEB, shadow none, 9 of them. Zero padding makes it a frame, not a container. The media uses its own row, `.shadow-base.bg-v0-background-200.relative.aspect-video`: fill #FAFAFA, radius 8px, border none, ring shadow only, 6 of them — a step down, 16px outside to 8px inside.

### Creator Avatar
**Role:** The circular author mark beside every template title.
From `.w-full.h-full.rounded-full.overflow-hidden`: fill #FFFFFF, radius 9999px, border 1px #EBEBEB, and the ring-plus-lift shadow, 60 of them — the most-repeated visual signature on the home page. The image is a separate row, `.size-9.rounded-full.object-cover.bg-v0-gray-200`: 36px square, fill #EBEBEB as the loading tone, radius 9999px, no border, no shadow. The ring belongs to the wrapper, the grey to the image.

### Pricing Card
**Role:** One plan tier — name, price, feature list and its action button.
From `.shadow-base.flex.flex-1.flex-col`: fill #F2F2F2, padding 0px 0px, radius 16px, border none, and a shadow resting at five transparent layers, 4 of them. The tier reads by tone alone — a grey plane on #FAFAFA, no border or elevation ranking it. Inside, the plan name is Inter 30px/600 at −0.75px and the price GeistSans 24px/600 at −0.96px in #666666, so the number is quieter than the word above it.

### Popular Badge
**Role:** The single tier marker on the pricing table.
From the box row whose text is `"Popular"`: fill #0FA594, padding 0px 8px, radius 9999px, border none, shadow none — one observation on the pricing page. Apart from the three enterprise window dots (#FF5F57, #FEBC2E, #28C840, one observation each), it is the chromatic budget of the captured pages. Don't extend the teal into buttons, links or hover states.

### Model Card
**Role:** The dark panel holding one model's per-token pricing.
From `.rounded-xl.bg-v0-gray-1000.text-v0-universal-white.dark:bg-v0-gr`: fill #171717, padding 0px 0px, radius 12px, border none, shadow none, 4 of them. The inversion point — the ink that fills `"Sign Up"`, scaled up to a surface. White copy runs at 14px/400/20px, and rows divide on an `hr` at `rgba(255, 255, 255, 0.08)`, the mirror of the 8% black hairline on the light side.

## Do's and Don'ts

### Do
- Ground every page on #FAFAFA and let #FFFFFF mean "an object": the controls census gives fill #FFFFFF to `"Log In"`, `"Contact Form"` and `"Start Building"`.
- Draw structure with a 1px hairline — #EBEBEB on flat ground, `rgba(0, 0, 0, 0.08)` near imagery, `rgba(0, 0, 0, 0.1)` on the bento tiles.
- Let tracking carry display hierarchy: −1.28px at 32px, −2.4px at 40px, −2.88px at 48px, −3.2px at 64px, −4.32px at 72px.
- Use `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px` as a border substitute when an element needs an outline and a lift at once — `"Start Building"` carries no border property.
- Keep secondary copy at #666666, 14px/400/20px, normal tracking — the `"Home"` footer link is the reference.
- Reach for radius 9999px on chips, avatars and badges; the radii census counts 101 elements there, the largest group.
- Fade full-bleed rails with the `rgba(255, 255, 255, 0.8)` veil rather than cutting them at a hard edge.

### Don't
- Don't add colour. The `"Popular"` badge and the three enterprise window dots are one observation each — the whole chromatic budget.
- Don't set a GeistSans heading bolder than 600: the largest measured, `"Anything."` at 72px and `"Create"` at 64px, are both 600.
- Don't drop a shadow under a flat card — `.rounded-2xl.border.border-v0-gray-200.bg-v0-white` and `.group.cursor-crosshair.rounded-2xl.border` both measure shadow none.
- Don't let #666666 become a fill; the census counts 276 text observations of it and no fill observations.
- Don't assume one ink per page: enterprise sets `"Where every team ships faster"` at #171717 and `"Get your team shipping today"` at #000000, both 40px.
- Don't loosen display leading. 64px sets on 64px, 72px on 72px, and `"Plans and Pricing"` sets 48px type on a 40px line.
- Don't dress the sticky nav: `.items-center.w-full.bg-background-200.sticky` paints border none and shadow none on its three headers.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FAFAFA` | Page ground and sticky header, one tone. |
| 1 | Surface | `#FFFFFF` | Cards, controls, the composer, bento tiles — every interactive thing. |
| 2 | Panel | `#F2F2F2` | Pricing cards and the enterprise closing block — a plane that groups without bordering. |
| 3 | Inverse | `#171717` | Model cards and filled buttons; the ink value promoted to a surface. |

## Elevation

Depth is drawn, not blurred. The dominant device is a 1px ring painted as a shadow — `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px` — alone on the home page's media frames, and with a 2px lift under avatars and the raised pricing buttons. Above that, elevation is reserved: a card shadow on the enterprise inset panel, a 20px float on the white 16px-radius enterprise card `.shadow-base.border-alpha-400.flex.h-full` (the framed screenshot carries none), three 25px/50px modal shadows on home's `.rounded-xl.overflow-hidden.bg-v0-white.shadow-2xl`. Note `shadow-base` — on the composer, the pricing card and the enterprise frame it resolves to five fully transparent layers, so the resting state has geometry but no visible depth. Between levels the separator is luminance: #FAFAFA to #FFFFFF is a two-point step.

## Imagery

Photography is absent; the imagery is the product itself. Home is a wall of generated-app thumbnails — dark dashboards, editorial landing pages, 3D galleries — each in a framed tile with a hairline ring, credited by a circular avatar and a usage counter. Enterprise opens on a greyscale logo marquee, then a dense bento of app screenshots in irregular columns: the message is volume. The iOS page reduces to one object — a photoreal iPhone render on empty canvas, showing the same composer.

## Layout

Contained, centred, generous. Sections cap at 1400px (columns 1264px home, 1200px enterprise) on the section-padding rhythm tabled above, plus a 48px bordered CTA panel that pads itself rather than its section. The nav sits on the canvas tone — wordmark left, links centred, one dark button right. The home page runs a single column: heading, composer, pill row, then a three-across template grid with 24px gutters. Enterprise alternates full-bleed bands with contained two-column blocks. Pricing is a four-across card row, then four dark model cards and a full-width FAQ list divided by #EAEAEA rules.

## Typography Voice

Two modes, cleanly separated. The product mode is Inter and small: 14px/500 labels, 13px/400 counters set solid at a 13px line, 10px GeistMono chips, 16px/500 list titles on a 16px line. Most of that range sets normal, though not all: the 8px mock label tracks −0.4px, the 9px placeholder −0.15px, GeistSans's 16px/500 `"Plus"` −0.4px. The marketing mode is GeistSans 600, and it does what the product mode does not: as size grows, tracking tightens and leading collapses. Tracking runs −0.4px at 20px, −2.4px at 40px, −4.32px at 72px, where line-height equals type size exactly. The pricing page keeps a third, softer setting — Inter 40px/600 at −1px, roughly −0.025em where GeistSans at that size sits near −0.06em — which is why `"Model Pricing"` reads calmer than `"Where every team ships faster"`.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FAFAFA`
- text: `#171717`
- surface: `#FFFFFF`
- border: `#EBEBEB`
- accent: `#0FA594`
- primary action: `#171717`

## Example Component Prompts

1. **Prompt Composer**: Centred form, 12px radius, 1px solid #C9C9C9 border, #FFFFFF fill, no shadow at rest. Placeholder type: `not measured` — the walk has no `input` or `textarea`. Below the field, a toolbar row with 4px gaps holding a model selector and a mic button. Above it, an h1 in GeistSans 600 at 32px/40px, −1.28px tracking, #171717, centred.
2. **Pricing Card**: Flex column, fill #F2F2F2, radius 16px, no border, no shadow. Plan name Inter 600 at 30px/36px, −0.75px tracking, #171717. Price GeistSans 600 at 24px/32px, −0.96px tracking, #666666. Feature rows as `li` at 14px/400/20px with a 1px `rgba(0, 0, 0, 0.05)` bottom rule, 8px gap. Footer button: fill #FFFFFF, 14px/500, padding 0 16px, radius 8px, no border, shadow `rgba(0, 0, 0, 0.08) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 1px 0`.
3. **Content Card Grid**: Three columns, 24px gap, on #FAFAFA. Each card: #FFFFFF fill, 16px radius, 1px #EBEBEB border, no shadow, no padding. Inside, a 16:9 media frame at 8px radius, fill #FAFAFA, shadow `rgba(0, 0, 0, 0.08) 0 0 0 1px`. Below it a title in Inter 500 at 16px/16px #171717, then a 36px avatar image (fill #EBEBEB, no border) inside a wrapper carrying the 1px #EBEBEB border and ring-plus-lift shadow, then a 13px/13px #666666 counter row, 6px gap.
4. **Sticky Nav Bar**: Sticky header, fill #FAFAFA, padding 0 8px, no border, no shadow. Wordmark left. Centred links GeistSans 500 at 14px/20px, #666666, padding 4px 8px, radius 6px, 4px gap; active link switches ink to #171717. Right: a dark button, fill #171717, text #FFFFFF, 14px/500, padding 0 12px, radius 8px, 1px #171717 border.
5. **Enterprise Hero**: Full-bleed section on #FAFAFA, 80px vertical padding. Headline GeistSans 600 at 64px/64px, −3.2px tracking, #000000, centred over two lines. Subcopy GeistSans 400 at 18px/28px, #666666. CTA: pill button, fill #171717, text #FFFFFF, 16px/500, padding 0 20px, radius 9999px, 1px #171717 border. Beneath, a greyscale logo row; enterprise's only mask is a flat #FFFFFF → #FFFFFF gradient on `.inset-x-0.bottom-0`.

## Similar Brands

- **Linear** — near-white ground, hairline-first structure, no brand colour on the primary button.
- **Stripe Docs** — tiny untracked interface type against large tightly-tracked headings.
- **Raycast** — product-first: the UI screenshot is the imagery, the palette nearly all neutral.
- **Framer** — the same marketing-versus-product split, oversized sans over restrained chrome.
- **Mercury** — layered off-whites and single-pixel borders doing shadows' work.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-panel: #F2F2F2;
  --color-ink: #171717;
  --color-ink-absolute: #000000;
  --color-ink-muted: #666666;
  --color-ink-faint: #575757;
  --color-hairline: #EBEBEB;
  --color-divider: #EAEAEA;
  --color-chip-border: #E6E6E6;
  --color-button-border: #E4E4E7;
  --color-composer-border: #C9C9C9;
  --color-alpha-400: rgba(0, 0, 0, 0.08);
  --color-alpha-300: rgba(0, 0, 0, 0.1);
  --color-alpha-200: rgba(0, 0, 0, 0.05);
  --color-inverse-hairline: rgba(255, 255, 255, 0.08);
  --color-inverse-wash: rgba(255, 255, 255, 0.05);
  --color-veil: rgba(255, 255, 255, 0.8);
  --color-accent: #0FA594;
  --color-dot-red: #FF5F57;
  --color-dot-amber: #FEBC2E;
  --color-dot-green: #28C840;
  --gradient-keycap: linear-gradient(#9A9A9A, #686868, #848484, #3A3A3A);

  /* Typography — Families */
  --font-sans: 'GeistSans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Inter', 'GeistSans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'GeistMono', ui-monospace, SFMono-Regular, monospace;
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Typography — Scale */
  --text-8: 8px;    --leading-8: 9.5px;   --tracking-8: -0.4px;
  --text-10: 10px;  --leading-10: 15px;   --tracking-10: normal;
  --text-13: 13px;  --leading-13: 13px;   --tracking-13: normal;
  --text-14: 14px;  --leading-14: 20px;   --tracking-14: normal;
  --text-16: 16px;  --leading-16: 24px;   --tracking-16: normal;
  --text-18: 18px;  --leading-18: 28px;   --tracking-18: normal;
  --text-20: 20px;  --leading-20: 26px;   --tracking-20: -0.4px;
  --text-24: 24px;  --leading-24: 32px;   --tracking-24: -0.96px;
  --text-30: 30px;  --leading-30: 36px;   --tracking-30: -0.75px;
  --text-32: 32px;  --leading-32: 40px;   --tracking-32: -1.28px;
  --text-40: 40px;  --leading-40: 48px;   --tracking-40: -2.4px;
  --text-48: 48px;  --leading-48: 56px;   --tracking-48: -2.88px;
  --text-64: 64px;  --leading-64: 64px;   --tracking-64: -3.2px;
  --text-72: 72px;  --leading-72: 72px;   --tracking-72: -4.32px;

  /* Spacing */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 12px;
  --spacing-2xl: 16px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 35px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-ring: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  --shadow-lift: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 1px 0px;
  --shadow-card: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-panel: rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px;
  --shadow-float: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --shadow-modal: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  --shadow-key: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.15) 0px 6px 4px -2px, rgba(0, 0, 0, 0.25) 0px -3px 1px -1px inset;

  /* Layout */
  --max-width-page: 1400px;
}
```

### Tailwind v4

```css
@theme {
  --color-canvas: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-panel: #F2F2F2;
  --color-ink: #171717;
  --color-ink-absolute: #000000;
  --color-ink-muted: #666666;
  --color-ink-faint: #575757;
  --color-hairline: #EBEBEB;
  --color-divider: #EAEAEA;
  --color-chip-border: #E6E6E6;
  --color-button-border: #E4E4E7;
  --color-composer-border: #C9C9C9;
  --color-alpha-400: rgba(0, 0, 0, 0.08);
  --color-alpha-300: rgba(0, 0, 0, 0.1);
  --color-alpha-200: rgba(0, 0, 0, 0.05);
  --color-inverse-hairline: rgba(255, 255, 255, 0.08);
  --color-inverse-wash: rgba(255, 255, 255, 0.05);
  --color-veil: rgba(255, 255, 255, 0.8);
  --color-accent: #0FA594;
  --color-dot-red: #FF5F57;
  --color-dot-amber: #FEBC2E;
  --color-dot-green: #28C840;

  --font-sans: 'GeistSans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Inter', 'GeistSans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'GeistMono', ui-monospace, SFMono-Regular, monospace;
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --text-8: 8px;
  --text-8--line-height: 9.5px;
  --text-8--letter-spacing: -0.4px;
  --text-10: 10px;
  --text-10--line-height: 15px;
  --text-13: 13px;
  --text-13--line-height: 13px;
  --text-14: 14px;
  --text-14--line-height: 20px;
  --text-16: 16px;
  --text-16--line-height: 24px;
  --text-18: 18px;
  --text-18--line-height: 28px;
  --text-20: 20px;
  --text-20--line-height: 26px;
  --text-20--letter-spacing: -0.4px;
  --text-24: 24px;
  --text-24--line-height: 32px;
  --text-24--letter-spacing: -0.96px;
  --text-30: 30px;
  --text-30--line-height: 36px;
  --text-30--letter-spacing: -0.75px;
  --text-32: 32px;
  --text-32--line-height: 40px;
  --text-32--letter-spacing: -1.28px;
  --text-40: 40px;
  --text-40--line-height: 48px;
  --text-40--letter-spacing: -2.4px;
  --text-48: 48px;
  --text-48--line-height: 56px;
  --text-48--letter-spacing: -2.88px;
  --text-64: 64px;
  --text-64--line-height: 64px;
  --text-64--letter-spacing: -3.2px;
  --text-72: 72px;
  --text-72--line-height: 72px;
  --text-72--letter-spacing: -4.32px;

  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 12px;
  --spacing-2xl: 16px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 35px;
  --radius-full: 9999px;

  --shadow-ring: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  --shadow-lift: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 1px 0px;
  --shadow-card: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-panel: rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px;
  --shadow-float: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --shadow-modal: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
```