---
version: alpha
name: Cluely
description: "A Garamond headline over a painted sky, then quiet white engineering."
colors:
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#E2E3E9"
  primary: "#2B7FFF"
  graphite: "#2E3038"
  charcoal: "#1C1D22"
  hud-black: "rgba(24,23,28,0.8)"
  footer-blue: "#DDE2EE"
  card-mist: "#F2F4F9"
  hairline: "#E4E4E7"
  body-slate: "#5E616E"
  footer-ink: "#777A88"
  chip-ink: "#464853"
  status-green: "#2CB463"
  halo-cyan: "#7DF0F8"
  action-gradient: "rgba(255,255,255,0.6)"
  dark-gradient: "#2E3038"
  text-gradient: "#667799"
typography:
  hero-display:
    fontFamily: EB Garamond
    fontSize: 80px
    fontWeight: 500
    lineHeight: 76.8px
    letterSpacing: -1px
  page-title:
    fontFamily: ui-monospace
    fontSize: 60px
    fontWeight: 400
    lineHeight: 60px
    letterSpacing: -1.5px
  section-heading:
    fontFamily: ui-monospace
    fontSize: 56px
    fontWeight: 400
    lineHeight: 70px
    letterSpacing: -1.28px
  price:
    fontFamily: ui-monospace
    fontSize: 40px
    fontWeight: 400
    lineHeight: 50px
    letterSpacing: -1px
  statement:
    fontFamily: ui-monospace
    fontSize: 28px
    fontWeight: 400
    lineHeight: 35px
    letterSpacing: -1.12px
  card-title:
    fontFamily: ui-monospace
    fontSize: 24px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: -0.96px
  lead:
    fontFamily: ui-monospace
    fontSize: 20px
    fontWeight: 400
    lineHeight: 27.5px
    letterSpacing: -0.5px
  hero-subhead:
    fontFamily: EB Garamond
    fontSize: 19px
    fontWeight: 500
    lineHeight: 26.6px
    letterSpacing: -0.38px
  plan-title:
    fontFamily: ui-monospace
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24.75px
    letterSpacing: -0.45px
  body:
    fontFamily: ui-monospace
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: -0.4px
  body-2:
    fontFamily: ui-monospace
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  label:
    fontFamily: ui-monospace
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.35px
  micro:
    fontFamily: ui-monospace
    fontSize: 13px
    fontWeight: 400
    lineHeight: 17.875px
    letterSpacing: -0.325px
  caption:
    fontFamily: ui-monospace
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.5px
    letterSpacing: -0.3px
  badge:
    fontFamily: ui-monospace
    fontSize: 11px
    fontWeight: 400
    lineHeight: 15.125px
    letterSpacing: -0.4px
rounded:
  links-wordmark-small-chrome: 4px
  buttons-status-chip-inline-gradient-wrap: 6px
  arrow-keys: 8px
  gradient-download-button: 12px
  nav-shell-dark-hud-panel: 16px
  product-screenshot-frame: 13px
  pricing-card: 20px
  sticky-nav-underside: 0px
  pills-dots-avatars-toggles: 9999px
spacing:
  3xs: 2px
  2xs: 4px
  xs: 6px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
  card: 20px
  section-sm: 80px
  section-lg: 220px
---
# Cluely — Style Reference

> A Garamond headline over a painted sky, then quiet white engineering.

**Theme:** light

