---
version: alpha
name: Linear
description: A near-black room where every edge is a single hairline of white light.
colors:
  on-surface-variant: "#62666D"
  on-surface: "#F7F8F8"
  surface: "#08090A"
  outline: "rgba(255, 255, 255, 0.08)"
  primary: "#5E6AD2"
  panel: "#0F1011"
  panel-warm: "#161718"
  track: "#18191A"
  ink-secondary: "#8A8F98"
  ink-bright: "#D0D6E0"
  row-rule: "rgba(255, 255, 255, 0.05)"
  table-rule: "#202122"
  panel-edge: "#23252A"
  action: "#E5E5E6"
  acid: "#E4F222"
  vellum: "#B2D5FF"
  code-ink: "#E2E4E7"
  diff-green: "#27A644"
typography:
  display-xl:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: -1.584px
  display-l:
    fontFamily: Inter Variable
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -1.408px
  display-m:
    fontFamily: Inter Variable
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -1.056px
  quote:
    fontFamily: Inter Variable
    fontSize: 32px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.704px
  heading-l:
    fontFamily: Inter Variable
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.92px
    letterSpacing: -0.288px
  heading-m:
    fontFamily: Inter Variable
    fontSize: 20px
    fontWeight: 400
    lineHeight: 26.6px
    letterSpacing: -0.24px
  heading-s:
    fontFamily: Inter Variable
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  lede:
    fontFamily: Inter Variable
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28.8px
    letterSpacing: -0.165px
  body:
    fontFamily: Inter Variable
    fontSize: 15px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.165px
  body-s:
    fontFamily: Inter Variable
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: -0.182px
  label:
    fontFamily: Inter Variable
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.5px
    letterSpacing: -0.13px
  micro:
    fontFamily: Inter Variable
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0em
  nano:
    fontFamily: Inter Variable
    fontSize: 10px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: -0.15px
  code:
    fontFamily: Berkeley Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
rounded:
  buttons-nav-anchors-pills-labels: 9999px
  search-button: 100px
  avatar-preview-button: 999px
  thumbnail-mention-chip-code-inline: 4px
  image-wrapper-skills-button: 5px
  logo-link-story-card-diff-card: 6px
  sidebar-nav-item-quote-card: 8px
  issue-card-comment-card: 9px
  app-panel-agent-panel-frame: 12px
  app-panel: 12px
  pricing-feature-cell: 0px
spacing:
  2xs: 2px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 10px
  xl: 12px
  2xl: 16px
  3xl: 20px
  4xl: 24px
  5xl: 32px
  section: 56px
  section-2: 72px
  section-3: 128px
---
# Linear — Style Reference
> A near-black room where every edge is a single hairline of white light.

**Theme:** dark

Linear paints all four captured pages on one near-black canvas, `#08090A`, lit by greys of text: `#F7F8F8` for headlines, a cool `#8A8F98` for everything explanatory, `#D0D6E0` and `#62666D` between. Two systems share that canvas: the marketing shell — header, display type, pill buttons, pricing table, story grids — runs across home, customers, pricing and Now, while inside the home page a replica of the product UI is built live in the DOM, with denser radii, `#0F1011` panels and a Berkeley Mono syntax palette. The signature move is the border: white at very low opacity does the separating, so surfaces step by luminance and hairline rather than shadow. Inter Variable carries the voice at weight 510, 72px display set on a 72px line height with tracking pulled to −1.584px — the big sizes trust scale, not weight. The radius vocabulary is binary: 9999px pills for anything you click, a tight 4–12px family for anything that holds content.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#08090A` | `--color-canvas` | Ground under `html` and `body` on every page; also the ink inside the invert button. |
| Panel | `#0F1011` | `--color-panel` | Raised fill of the product replica — issue cards, comment cards, agent panel. Marketing sections sit on canvas instead. |
| Panel Warm | `#161718` | `--color-panel-warm` | One step above Panel, for the diff card and chat bubble: when two panels stack and must still read apart. |
| Track | `#18191A` | `--color-track` | Fill of the fully-round tab track. A container colour, not a surface. |
| Ink Primary | `#F7F8F8` | `--color-text` | Headlines, card titles, secondary-button labels. The most-painted colour — the light source. |
| Ink Secondary | `#8A8F98` | `--color-text-secondary` | Nav links, body copy, issue metadata. Explanatory sentences are this grey, not white. |
| Ink Bright | `#D0D6E0` | `--color-text-bright` | Half-step up: pricing rows, customer names, chat text. Promotes a line without going full white. |
| Ink Muted | `#62666D` | `--color-text-muted` | Footer legal links, counters, timestamps. The floor of the text ramp. |
| Hairline | `rgba(255, 255, 255, 0.08)` | `--color-border` | The structural line, on every page — card borders, dividers, the header's bottom edge. |
| Row Rule | `rgba(255, 255, 255, 0.05)` | `--color-border-soft` | The quieter divider: story rows, archive rows. Also the secondary button's fill. |
| Table Rule | `#202122` | `--color-border-table` | Grid of the pricing feature table — where the translucent hairline goes opaque. |
| Panel Edge | `#23252A` | `--color-border-panel` | Nav divider, footer rule, code section, and the inset ring on product panels. |
| Action | `#E5E5E6` | `--color-action` | Fill and border of the invert button — Sign up, Get started. Its rarity makes it the action. |
| Indigo | `#5E6AD2` | `--color-accent` | The accent, and it is tiny: agent send button, active billing toggle. Never a background or heading. |
| Acid | `#E4F222` | `--color-acid` | Editorial only — the yellow quote card and one customer thumbnail. Never a CTA. |
| Vellum | `#B2D5FF` | `--color-vellum` | Pale quote card; its sibling paints `#DFD1FF`. Both carry the 32px quote in `#08090A`. |
| Code Ink | `#E2E4E7` | `--color-code` | Berkeley Mono plain text in the code and diff panels; the syntax hues sit against it. |
| Diff Green | `#27A644` | `--color-added` | Added-line marker, paired with `#F34E52` for removed. Status only, at 12–14px, never a fill behind text. |