Cluely runs one system on a #FFFFFF canvas with #000000 ink and Geist carrying nearly all of it, then reserves the hero for a different display face on each entry page — EB Garamond in white over a photographic sky on the home page, a proprietary `forma` cut on the pricing page. Every captured page closes on the same #DDE2EE footer band, the largest field of colour the system fills anywhere. The signature move is the gradient: dark buttons ramp #2E3038 → #1C1D22, the download action ramps a white blush into #1E82E0 → #1C38EA under stacked inset shadows, and the closing line of copy is itself a clipped gradient running #667799 → #94A0B8. Structure elsewhere is one hairline, #E4E4E7, and negative space. Geist's tracking tightens as type grows, from `normal` at body size to −1.5px at display size, so hierarchy reads as compression rather than weight.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#FFFFFF` | `--color-background` | Body fill on all four pages and the theme's ground; also the sticky plan header and the keycap buttons. |
| Ink | `#000000` | `--color-foreground` | The default text colour by a wide margin. All 629 of its observations are text. |
| Graphite | `#2E3038` | `--color-graphite` | Footer link ink at 16px/400 and the top stop of the dark button gradient. The workhorse soft black — link text, not large fields. |
| Charcoal | `#1C1D22` | `--color-charcoal` | Bottom stop of the dark button gradient and the clip colour behind the pricing hero's headline words — "Start" and "for free." A stop, not a surface. |
| HUD Black | `rgba(24,23,28,0.8)` | `--color-hud` | Fills the floating product control pill `.mx-auto.flex.w-fit.items-center`, one div, home page. Product chrome, not marketing surface. |
| Footer Blue | `#DDE2EE` | `--color-secondary-blue` | The footer fill on every page and the closing stop of the page-bottom fade (`#FFFFFF → #DDE2EE`, on `.pointer-events-none.absolute.inset-x-0.bottom-0`). The largest coloured field the system paints; its rarity is the signal. |
| Card Mist | `#F2F4F9` | `--color-surface` | The pricing card fill. One step off white — the card reads as raised by shadow, not by tone. |
| Hairline | `#E4E4E7` | `--color-border` | The structural 1px rule: feature rows, pricing rows, the segmented-control track. The most-painted border, at 35 observations. |
| Key Border | `#E2E3E9` | `--color-border-key` | The 1px border on the undetectability page's five arrow keys — `"↑" .relative.flex.h-full.w-9` and `.relative.flex.h-full.w-[59px]`. A warmer hairline for that keyboard row. |
| Body Slate | `#5E616E` | `--color-text-muted` | Lead paragraphs and plan descriptions — the reading grey directly beneath a black heading. |
| Footer Ink | `#777A88` | `--color-text-subtle` | Copyright line, price sub-labels, metadata. The quietest text the system prints at scale. |
| Chip Ink | `#464853` | `--color-text-chip` | Ink of the status chip label at 14px/500. Scoped to that control. |
| Signal Blue | `#2B7FFF` | `--color-accent` | Fill of the "New" pill badge, white ink on top — 34×19px at 11px/600, four across the four pages. An annotation colour, not a CTA; its placement is `not measured`. |
| Status Green | `#2CB463` | `--color-status-ok` | The 6×6px dot beside "All systems operational", at four fill observations — health, not decoration. |
| Halo Cyan | `#7DF0F8` | `--color-halo` | Blurred glow behind the home and pricing CTAs — six observations, all fills. Atmosphere rather than ink. |
| Action Gradient | `rgba(255,255,255,0.6) → #1E82E0 → #1C38EA` | `--gradient-action` | The download button. The white stop is a specular blush at the top edge, not a colour you can flatten. |
| Dark Gradient | `#2E3038 → #1C1D22` | `--gradient-dark` | Subscribe and Download buttons. Near-black with a lit top. |
| Text Gradient | `#667799 → #94A0B8 → #667799` | `--gradient-text` | Clipped into the second line of the closing statement. Used on copy rather than on control labels. |

## Tokens — Typography

### Geist — the entire working system; weight does the least work, size and tracking the most · `--font-sans`
- **Substitute:** Inter, ui-sans-serif, system-ui
- **Weights:** 400, 500, 600
- **Sizes:** 11, 12, 13, 14, 16, 18, 19, 20, 24, 28, 40, 56, 60px
- **Line height:** 12px at 12px type through 70px at 56px type
- **Letter spacing:** a ramp tied to size — `normal` at 16px, −0.325px at 13px, −0.4px at 16px labels, −0.96px at 24px, −1.12px at 28px, −1.28px at 56px, −1.5px at 60px
- **Role:** nav, headings, body, labels, prices, badges.

### EB Garamond — the home hero's display face, at one size and one weight · `--font-serif`
- **Substitute:** Cormorant Garamond, Georgia, serif
- **Weights:** 500
- **Sizes:** 80px
- **Line height:** 76.8px — 96% of the size
- **Letter spacing:** −1px
- **Role:** every EB Garamond row the census carries sits on the home page, white on the photographic sky.

### forma — the pricing hero's display cut, holding the slot the serif holds on the home page · `--font-display`
- **Substitute:** Neue Haas Grotesk Display, Helvetica Now Display, sans-serif
- **Weights:** 500
- **Sizes:** 60px
- **Line height:** 60px (1.0)
- **Letter spacing:** normal — where Geist's 56px and 60px headings run −1.28px and −1.5px, the `forma` rows tend not to tighten at all
- **Role:** its words are clipped to a #1C1D22 fill.

### ui-monospace — machine text: the event-log table and inline code identifiers in the undetectability demo · `--font-mono`
- **Substitute:** SF Mono, JetBrains Mono, ui-monospace
- **Weights:** 400, 500
- **Sizes:** `not measured` — the census names the family and its weights, no sized row
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** in the undetectability demo, `userId` prints in #4984FD.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Hero display (serif) | 80px | 76.8px | −1px | `--text-display` |
| Page title | 60px | 60px | −1.5px | `--text-h1` |
| Section heading | 56px | 70px | −1.28px | `--text-h2` |
| Price | 40px | 50px | −1px | `--text-price` |
| Statement | 28px | 35px | −1.12px | `--text-h3` |
| Card title | 24px | 27px | −0.96px | `--text-h4` |
| Lead | 20px | 27.5px | −0.5px | `--text-lead` |
| Hero subhead | 19px | 26.6px | −0.38px | `--text-subhead` |
| Plan title | 18px | 24.75px | −0.45px | `--text-title` |
| Body | 16px | 22px | −0.4px | `--text-body` |
| Body (loose) | 16px | 24px | normal | `--text-body-loose` |
| Label | 14px | 20px | −0.35px | `--text-label` |
| Micro | 13px | 17.875px | −0.325px | `--text-micro` |
| Caption | 12px | 16.5px | −0.3px | `--text-caption` |
| Badge | 11px | 15.125px | −0.4px | `--text-badge` |

## Tokens — Spacing & Shapes

**Base unit:** 2px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 2px | `--spacing-3xs` |
| 2xs | 4px | `--spacing-2xs` |
| xs | 6px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 10px | `--spacing-md` |
| lg | 12px | `--spacing-lg` |
| xl | 16px | `--spacing-xl` |
| card | 20px | `--spacing-card` |
| section-sm | 80px | `--spacing-section-sm` |
| section-lg | 220px | `--spacing-section-lg` |

### Border Radius
| Element | Value |
|---------|-------|
| Links, wordmark, small chrome | 4px |
| Buttons, status chip, inline gradient wrapper | 6px |
| Arrow keys (undetectability page) | 8px |
| Gradient download button | 12px |
| Nav shell, dark HUD panel | 16px |
| Product screenshot frame | 13px |
| Pricing card | 20px |
| Sticky nav underside | 0px 0px 6px 6px |
| Pills, dots, avatars, toggles | 9999px |
| Glow blobs | 100% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Pricing card | `rgba(255,255,255,0.5) -18px -9px 32.9px 0px, rgba(238,241,247,0.4) -10px -4px 11.3px 0px, rgba(133,145,172,0.2) 10px 4px 15.4px 0px, rgba(121,140,182,0.2) 10px 20px 20px 0px, rgb(178,194,221) 15px 15px 39.3px 0px, rgba(255,255,255,0.56) 2px 2px 1.4px 0px inset` | `--shadow-card` |
| HUD pill / panel | `rgba(207,226,255,0.24) 0px 0px 0px 1px, rgba(255,255,255,0.8) 0px -0.5px 0px 0px` | `--shadow-hud` |
| Action button | `rgba(0,15,154,0.65) -1px -1px 4px 0px inset, rgba(119,133,164,0.43) 5px 7px 7px 0px, rgba(0,0,0,0.2) 1px 1px 3px 0px, rgba(255,255,255,0.35) -0.5px -0.5px 1px 0px inset` | `--shadow-action` |
| Gradient glow | `rgba(148,172,243,0.4) 20px 20px 24px 0px, rgba(191,229,251,0.4) -3px -3px 4px 0px inset, rgba(19,26,228,0.1) 4px 4px 4px 0px inset` | `--shadow-glow` |
| Toggle thumb | `rgb(0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px` | `--shadow-thumb` |
| Soft card | `rgba(0,0,0,0.05) 0px 15px 15px 0px` | `--shadow-soft` |

### Layout
- **Page max-width:** 1152px (`.mx-auto.flex.w-full.max-w-6xl`); the home page's accordion column measures 1216px
- **Section gap:** vertical section padding of 80px, 96px, 112px, 128px, 160px and 220px
- **Card padding:** 20px on the pricing card; 12px vertical on comparison rows; 40px top on the footer
- **Element gap:** 6px is the default flex gap; stacks step 8px → 12px → 16px

## Components

### Top Navigation Bar
**Role:** wayfinding strip: wordmark left, three destinations, download action right.
`.flex.items-center.justify-center.gap-1` — div, fill none, padding 4px 12px, radius 16px, 422×44px, all pages, containing "Cluely Undetectability Mobile Blog" — sits inside `.mx-auto.flex.w-full.max-w-6xl`, a 1152×44px shell at radius `0px 0px 6px 6px`, so the bottom corners round as it sticks. Nav links paint Geist 14px/500/20px at `normal` tracking in #000000 on the download, pricing and undetectability pages, #FFFFFF three times on the home page where the bar floats over the sky. The wordmark `.inline-flex.shrink-0.translate-y-0.5.items-center` is an 84×22px anchor at radius 4px. No fill, border or shadow: the bar is defined by what it does not paint.

### Hero Display Lockup
**Role:** an oversized headline and one clarifying sentence, centred.
The headline is EB Garamond 80px/500, line-height 76.8px, tracking −1px, #FFFFFF, carried by `.hero-word-rise.inline-block` spans in a centred column. At 96% line height the two lines nearly collide, which makes a serif read as a logotype rather than an article. The subhead is Geist 19px/500/26.6px, tracking −0.38px, also #FFFFFF, on `.hero-fade-up.max-w-[560px].text-center.leading-[140%]` — a 560px measure against the headline's tighter column.