## Tokens — Typography

### Inter Variable — the entire voice, display through micro-label; weight 510 is the house weight and does the work of a semibold · `--font-sans`
- **Substitute:** Inter, SF Pro Text, ui-sans-serif
- **Weights:** 300, 400, 500, 510, 590
- **Sizes:** 10, 12, 13, 14, 15, 16, 18, 20, 24, 32, 48, 64, 72px
- **Line height:** 1.0 at display (72px/72px, 64px/64px, 48px/48px) up to 1.6 at 15px/24px
- **Letter spacing:** negative and proportional — −1.584px at 72px, −1.056px at 48px, −0.704px at 32px, −0.288px at 24px, −0.182px at 14px, −0.13px at 13px. Nav links and 12px micro-labels reset to `normal`.
- **Role:** Everything the marketing shell says and everything the product replica labels — headings, body, buttons, nav, pricing rows, footer.

### Berkeley Mono — the technical register: code, diffs, and the small uppercase captions · `--font-mono`
- **Substitute:** Berkeley Mono, JetBrains Mono, ui-monospace
- **Weights:** 400
- **Sizes:** 14px measured; the uppercase eyebrow and date captions read as this face in the tiles, size `not measured`
- **Line height:** 24px at 14px (1.71) — deliberately open for diff reading
- **Letter spacing:** `normal`
- **Role:** Source lines, syntax tokens and diff gutters in the code panel; the "FIG 0.1" captions and changelog dates in the marketing shell.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display XL | 72px | 72px | −1.584px | `--text-display-xl` |
| Display L | 64px | 64px | −1.408px | `--text-display-l` |
| Display M | 48px | 48px | −1.056px | `--text-display-m` |
| Quote | 32px | 36px | −0.704px | `--text-quote` |
| Heading L | 24px | 31.92px | −0.288px | `--text-heading-l` |
| Heading M | 20px | 26.6px | −0.24px | `--text-heading-m` |
| Heading S | 16px | 28px | normal | `--text-heading-s` |
| Lede | 18px | 28.8px | −0.165px | `--text-lede` |
| Body | 15px | 24px | −0.165px | `--text-body` |
| Body S | 14px | 21px | −0.182px | `--text-body-s` |
| Label | 13px | 19.5px | −0.13px | `--text-label` |
| Micro | 12px | 14–16.8px | normal | `--text-micro` |
| Nano | 10px | 14px | −0.15px | `--text-nano` |
| Code | 14px | 24px | normal | `--text-code` |

## Tokens — Spacing & Shapes

**Base unit:** 2px, stepping in 2s to 12 then in 4s and 8s   **Density:** compact in the product replica, comfortable in the marketing shell

### 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 | 20px | `--spacing-3xl` |
| 4xl | 24px | `--spacing-4xl` |
| 5xl | 32px | `--spacing-5xl` |
| Section (footer) | 56px | `--spacing-footer` |
| Section (page) | 72px | `--spacing-section` |
| Section (feature) | 128px | `--spacing-feature` |

### Border Radius