### Primary CTA — Gradient Download Button
**Role:** get the app.
`.purple-gradient-button.rounded-[10px].items-center.gap-[6px]` ramps `rgba(255,255,255,0.6)` through #1E82E0 to #1C38EA at radius 12px, 6px gap between glyph and label, under `--shadow-glow` — an outer bloom plus two insets that make the surface read as convex glass; its padding is `not measured`. A second download anchor on the home and pricing pages repeats the idea at radius 6px under `--shadow-action`; its padding and box are `not measured`. The gradient button's label prints #FFFFFF; size, weight and line-height are `not measured`.

### Dark Action Button
**Role:** the commitment action on the pricing page — Subscribe.
`.relative.inline-flex.items-center.justify-center` measures two ways. Large: 16px/500/16px at −0.4px tracking, padding 0px 20px, radius 6px, no border, no shadow, box 267×44px on the pricing page. Compact: 13px/500/13px at −0.325px, padding 0px 16px, radius 6px, box 216×32px. Both fill with the #2E3038 → #1C1D22 gradient, which lights the top edge just enough to stop the button reading as a flat black rectangle. Labels print #FFFFFF.

### Pricing Card
**Role:** a plan, priced, with its feature list and call to action.
`.pricing-card.relative.z-10.row-span-5` is an `li` filled #F2F4F9 at radius 20px, 20px padding, no border, box 307×424px, under the six-layer `--shadow-card`: white highlights up and left, blue-grey weight down and right, a solid `rgb(178,194,221) 15px 15px 39.3px`, closed by a `rgba(255,255,255,0.56) 2px 2px 1.4px inset` rim. Plan title Geist 18px/600/24.75px/−0.45px in #2E3038, price Geist 40px/500/50px/−1px in #000000, description Geist 16px/400/22px/−0.4px in #5E616E.

### Pricing Segmented Control
**Role:** switches the price table between desktop and mobile products.
The track is `.relative.inline-flex.items-center.rounded-full` — a div filled #FAFAFA, padding 2px 4px, radius 9999px, 1px #E4E4E7 border, no shadow. The active thumb is `.absolute.h-[calc(100%-8px)].rounded-full.bg-secondary-foreground`, filled #18181B under `rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px` — a two-step shadow so shallow it reads as a pressed sticker, not a raised chip. The selected label paints #FAFAFA on `.relative.z-10.flex.items-center`; the unselected "Mobile" paints #71717A on the same class.

### Comparison Table Row
**Role:** one feature, compared across the three plans.
`.relative.z-10.flex.min-h-11` is a div: 12px top padding, radius 0px, 1px #E4E4E7 border, no shadow, box 299×47px, containing "Limited AI responses". `.flex.flex-col.gap-y-0.5.border-b` is the labelled variant: fill #FFFFFF, 12px top padding, 1px #E4E4E7 border, box 320×47px, containing "AI messages per day", 2px vertical gap between its lines. Feature text prints Geist 14px/400 in #000000 at two line-heights on the pricing page, 18.2px and 17.5px, both at −0.35px tracking. Both rows carry that one border and no second rule; no zebra fill.

### Product HUD Panel
**Role:** the floating assistant surface inside the product imagery.
`.flex.flex-col.rounded-2xl.border` paints no fill — a gradient from `rgba(24,23,28,0.75)` to `rgba(24,23,28,0.8)`, radius 16px, `rgba(255,255,255,0.25)` border, shadow `--shadow-hud` — a one-pixel cool ring plus a half-pixel white top lip. The lip mimics the light edge macOS puts on vibrancy panels, so the surface reads as glass over a video call rather than a div. Padding and box are `not measured`. Body text prints Geist 12px/400/12px in #EDEEF2 on `.text-xs.leading-[1.6].text-[#edeef2]`.

### Quick-Action Chip
**Role:** the assistant's suggested next moves — Assist, What should I say?, Follow-up questions, Recap.
`.flex.items-center.gap-1.5.rounded-full` is a button with no fill, 12px/400/12px at `normal` tracking, padding 8px top and 6px left, radius 9999px, no border, no shadow; its box runs 68–147px wide by 30px tall, so chips size to their label rather than to a grid. Separated by a 3×3px #898B91 dot at radius 9999px — quieter than a divider line at that scale. Label ink is #EDEEF2. The ghost variant `.flex.h-[22px].items-center.gap-0.5`: fill `rgba(24,23,28,0.1)`, 1px `rgba(255,255,255,0.15)` border, padding 0px 6px, radius 9999px, label "Smart" at 12px/500 in `rgba(255,255,255,0.4)`.

### Undetectability Feature Card
**Role:** one proof of the claim: a product still with a caption beneath.
`.card-styles.flex.flex-col.justify-between` fills with a radial gradient starting on the footer's own #DDE2EE and deepening to #BBC5DD, a stop the census paints only on these cards, so they read as cut from the page's own blue rather than introduced. Radius, padding and box are `not measured`. The caption is one paragraph, Geist 20px/400/27.5px at −0.5px tracking in #5E616E, with the lead clause promoted to `strong` at Geist 20px/500/27.5px/−0.5px in #2E3038 via `.mr-1.font-medium.text-gray-20` — bold as a sentence opener, not a separate heading. The eyebrow above the logo row prints Geist on `.text-xs.font-semibold.tracking-[0.15em].text-[#8C929D]`.