| Element | Value |
|---------|-------|
| Buttons, nav anchors, pills, labels | 9999px |
| Search button | 100px |
| Avatar, preview button | 999px |
| Avatar image, label dot | 50% |
| Thumbnail, mention chip, code inline | 4px |
| Image wrapper, skills button | 5px |
| Logo link, story card, diff card | 6px |
| Sidebar nav item, quote card | 8px |
| Issue card, comment card | 9px |
| App panel, agent panel, frame | 12px |
| App panel (top only) | 12px 12px 0px 0px |
| Pricing feature cell | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Secondary control ring | `rgba(255,255,255,0.03) 0 0 0 1px inset, rgba(255,255,255,0.04) 0 1px 0 0 inset, rgba(0,0,0,0.6) 0 0 0 1px, rgba(0,0,0,0.1) 0 4px 4px 0` | `--shadow-control` |
| Invert control stack | `rgba(0,0,0,0) 0 8px 2px 0, rgba(0,0,0,0.01) 0 5px 2px 0, rgba(0,0,0,0.04) 0 3px 2px 0, rgba(0,0,0,0.07) 0 1px 1px 0, rgba(0,0,0,0.08) 0 0 1px 0` | `--shadow-invert` |
| Card outline | `rgba(0,0,0,0.2) 0 0 0 1px` | `--shadow-card` |
| Panel inset ring | `rgb(35,37,42) 0 0 0 1px inset` | `--shadow-panel-ring` |
| Avatar hairline | `rgba(255,255,255,0.08) 0 0 0 0.5px inset` | `--shadow-avatar` |
| Pill ring | `rgba(255,255,255,0.05) 0 0 0 1px inset` | `--shadow-pill` |
| Floating panel | `rgba(0,0,0,0.25) 0 2px 32px 0` | `--shadow-float` |
| Toggle thumb | `rgba(0,0,0,0.2) 0 4px 24px 0` | `--shadow-thumb` |

### Layout
- **Page max-width:** `not measured` — the tiles show a centred column with wide empty gutters, the home page's product replicas running wider than the text column.
- **Section gap:** 72px on the main element of every page; 128px on the home feature sections; 96px and 64px on customers; 57px on the pricing body; 56px inside the footer.
- **Card padding:** 8px 12px (issue card), 12px 16px (comment card), 11px 11px (diff card), 14px 32px (pricing feature cell), 24px 32px (customer quote card).
- **Element gap:** 8px by a long way, then 6px, 4px and 16px, with 32px between header blocks and 24px between grid cards.

## Components

### Primary Button — Invert
**Role:** The one filled call to action — Sign up in the header, Get started at the bottom of a page.
`.S36ykG_root.S36ykG_variant-invert.S36ykG_size-large`: `#E5E5E6` fill with a matching `1px #E5E5E6` border, `#08090A` label at 16px/510, padding `0px 20px`, radius `9999px`. The small variant drops to 13px/510 and `0px 12px`; the medium keeps 13px/510 at `0px 14px`. Its shadow is five near-invisible black layers — `rgba(0,0,0,0) 0 8px 2px 0` through `rgba(0,0,0,0.08) 0 0 1px 0` — printing the silhouette rather than lifting it.

### Secondary Button
**Role:** The paired, quieter action — Contact sales beside Get started, Load more at the end of a feed.
`.S36ykG_root.S36ykG_variant-secondary.S36ykG_size-large` fills `rgba(255,255,255,0.05)`, sets `#F7F8F8` at 16px/510 in `0px 20px` of padding at radius `9999px`, and carries no border. The edge is entirely shadow: `rgba(255,255,255,0.03) 0 0 0 1px inset` and `rgba(255,255,255,0.04) 0 1px 0 0 inset` for the lit top, `rgba(0,0,0,0.6) 0 0 0 1px` for the dark outer ring, `rgba(0,0,0,0.1) 0 4px 4px 0` beneath. The medium size is 13px/510 at `0px 14px`.

### Global Nav Bar
**Role:** The persistent header — wordmark left, seven text links centre-right, Log in and Sign up at the end.
`.TZTsQG_header.TZTsQG_header` is a glass bar: a vertical gradient from `rgba(11,11,11,0.8)` to `rgba(11,11,11,0.76)` over a `rgba(255,255,255,0.08)` hairline, no shadow, no radius. Its anchors come in two rows of identical geometry — `.TZTsQG_anchor.I_mUeq_root` for the plain link, `.TZTsQG_anchor.TZTsQG_trigger.hCgVwa_reset-button` for the menu trigger — both transparent, ink `#8A8F98`, 13px/400 on 19.5px with tracking reset to `normal`, padding `0px 12px`, radius `9999px`, no border. The radius is there so a hover fill lands as a pill; at rest an anchor is text. Items sit on an 8px gap inside `.TZTsQG_list` and `.TZTsQG_buttons`; `.TZTsQG_navDivider.hide-tablet` is a solid `#23252A` rule.

### Issue Card
**Role:** A single work item in the product replica's board and list views.
`._5k-xcq_card.qM9FAa_issue`: `#0F1011` fill, `1px rgba(255,255,255,0.08)` border, radius `9px`, padding `8px 12px`, no shadow. It also paints a flat `rgba(255,255,255,0.02)` → `rgba(255,255,255,0.02)` gradient: a one-stop gradient used as tint, not ramp. Inner rows sit on 4px and 8px gaps; the identifier runs 13px/400 `#8A8F98`, the title 14px/400.

### Status Pill and Label Dot
**Role:** Priority, status and label metadata on an issue — Bug, Design, AI, Performance.
`._5k-xcq_label` is a span with no fill, padding `0px 6px`, radius `9999px`, `1px rgba(255,255,255,0.08)` border; `._5k-xcq_priority` takes the same border and radius with zero padding for the icon-only case. Colour arrives through `._5k-xcq_labelDot`, a 50%-radius dot painting `#4EA7FC`, `#EB5757` or `#DCFFFF`; `.bVIB3G_labelButton` sets 12px/510 `#8A8F98` at `4px 6px`. The pill stays outlined and grey; the dot carries the semantic payload.

### Floating Agent Panel
**Role:** The overlay window in which an agent works — prompt at the top, worked-for log, then the diff summary.
`.GkoSzG_panel`: `#0F1011` fill, radius `12px`, `1px rgba(255,255,255,0.12)` border — the heaviest hairline in the pages, a step up from the standard 0.08 — and a `rgba(0,0,0,0.25) 0px 2px 32px 0px` drop shadow: it earns the blur because it floats above the app replica behind it. Its header rule is `rgba(0,0,0,0.4) 0px 1px 0px 0px`; the send button group takes the `#5E6AD2` fill with a `rgba(94,106,210,0.4) 0 0 0 3px` focus halo.

### Code Diff Panel
**Role:** The side-by-side source view showing what an agent changed.
`.MwJdiW_panel._8fVXdW_diffPanel` sets `rgb(35,37,42) 0 0 0 1px inset, rgba(8,9,10,0.8) 0 0 32px 0` — opaque inner edge plus dark vignette; `._8fVXdW_codeColumn` splits the sides with `rgb(35,37,42) 1px 0 0 0 inset`, `._8fVXdW_codeSection` takes a `#23252A` border. Type is Berkeley Mono 14px/400 on 24px, ink `#E2E4E7`, syntax in `#F79CE0` keywords, `#F7BF8B` variables, `#FFDF9F` strings, `#83DCDC` entities, `#8FA6FF` constants. Changed spans wash `rgba(0,255,5,0.1)` and `rgba(255,0,0,0.12)`; whole lines take `rgba(39,166,68,0.07)` and `rgba(243,78,82,0.1)` behind `#27A644` and `#F34E52` markers.

### Pricing Feature Cell
**Role:** One cell of the plan comparison table — a feature name, or a tick under a tier.
`.PDOlRq_featureCell` is the most-repeated bordered element in the capture: no fill, `1px #202122` border, radius `0px`, padding `14px 32px`, no shadow, 16px/400 on a 24px line. Row labels run 13px/400 `#D0D6E0`, section headings 24px/510 `#F7F8F8`. Keep the 32px horizontal padding: it stops the grid reading as a spreadsheet.

### Billing Toggle
**Role:** The monthly/yearly switch inside a pricing tier column.
`.WWyNGG_container.WWyNGG_active` fills `#5E6AD2` — one of three painted appearances of the indigo in the capture — and `.WWyNGG_thumb.WWyNGG_active` rides on `rgba(0,0,0,0.2) 0px 4px 24px 0px`, the softest shadow measured. The tier name above it is 24px/590 `#F7F8F8` (`.sc-KOGVz.cllszI`), the price the same size, each included feature a 13px/400 `#D0D6E0` row.

### Customer Quote Card
**Role:** A pull-quote panel from a named customer, sitting in a pair at the foot of the home page.
`.Dc5tqa_customerCard.Dc5tqa_secondary.I_mUeq_root` fills `#E4F222` at radius `8px`, padding `24px 32px`, 16px/400; the primary variant `.Dc5tqa_customerCard.Dc5tqa_primary.I_mUeq_root` fills `#B2D5FF` and `#DFD1FF` with a `rgba(255,255,255,0.4)` inner wash. The quote is 32px/400 on 36px at −0.704px in `#08090A` — the inversion that makes these cards the loudest thing on a near-black page. The author block is separated by `rgba(8,9,10,0.05)`.