### Status Chip
**Role:** live service health, parked at the bottom of every page.
`.font-medium.tracking-tight.transition-colors.duration-300` is an anchor filled `rgba(211,217,233,0.5)`, 1px `rgba(201,208,228,0.5)` border, padding 0px 12px, radius 6px, no shadow, box 182×34px, ink #464853 at Geist 14px/500/14px, tracking −0.35px, reading "All systems operational". Its indicator is a 6×6px #2CB463 circle at radius 9999px. Fill and border are both translucent, so the chip picks up the footer's #DDE2EE instead of sitting on it. The "New" badge is the opposite treatment: `.inline-flex.items-center.rounded-full.bg-blue-500`, solid #2B7FFF, #FFFFFF ink, Geist 11px/600/15.125px/−0.4px, padding 2px 6px, radius 9999px, 34×19px.

### Footer
**Role:** the closing band — wordmark, four link columns, status, copyright.
`.relative.bg-secondary-blue.pt-10.pb-5` is a `footer` filled #DDE2EE with 40px top padding, radius 0px, no border, no shadow, box 1920×372px on all four pages — full bleed. Column headings Geist 16px/500/24px at −0.4px in #000000 (`.font-medium.tracking-tight.text-black`); links `.rounded.tracking-tight.[&_svg]:shrink-0.inline-flex`, 16px/400/22px at −0.4px in #2E3038, radius 4px, no fill or border, boxes 32–163px wide by 22px tall, on an 8px vertical gap. The copyright drops to Geist 14px/400/20px/−0.35px in #777A88.

## Do's and Don'ts

### Do
- Keep #FFFFFF as the ground, #DDE2EE the one large coloured field (`.relative.bg-secondary-blue.pt-10.pb-5`, every page).
- Tighten tracking as type grows: −0.4px at 16px, −1.12px at 28px, −1.5px at 60px. Hierarchy here is compression, not weight.
- Separate with the #E4E4E7 hairline before reaching for a shadow.
- Give the download action the full gradient-plus-inset treatment (`.purple-gradient-button.rounded-[10px].items-center.gap-[6px]`) and nothing else.
- Set the hero display face at a line height at or below its own size — EB Garamond at 80px sets on 76.8px.
- Use #2B7FFF as `.inline-flex.items-center.rounded-full.bg-blue-500` does: an 11px/600 badge, not a button.

### Don't
- Don't flatten a gradient to its midpoint. `.relative.inline-flex.items-center.justify-center` is #2E3038 → #1C1D22; the ramp is the finish.
- Don't put the pricing card's six-layer shadow on anything else — `.pricing-card.relative.z-10.row-span-5` is the only class in the shadows block carrying it.
- Don't add a scrim behind the hero type. White EB Garamond sits directly on the sky image, unboxed.
- Don't set body copy in pure #000000 under a black heading — the captured lead paragraphs step down to #5E616E and #52525C.
- Don't introduce another family. The inventory names four — Geist, EB Garamond, forma, ui-monospace — and Geist carries nearly every text row.
- Don't let a marketing surface borrow the product chrome's #18171C or its translucent panels; those belong inside the app imagery.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Body fill on all four pages; the page's default ground |
| 1 | Card Mist | `#F2F4F9` | Pricing card fill — one step off canvas |
| 1 | Chrome | `#FAFAFA` | Segmented-control track |
| 2 | Footer Blue | `#DDE2EE` | The closing band, full bleed |
| 2 | Card Gradient | `#DDE2EE → #BBC5DD` | Undetectability feature cards |
| 3 | HUD Black | `rgba(24,23,28,0.8)` | Product control pill inside the app imagery |
| 3 | HUD Glass | `rgba(24,23,28,0.75) → rgba(24,23,28,0.8)` | Floating assistant panel — gradient, no fill |

## Elevation

Depth is two vocabularies that do not mix. On marketing surface, elevation is a 1px #E4E4E7 hairline plus vertical space: feature rows, comparison rows and the sticky plan header sit at `shadow none`. The exception is the pricing card, whose six-layer shadow throws white up-left and `rgb(178,194,221)` down-right, so it reads as lit from the top-left. In the product imagery, elevation switches to rim light: `.mx-auto.flex.w-fit.items-center` gets a ring and a half-pixel lip, not a drop. Buttons are moulded, not floated: `--shadow-action` pairs an inset lip with an outer drop. Plain grey drops stay inside the undetectability demo, such as `rgba(0,0,0,0.05) 0px 15px 15px 0px`.

## Imagery