### Editorial Card Grid
**Role:** The three-across story grid on the customers page and the post grid on Now.
On customers, `.KYifKG_row.I_mUeq_root` divides rows with `1px rgba(255,255,255,0.05)` at radius `0px`, and `.zHhpsW_thumbnail` is a `4px`-radius tile painting a customer's own brand colour — `#E4F222`, `#FFFFFF`, `#004EFF`, `#4E50F5`, `#000000` — with the wordmark in `#FFFFFF` over it. On Now, `.RTm11a_card.I_mUeq_root` takes radius `6px` with no border, `.RTm11a_imageWrapper` radius `5px`, and archive rows the same `rgba(255,255,255,0.05)` rule. Titles 20px/510 `#F7F8F8`, bylines 13px/400, cards gapped 24px and unfilled.

### Footer Directory
**Role:** The five-column site index that closes every page, plus the legal row beneath it.
`.Jmh1Wq_inner` sets 56px of vertical padding under a `#23252A` rule carried by the `footer` on all four pages. Column headings are `.Jmh1Wq_sectionTitle`, 13px/510 on 19.5px at −0.13px in `#F7F8F8`; links drop to `#8A8F98` at the same size, weight 400. The legal row `.Jmh1Wq_legalLink.I_mUeq_root` goes quieter at 13px/400 `#62666D` on a 20px gap. No fill, no card, no column borders — alignment and the ink ramp hold it together.

## Do's and Don'ts

### Do
- Separate surfaces with `rgba(255,255,255,0.08)` hairlines and a luminance step from `#08090A` to `#0F1011`. That pairing is the elevation system.
- Set display type at 510 with line height equal to font size — 72px on 72px, 64px on 64px, 48px on 48px — and let −1.584px to −1.056px tracking close it up.
- Reserve `#E5E5E6` for the invert button; its rarity is why it reads as the action.
- Use the four-layer inset/outset ring on every secondary control. The machined edge is the brand more than any colour is.
- Keep explanatory copy at `#8A8F98` — the ink of the 15px `.QI8oKG_description` lede — and promote to `#F7F8F8` only what must be read first.
- Put every interactive pill on `9999px` and every content container on 4–12px. The two vocabularies should not blur.

### Don't
- Don't reach for a drop shadow. Only two blurred shadows are painted — `rgba(0,0,0,0.25) 0 2px 32px` on `.GkoSzG_panel`, `rgba(0,0,0,0.2) 0 4px 24px` on `.WWyNGG_thumb.WWyNGG_active`; everything else that looks raised is a 1px ring.
- Don't promote `#5E6AD2` to a brand colour. Its painted carriers are the agent send button and the active billing toggle — a state, not an identity.
- Don't put `#E4F222`, `#B2D5FF` or `#DFD1FF` behind a CTA. Their carriers are the quote cards and one customer thumbnail: editorial credit.
- Don't soften the pricing table. `.PDOlRq_featureCell` is square-cornered with an opaque `#202122` rule while the rest of the system is round and translucent, and that contrast is intentional.
- Don't add a bold. Inter Variable's painted weights top out at 590, and the heading census puts 590 only on small type — the 24px tier names, the 20px issue title, the 16px "Activity" label.
- Don't fill an editorial card: `.RTm11a_card.I_mUeq_root` and `.KYifKG_row.I_mUeq_root` both paint `fill none`, so the image and a hairline are the card.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#08090A` | Page ground on `html` and `body`, all four pages. |
| 1 | Frame | `#090A0B` | Outer frame around the embedded product replica (`.WS84WW_frame`). |
| 2 | Frame Background | `#101112` | Inner plate of that frame (`.WS84WW_frameBackground`). |
| 3 | Panel | `#0F1011` | Cards, comment cards, agent panel — the working surface. |
| 4 | Panel Warm | `#161718` | Diff card and chat bubble, one step above Panel. |
| 5 | Track | `#18191A` | Fully-round track pill. |

## Elevation

Depth is luminance plus a ring, not blur. The ladder from `#08090A` to `#18191A` spans sixteen units of lightness across six levels, so a card reads as raised with no shadow — `._5k-xcq_card.qM9FAa_issue` paints `shadow none`. Rings are inset hairlines: `rgba(255,255,255,0.05) 0 0 0 1px inset` on pill buttons, `rgba(255,255,255,0.08) 0 0 0 0.5px inset` on `.NN4GVa_avatar`, `rgb(35,37,42) 0 0 0 1px inset` on the app panels, `rgba(0,0,0,0.2) 0 0 0 1px` outlining comment cards. Lightness first, ring second, blur almost never.

## Imagery

Three modes, all monochrome or near it. The home page runs line-art isometric illustrations — stacked planes, cubes, a fanned ledger — in barely-lighter-than-canvas strokes captioned with mono "FIG" labels; engineering diagrams, not marketing art. Customers alternates desaturated black-and-white documentary photography with flat tiles in each customer's brand colour, wordmark reversed to `#FFFFFF`. Now uses generative technical graphics — dot matrices, curve fans, plotted grids — in the same register. No stock photography, no 3D render. The product screenshots are live DOM, so the type stays crisp at any size.

## Layout

Full-bleed canvas, contained content. Every page is one centred column with wide dark gutters; the header spans full width, the footer's five columns align to the same inner measure. The home page alternates a two-up text row — 64px or 48px section title left, 24px `#D0D6E0` description and a "Learn more →" link right — with a wide product replica beneath, on 128px of section padding. Customers and Now are three-across grids on a 24px gap under a text tab row. Pricing is four tier columns above a full-width comparison table on 57px of body padding. Main padding is 72px vertically everywhere; the footer closes on 56px.

## Typography Voice

Two modes, cleanly split. In display mode Inter Variable at 510 runs line height equal to font size and tracking near −0.022em, so a two-line 72px headline sets as a solid block with no gap between lines. In utility mode the same family drops to 400 at 13–15px with line heights of 1.5–1.6 and tracking near −0.011em, opening the text back up. The tie is proportional tracking: −1.584px at 72px, −0.13px at 13px, `normal` by the nav links and 12px micro-labels, where negative tracking would cost legibility. Berkeley Mono is the third register, kept for code and date stamps.

## Agent Prompt Guide

## Quick Color Reference
- background: `#08090A`
- text: `#F7F8F8`
- surface: `#0F1011`
- border: `rgba(255, 255, 255, 0.08)`
- accent: `#5E6AD2`
- primary action: `#E5E5E6`

## Example Component Prompts
1. **Primary Button**: Pill, radius 9999px, fill `#E5E5E6`, 1px `#E5E5E6` border, label `#08090A` at 16px Inter 510, padding `0px 20px`, box-shadow `rgba(0,0,0,0) 0 8px 2px 0, rgba(0,0,0,0.01) 0 5px 2px 0, rgba(0,0,0,0.04) 0 3px 2px 0, rgba(0,0,0,0.07) 0 1px 1px 0, rgba(0,0,0,0.08) 0 0 1px 0`. Canvas `#08090A`.
2. **Secondary Button**: Pill, radius 9999px, fill `rgba(255,255,255,0.05)`, no border, label `#F7F8F8` at 16px Inter 510, padding `0px 20px`, box-shadow `rgba(255,255,255,0.03) 0 0 0 1px inset, rgba(255,255,255,0.04) 0 1px 0 0 inset, rgba(0,0,0,0.6) 0 0 0 1px, rgba(0,0,0,0.1) 0 4px 4px 0`.
3. **Issue Card**: 9px radius, fill `#0F1011`, border `1px rgba(255,255,255,0.08)`, no shadow, padding `8px 12px`. Inside: identifier 13px/19.5px Inter 400 `#8A8F98`, title 14px/21px Inter 400 `#F7F8F8`, a row of 9999px outlined pills with `1px rgba(255,255,255,0.08)` borders, `0px 6px` padding and a 50%-radius `#4EA7FC` dot. Rows gapped 8px.
4. **Sticky Header**: Full-width bar, linear-gradient `rgba(11,11,11,0.8)` → `rgba(11,11,11,0.76)`, bottom border `1px rgba(255,255,255,0.08)`, no radius, no shadow. Anchors 13px/19.5px Inter 400 `#8A8F98`, letter-spacing normal, padding `0px 12px`, radius 9999px, gapped 8px, with a `1px #23252A` divider before the account buttons.
5. **Pricing Comparison Table**: Square cells, radius 0, no fill, `1px #202122` border on every cell, padding `14px 32px`, 16px/24px Inter 400. Feature labels `#D0D6E0` at 13px/19.5px, column headings 24px/31.92px Inter 590 `#F7F8F8` at −0.288px. Canvas `#08090A`.