The home hero composites a full macOS window — wallpaper, traffic lights, dock, two video tiles of people mid-call — onto a photographic sky running cool blue through a warm horizon, with a faint mountain ridge at the left edge. The undetectability page repeats it in miniature: a participants list with circular 32×32px avatar photos, a split screen-share demo bounded in #00FF26, a video-call still with the assistant panel overlaid. Rendered 3D appears sparingly — two frosted, glowing keycaps (⌘ and ↵) tumbling at the closing band, the app icon behind the pricing headline. Third-party logos are small full-colour app marks under a tracked eyebrow. No stock photography, no illustration: the pictures are the product doing what the headline claims.

## Layout

Content is contained at 1152px and centred. The footer runs the full 1920px of the body box, as does the white content wrapper `.grow.bg-white`. Horizontal gutters are light — one measured inset of 48px — so the page relies on max-width, not padding, to hold its column. Vertical rhythm is generous and uneven: 80px on ordinary blocks, 96px and 112px on feature and table sections, 128px and 160px on hero sections, 220px on the overflow bands. Grids run three-up — three pricing cards, three undetectability cards, four footer link columns beside a wordmark — and the page-bottom fade (`#FFFFFF → #DDE2EE`) hands the canvas to the footer without a rule.

## Typography Voice

The system has two modes and switches once per page. Mode one is the hero: a display face at 60–80px, set at or below 100% line height, centred, white on imagery or clipped to a gradient. Mode two is everything after: Geist at 14–28px, left-aligned, black or a slate step down. Line heights tend to 1.375 (16px on 22px, 68 elements) but run 1.0 at control labels (16px/16px, 14px/14px) and 1.5 at the loose 16px/24px row. The tracking ramp binds them: `normal` at 16px/24px body, −0.35px at 14px labels, −0.5px at 20px leads, −1.12px at 28px statements, −1.5px at the 60px page title. Optical tightening at scale is a display habit applied to an interface face, and it lets weight 500 carry headings from 16px to 60px; the census paints 600 on small type, at 11px, 18px and 20px. The countermove is `tracking-[0.15em]` in #8C929D on the section eyebrow — the one positive tracking value the census names, the quietest type on the page.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF`
- text: `#000000`
- surface: `#F2F4F9`
- border: `#E4E4E7`
- accent: `#2B7FFF`
- primary action: `linear-gradient(rgba(255,255,255,0.6), #1E82E0, #1C38EA)`

## Example Component Prompts
1. **Pricing card**: Build a plan card as an `li`: fill `#F2F4F9`, radius 20px, 20px padding, no border, 307×424px, box-shadow `--shadow-card`. Title Geist 18px/600/24.75px/−0.45px `#2E3038`; price Geist 40px/500/50px/−1px `#000000`; description Geist 16px/400/22px/−0.4px `#5E616E`.
2. **Gradient download button**: An anchor at radius 12px filled `linear-gradient(rgba(255,255,255,0.6), #1E82E0, #1C38EA)`, 6px gap between icon and label, box-shadow `--shadow-glow`. Label `#FFFFFF`; type `not measured`.
3. **Status chip**: An inline anchor, fill `rgba(211,217,233,0.5)`, 1px border `rgba(201,208,228,0.5)`, radius 6px, padding 0 12px, 182×34px, no shadow. Label Geist 14px/500/14px/−0.35px `#464853`. Leading indicator: 6×6px circle, `#2CB463`, radius 9999px.
4. **Footer band**: A full-bleed `footer` filled `#DDE2EE`, 40px top padding, radius 0, no border, no shadow, 1920×372px. Four link columns at 1152px max-width. Headings Geist 16px/500/24px/−0.4px `#000000`; links Geist 16px/400/22px/−0.4px `#2E3038`, radius 4px, 8px vertical gap; copyright Geist 14px/400/20px/−0.35px `#777A88`.
5. **Hero lockup**: Centred two-line headline in EB Garamond 80px/500/76.8px/−1px `#FFFFFF`, over a photographic sky. Subhead below in Geist 19px/500/26.6px/−0.38px `#FFFFFF`, max-width 560px. No scrim, no container, no shadow on either.