## Similar Brands
- **Vercel** — the same near-black canvas, tight geometric sans, and a near-white pill as the single filled element.
- **Raycast** — a marketing site built from live product chrome, with translucent white hairlines standing in for shadows.
- **Stripe** — proportional negative tracking across a wide type scale, and an accent used as state rather than decoration.
- **Framer** — dark-canvas surfaces separated by luminance step, editorial colour cards used only as punctuation.
- **Rive** — technical line-art in near-canvas strokes, captioned in mono, doing the work photography usually does.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #08090A;
  --color-frame: #090A0B;
  --color-frame-bg: #101112;
  --color-panel: #0F1011;
  --color-panel-warm: #161718;
  --color-track: #18191A;
  --color-text: #F7F8F8;
  --color-text-secondary: #8A8F98;
  --color-text-bright: #D0D6E0;
  --color-text-muted: #62666D;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-soft: rgba(255, 255, 255, 0.05);
  --color-border-faint: rgba(255, 255, 255, 0.02);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-border-table: #202122;
  --color-border-panel: #23252A;
  --color-divider: #2E2E32;
  --color-action: #E5E5E6;
  --color-accent: #5E6AD2;
  --color-mention: #6D78D5;
  --color-acid: #E4F222;
  --color-vellum: #B2D5FF;
  --color-lilac: #DFD1FF;
  --color-code: #E2E4E7;
  --color-code-keyword: #F79CE0;
  --color-code-variable: #F7BF8B;
  --color-code-string: #FFDF9F;
  --color-code-entity: #83DCDC;
  --color-code-constant: #8FA6FF;
  --color-added: #27A644;
  --color-removed: #F34E52;
  --color-dot-blue: #4EA7FC;
  --color-dot-red: #EB5757;
  --color-header-top: rgba(11, 11, 11, 0.8);
  --color-header-bottom: rgba(11, 11, 11, 0.76);

  /* Typography — Families */
  --font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Berkeley Mono', ui-monospace, SFMono-Regular, monospace;

  /* Typography — Scale */
  --text-display-xl: 72px;   --leading-display-xl: 72px;   --tracking-display-xl: -1.584px;
  --text-display-l: 64px;    --leading-display-l: 64px;    --tracking-display-l: -1.408px;
  --text-display-m: 48px;    --leading-display-m: 48px;    --tracking-display-m: -1.056px;
  --text-quote: 32px;        --leading-quote: 36px;        --tracking-quote: -0.704px;
  --text-heading-l: 24px;    --leading-heading-l: 31.92px; --tracking-heading-l: -0.288px;
  --text-heading-m: 20px;    --leading-heading-m: 26.6px;  --tracking-heading-m: -0.24px;
  --text-heading-s: 16px;    --leading-heading-s: 28px;    --tracking-heading-s: normal;
  --text-lede: 18px;         --leading-lede: 28.8px;       --tracking-lede: -0.165px;
  --text-body: 15px;         --leading-body: 24px;         --tracking-body: -0.165px;
  --text-body-s: 14px;       --leading-body-s: 21px;       --tracking-body-s: -0.182px;
  --text-label: 13px;        --leading-label: 19.5px;      --tracking-label: -0.13px;
  --text-micro: 12px;        --leading-micro: 16px;        --tracking-micro: normal;
  --text-nano: 10px;         --leading-nano: 14px;         --tracking-nano: -0.15px;
  --text-code: 14px;         --leading-code: 24px;         --tracking-code: normal;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-house: 510;
  --weight-strong: 590;

  /* Spacing */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 12px;
  --spacing-2xl: 16px;
  --spacing-3xl: 20px;
  --spacing-4xl: 24px;
  --spacing-5xl: 32px;
  --spacing-footer: 56px;
  --spacing-section: 72px;
  --spacing-feature: 128px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-card: 9px;
  --radius-panel: 12px;
  --radius-panel-top: 12px 12px 0px 0px;
  --radius-circle: 50%;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-control: rgba(255,255,255,0.03) 0 0 0 1px inset, rgba(255,255,255,0.04) 0 1px 0 0 inset, rgba(0,0,0,0.6) 0 0 0 1px, rgba(0,0,0,0.1) 0 4px 4px 0;
  --shadow-invert: rgba(0,0,0,0) 0 8px 2px 0, rgba(0,0,0,0.01) 0 5px 2px 0, rgba(0,0,0,0.04) 0 3px 2px 0, rgba(0,0,0,0.07) 0 1px 1px 0, rgba(0,0,0,0.08) 0 0 1px 0;
  --shadow-card: rgba(0,0,0,0.2) 0 0 0 1px;
  --shadow-panel-ring: rgb(35,37,42) 0 0 0 1px inset;
  --shadow-avatar: rgba(255,255,255,0.08) 0 0 0 0.5px inset;
  --shadow-pill: rgba(255,255,255,0.05) 0 0 0 1px inset;
  --shadow-float: rgba(0,0,0,0.25) 0 2px 32px 0;
  --shadow-thumb: rgba(0,0,0,0.2) 0 4px 24px 0;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #08090A;
  --color-frame: #090A0B;
  --color-frame-bg: #101112;
  --color-panel: #0F1011;
  --color-panel-warm: #161718;
  --color-track: #18191A;
  --color-text: #F7F8F8;
  --color-text-secondary: #8A8F98;
  --color-text-bright: #D0D6E0;
  --color-text-muted: #62666D;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-soft: rgba(255, 255, 255, 0.05);
  --color-border-faint: rgba(255, 255, 255, 0.02);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-border-table: #202122;
  --color-border-panel: #23252A;
  --color-divider: #2E2E32;
  --color-action: #E5E5E6;
  --color-accent: #5E6AD2;
  --color-mention: #6D78D5;
  --color-acid: #E4F222;
  --color-vellum: #B2D5FF;
  --color-lilac: #DFD1FF;
  --color-code: #E2E4E7;
  --color-code-keyword: #F79CE0;
  --color-code-variable: #F7BF8B;
  --color-code-string: #FFDF9F;
  --color-code-entity: #83DCDC;
  --color-code-constant: #8FA6FF;
  --color-added: #27A644;
  --color-removed: #F34E52;
  --color-dot-blue: #4EA7FC;
  --color-dot-red: #EB5757;
  --color-header-top: rgba(11, 11, 11, 0.8);
  --color-header-bottom: rgba(11, 11, 11, 0.76);

  --font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Berkeley Mono', ui-monospace, SFMono-Regular, monospace;

  --text-display-xl: 72px;
  --text-display-xl--line-height: 72px;
  --text-display-xl--letter-spacing: -1.584px;
  --text-display-l: 64px;
  --text-display-l--line-height: 64px;
  --text-display-l--letter-spacing: -1.408px;
  --text-display-m: 48px;
  --text-display-m--line-height: 48px;
  --text-display-m--letter-spacing: -1.056px;
  --text-quote: 32px;
  --text-quote--line-height: 36px;
  --text-quote--letter-spacing: -0.704px;
  --text-heading-l: 24px;
  --text-heading-l--line-height: 31.92px;
  --text-heading-l--letter-spacing: -0.288px;
  --text-heading-m: 20px;
  --text-heading-m--line-height: 26.6px;
  --text-heading-m--letter-spacing: -0.24px;
  --text-heading-s: 16px;
  --text-heading-s--line-height: 28px;
  --text-lede: 18px;
  --text-lede--line-height: 28.8px;
  --text-lede--letter-spacing: -0.165px;
  --text-body: 15px;
  --text-body--line-height: 24px;
  --text-body--letter-spacing: -0.165px;
  --text-body-s: 14px;
  --text-body-s--line-height: 21px;
  --text-body-s--letter-spacing: -0.182px;
  --text-label: 13px;
  --text-label--line-height: 19.5px;
  --text-label--letter-spacing: -0.13px;
  --text-micro: 12px;
  --text-micro--line-height: 16px;
  --text-nano: 10px;
  --text-nano--line-height: 14px;
  --text-nano--letter-spacing: -0.15px;
  --text-code: 14px;
  --text-code--line-height: 24px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-house: 510;
  --font-weight-strong: 590;

  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 12px;
  --spacing-2xl: 16px;
  --spacing-3xl: 20px;
  --spacing-4xl: 24px;
  --spacing-5xl: 32px;
  --spacing-footer: 56px;
  --spacing-section: 72px;
  --spacing-feature: 128px;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-card: 9px;
  --radius-panel: 12px;
  --radius-circle: 50%;
  --radius-pill: 9999px;

  --shadow-control: rgba(255,255,255,0.03) 0 0 0 1px inset, rgba(255,255,255,0.04) 0 1px 0 0 inset, rgba(0,0,0,0.6) 0 0 0 1px, rgba(0,0,0,0.1) 0 4px 4px 0;
  --shadow-invert: rgba(0,0,0,0) 0 8px 2px 0, rgba(0,0,0,0.01) 0 5px 2px 0, rgba(0,0,0,0.04) 0 3px 2px 0, rgba(0,0,0,0.07) 0 1px 1px 0, rgba(0,0,0,0.08) 0 0 1px 0;
  --shadow-card: rgba(0,0,0,0.2) 0 0 0 1px;
  --shadow-panel-ring: rgb(35,37,42) 0 0 0 1px inset;
  --shadow-avatar: rgba(255,255,255,0.08) 0 0 0 0.5px inset;
  --shadow-pill: rgba(255,255,255,0.05) 0 0 0 1px inset;
  --shadow-float: rgba(0,0,0,0.25) 0 2px 32px 0;
  --shadow-thumb: rgba(0,0,0,0.2) 0 4px 24px 0;
}
```