## Similar Brands
- **Linear** — near-monochrome light system; a tight-tracked grotesk and one hairline carry the structure, colour reserved for a single action.
- **Raycast** — glass product chrome (translucent dark panels, rim-lit edges) onto marketing pages as hero imagery.
- **Vercel** — white canvas, near-black type, shadowless hairline separation, gradients as accents.
- **Arc** — rendered 3D objects and soft blue glows as the decorative layer on a plain page.
- **Superhuman** — the serif-display-over-sans-interface split, and oversized, tightly-led hero type.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-background: #FFFFFF;
  --color-foreground: #000000;
  --color-graphite: #2E3038;
  --color-charcoal: #1C1D22;
  --color-hud: #18171C;
  --color-secondary-blue: #DDE2EE;
  --color-surface: #F2F4F9;
  --color-chrome: #FAFAFA;
  --color-border: #E4E4E7;
  --color-border-key: #E2E3E9;
  --color-border-table: #E5E5E5;
  --color-text-muted: #5E616E;
  --color-text-muted-alt: #52525C;
  --color-text-subtle: #777A88;
  --color-text-chip: #464853;
  --color-text-logo: #3D4150;
  --color-text-eyebrow: #8C929D;
  --color-text-hud: #EDEEF2;
  --color-accent: #2B7FFF;
  --color-status-ok: #2CB463;
  --color-halo: #7DF0F8;
  --color-thumb: #18181B;
  --color-title-ink: #09090B;
  --color-dot: #898B91;
  --color-code: #4984FD;
  --color-fade-start: #E5E9F2;
  --color-fade-end: #D0D7E7;
  --color-card-gradient-end: #BBC5DD;
  --gradient-action: linear-gradient(rgba(255,255,255,0.6), #1E82E0, #1C38EA);
  --gradient-action-inner: linear-gradient(rgba(255,255,255,0.6), #497EE9, #648BEC);
  --gradient-dark: linear-gradient(#2E3038, #1C1D22);
  --gradient-text: linear-gradient(96.56deg, #667799 21.01%, #94A0B8 34.62%, #667799 47.64%, #667799 69.29%, #94A0B8 79.76%, #667799 90.35%);
  --gradient-card: radial-gradient(92.09% 126.39% at 50% 100%, #DDE2EE 58.91%, #BBC5DD 100%);
  --gradient-fade: linear-gradient(180deg, #FFFFFF 0%, #DDE2EE 100%);
  --surface-chip: rgba(211,217,233,0.5);
  --border-chip: rgba(201,208,228,0.5);
  --surface-hud-glass: rgba(24,23,28,0.8);
  --border-hud-glass: rgba(255,255,255,0.25);
  --surface-ghost: rgba(24,23,28,0.1);
  --border-ghost: rgba(255,255,255,0.15);
  --rule-soft: rgba(228,228,231,0.5);

  /* Typography — Families */
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-display: 'forma', 'Helvetica Now Display', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', monospace;

  /* Typography — Scale */
  --text-display: 80px;   --leading-display: 76.8px;   --tracking-display: -1px;
  --text-h1: 60px;        --leading-h1: 60px;          --tracking-h1: -1.5px;
  --text-h2: 56px;        --leading-h2: 70px;          --tracking-h2: -1.28px;
  --text-price: 40px;     --leading-price: 50px;       --tracking-price: -1px;
  --text-h3: 28px;        --leading-h3: 35px;          --tracking-h3: -1.12px;
  --text-h4: 24px;        --leading-h4: 27px;          --tracking-h4: -0.96px;
  --text-lead: 20px;      --leading-lead: 27.5px;      --tracking-lead: -0.5px;
  --text-subhead: 19px;   --leading-subhead: 26.6px;   --tracking-subhead: -0.38px;
  --text-title: 18px;     --leading-title: 24.75px;    --tracking-title: -0.45px;
  --text-body: 16px;      --leading-body: 22px;        --tracking-body: -0.4px;
  --text-body-loose: 16px;--leading-body-loose: 24px;  --tracking-body-loose: normal;
  --text-label: 14px;     --leading-label: 20px;       --tracking-label: -0.35px;
  --text-micro: 13px;     --leading-micro: 17.875px;   --tracking-micro: -0.325px;
  --text-caption: 12px;   --leading-caption: 16.5px;   --tracking-caption: -0.3px;
  --text-badge: 11px;     --leading-badge: 15.125px;   --tracking-badge: -0.4px;
  --tracking-eyebrow: 0.15em;

  /* Spacing */
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-card: 20px;
  --spacing-section-sm: 80px;
  --spacing-section-md: 112px;
  --spacing-section-lg: 220px;
  --spacing-gutter: 48px;
  --max-width-page: 1152px;
  --sticky-header-height: 3.25rem;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-frame: 13px;
  --radius-xl: 16px;
  --radius-card: 20px;
  --radius-nav: 0px 0px 6px 6px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: rgba(255,255,255,0.5) -18px -9px 32.9px 0px, rgba(238,241,247,0.4) -10px -4px 11.3px 0px, rgba(133,145,172,0.2) 10px 4px 15.4px 0px, rgba(121,140,182,0.2) 10px 20px 20px 0px, rgb(178,194,221) 15px 15px 39.3px 0px, rgba(255,255,255,0.56) 2px 2px 1.4px 0px inset;
  --shadow-hud: rgba(207,226,255,0.24) 0px 0px 0px 1px, rgba(255,255,255,0.8) 0px -0.5px 0px 0px;
  --shadow-action: rgba(0,15,154,0.65) -1px -1px 4px 0px inset, rgba(119,133,164,0.43) 5px 7px 7px 0px, rgba(0,0,0,0.2) 1px 1px 3px 0px, rgba(255,255,255,0.35) -0.5px -0.5px 1px 0px inset;
  --shadow-glow: rgba(148,172,243,0.4) 20px 20px 24px 0px, rgba(191,229,251,0.4) -3px -3px 4px 0px inset, rgba(19,26,228,0.1) 4px 4px 4px 0px inset;
  --shadow-thumb: rgb(0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px;
  --shadow-soft: rgba(0,0,0,0.05) 0px 15px 15px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-background: #FFFFFF;
  --color-foreground: #000000;
  --color-graphite: #2E3038;
  --color-charcoal: #1C1D22;
  --color-hud: #18171C;
  --color-secondary-blue: #DDE2EE;
  --color-surface: #F2F4F9;
  --color-chrome: #FAFAFA;
  --color-border: #E4E4E7;
  --color-border-key: #E2E3E9;
  --color-border-table: #E5E5E5;
  --color-text-muted: #5E616E;
  --color-text-muted-alt: #52525C;
  --color-text-subtle: #777A88;
  --color-text-chip: #464853;
  --color-text-logo: #3D4150;
  --color-text-eyebrow: #8C929D;
  --color-text-hud: #EDEEF2;
  --color-accent: #2B7FFF;
  --color-status-ok: #2CB463;
  --color-halo: #7DF0F8;
  --color-thumb: #18181B;
  --color-title-ink: #09090B;
  --color-dot: #898B91;
  --color-code: #4984FD;
  --color-fade-start: #E5E9F2;
  --color-fade-end: #D0D7E7;
  --color-card-gradient-end: #BBC5DD;

  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-display: 'forma', 'Helvetica Now Display', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', monospace;

  --text-display: 80px;
  --text-display--line-height: 76.8px;
  --text-display--letter-spacing: -1px;
  --text-h1: 60px;
  --text-h1--line-height: 60px;
  --text-h1--letter-spacing: -1.5px;
  --text-h2: 56px;
  --text-h2--line-height: 70px;
  --text-h2--letter-spacing: -1.28px;
  --text-price: 40px;
  --text-price--line-height: 50px;
  --text-price--letter-spacing: -1px;
  --text-h3: 28px;
  --text-h3--line-height: 35px;
  --text-h3--letter-spacing: -1.12px;
  --text-h4: 24px;
  --text-h4--line-height: 27px;
  --text-h4--letter-spacing: -0.96px;
  --text-lead: 20px;
  --text-lead--line-height: 27.5px;
  --text-lead--letter-spacing: -0.5px;
  --text-subhead: 19px;
  --text-subhead--line-height: 26.6px;
  --text-subhead--letter-spacing: -0.38px;
  --text-title: 18px;
  --text-title--line-height: 24.75px;
  --text-title--letter-spacing: -0.45px;
  --text-body: 16px;
  --text-body--line-height: 22px;
  --text-body--letter-spacing: -0.4px;
  --text-label: 14px;
  --text-label--line-height: 20px;
  --text-label--letter-spacing: -0.35px;
  --text-micro: 13px;
  --text-micro--line-height: 17.875px;
  --text-micro--letter-spacing: -0.325px;
  --text-caption: 12px;
  --text-caption--line-height: 16.5px;
  --text-caption--letter-spacing: -0.3px;
  --text-badge: 11px;
  --text-badge--line-height: 15.125px;
  --text-badge--letter-spacing: -0.4px;

  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-card: 20px;
  --spacing-section-sm: 80px;
  --spacing-section-md: 112px;
  --spacing-section-lg: 220px;
  --spacing-gutter: 48px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-frame: 13px;
  --radius-xl: 16px;
  --radius-card: 20px;
  --radius-full: 9999px;

  --shadow-card: rgba(255,255,255,0.5) -18px -9px 32.9px 0px, rgba(238,241,247,0.4) -10px -4px 11.3px 0px, rgba(133,145,172,0.2) 10px 4px 15.4px 0px, rgba(121,140,182,0.2) 10px 20px 20px 0px, rgb(178,194,221) 15px 15px 39.3px 0px, rgba(255,255,255,0.56) 2px 2px 1.4px 0px inset;
  --shadow-hud: rgba(207,226,255,0.24) 0px 0px 0px 1px, rgba(255,255,255,0.8) 0px -0.5px 0px 0px;
  --shadow-action: rgba(0,15,154,0.65) -1px -1px 4px 0px inset, rgba(119,133,164,0.43) 5px 7px 7px 0px, rgba(0,0,0,0.2) 1px 1px 3px 0px, rgba(255,255,255,0.35) -0.5px -0.5px 1px 0px inset;
  --shadow-glow: rgba(148,172,243,0.4) 20px 20px 24px 0px, rgba(191,229,251,0.4) -3px -3px 4px 0px inset, rgba(19,26,228,0.1) 4px 4px 4px 0px inset;
  --shadow-thumb: rgb(0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px;
  --shadow-soft: rgba(0,0,0,0.05) 0px 15px 15px 0px;
}
```