---
version: alpha
name: Subframe
description: "Near-white calm, one serif indulgence, and a product that shows its own parts."
colors:
  on-surface-variant: "#A3A3A3"
  on-surface: "#171717"
  surface: "#FCFCFC"
  error: "#FEE2E2"
  primary: "#2563EB"
  wash: "#FAFAFA"
  surface-2: "#F5F5F5"
  panel: "#FFFFFF"
  pill-grey: "#F0F0F0"
  hairline: "#E5E5E5"
  ink-default: "rgba(0, 0, 0, 0.86)"
  subtext: "rgba(0, 0, 0, 0.55)"
  muted-text: "#737373"
  deep-panel: "#242424"
  blue-tint: "#DBEAFE"
  blue-ink: "#1E40AF"
  green-tint: "#DCFCE7"
  amber-tint: "#FEF9C3"
typography:
  display-1:
    fontFamily: Inter
    fontSize: 96px
    fontWeight: 400
    lineHeight: 96px
    letterSpacing: -4.8px
  display-serif:
    fontFamily: Inter
    fontSize: 128px
    fontWeight: 400
    lineHeight: 128px
    letterSpacing: -3.2px
  display-2:
    fontFamily: Inter
    fontSize: 80px
    fontWeight: 400
    lineHeight: 80px
    letterSpacing: -2px
  heading-2:
    fontFamily: Inter
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -3.2px
  heading-3:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 400
    lineHeight: 54px
    letterSpacing: -2.4px
  heading-4:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 400
    lineHeight: 62px
    letterSpacing: -2.24px
  page-title:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -1.28px
  title:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -1.2px
  section:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  body-large:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.45px
  body:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  body-small:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.13px
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  micro:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 400
    lineHeight: 10px
    letterSpacing: 0em
rounded:
  product-control-badge-card: 4px
  sidebar-row-compact-dark-button: 6px
  preview-tile-product-panel: 8px
  template-tile-calendar-day-cell: 12px
  marketing-pill-button-nav-row: 16px
  marketing-card-hero-panel: 24px
  progress-track-scrollbar-rail: 2px
  avatar-dot-pill-chip: 9999px
spacing:
  2xs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px
  7xl: 192px
---
# Subframe — Style Reference
> Near-white calm, one serif indulgence, and a product that shows its own parts.

**Theme:** light

Subframe paints two systems on one near-white ground, and they divide at the doorway. The marketing pages — the home page and the blog — are greyscale: a #FCFCFC canvas, #171717 ink, Inter at weight 700 stretched to 96px with −4.8px of tracking, and a dark #242424 pill doing the persuading. The library and templates pages hand the page over to the product's own design system, where labels shrink to 12px and 14px, structure becomes a 1px #E5E5E5 hairline, the 16px pill flattens to a 4px corner, and #2563EB arrives as the working blue with a family of tinted status badges behind it. Instrument Serif carries the serif voice — pricing numerals and a single word at 128px — and it is where warmth enters a palette otherwise built from grey. The rhythm is generous on the marketing side, sections breathing at 128px and 192px inside a 1024px column, and dense on the product side, where 8px is the default gap and a preview tile is a flat 368px square.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#FCFCFC` | `--color-canvas` | Body fill on every page and the theme's ground; a card that needs to lift goes to `#FFFFFF` instead. |
| Wash | `#FAFAFA` | `--color-wash` | Footer band and stacked column fills — a half-step down, used to close a page, not to open one. |
| Surface | `#F5F5F5` | `--color-surface` | Muted chip, shortcut-key and quiet-button fill, and its own border, so the shape reads as a mass, not an outline. |
| Panel | `#FFFFFF` | `--color-panel` | Cards, popovers, table shells, outline buttons. Brighter than the canvas: elevation here is luminance, not shadow. |
| Pill Grey | `#F0F0F0` | `--color-pill` | The soft rounded row fill — sidebar active state, template-tile skeleton. |
| Hairline | `#E5E5E5` | `--color-border` | The structural 1px line: table rows, outline buttons, panel edges. Carried as a border far more than as a fill. |
| Ink | `#171717` | `--color-ink` | Display and heading ink, plus the compact dark product button's fill — 774 text observations against 3 fills, so a fill in this value is the exception. |
| Ink Default | `rgba(0, 0, 0, 0.86)` | `--color-ink-default` | The inherited body ink across all four pages. Translucent, so it settles onto whatever surface it lands on. |
| Subtext | `rgba(0, 0, 0, 0.55)` | `--color-subtext` | Secondary product ink: tree rows, preview captions, group labels. |
| Secondary Text | `#A3A3A3` | `--color-text-secondary` | The marketing subhead grey — 48px sub-lines and 18px nav links, a deliberately low-contrast second voice. |
| Muted Text | `#737373` | `--color-text-muted` | Product helper text and table headers at 12px and 14px. |
| Deep Panel | `#242424` | `--color-deep` | The inverted hero panel and the marketing pill CTA — the dark mass in a light system, and its rarity is the signal. |
| Blue | `#2563EB` | `--color-primary` | The product's action colour: filled buttons, the selected calendar day, chart marks. No census row paints it on the marketing pages. |
| Blue Tint | `#DBEAFE` | `--color-primary-tint` | Avatar discs and informational badge fills, inked `#1E40AF`; also the top stop of the system's one gradient. |
| Blue Ink | `#1E40AF` | `--color-primary-ink` | Badge and avatar-initial ink on `#DBEAFE` — 116 observations, all of them text. |
| Green Tint | `#DCFCE7` | `--color-success-tint` | Positive status badge fill, inked `#166534`. |
| Amber Tint | `#FEF9C3` | `--color-warning-tint` | Caution status badge fill, inked `#854D0E`. |
| Red Tint | `#FEE2E2` | `--color-danger-tint` | Destructive status badge fill, inked `#991B1B`. |

## Tokens — Typography

### Inter — the whole system: 96px display headlines down to 10px avatar initials, and every label in between · `--font-sans`
- **Substitute:** Inter Variable, SF Pro Text, system-ui
- **Weights:** 400, 500, 600, 700
- **Sizes:** 10px, 12px, 13px, 14px, 16px, 18px, 20px, 24px, 28px, 32px, 48px, 56px, 64px, 96px
- **Line height:** 1.0 at display sizes (96px/96px, 64px/64px) up to 1.43 in the body (14px/20px)
- **Letter spacing:** −0.05em from 96px down to 24px; −0.025em at 18px; −0.01em at 13px and 14px; `normal` on most 12px and 14px product labels
- **Role:** Inter does the display work at 700 and the interface work at 400–600; hierarchy leans on size and tracking far more than on weight.

### Instrument Serif — the serif interlude: a 128px word on the home page and the 80px pricing numerals · `--font-serif`
- **Substitute:** Instrument Serif Variable, Spectral, Georgia
- **Weights:** 400
- **Sizes:** 80px, 128px
- **Line height:** 1.0 at both sizes (128px/128px, 80px/80px)
- **Letter spacing:** −0.025em at both sizes — half the tracking the sans takes at display scale
- **Role:** The serif voice — "Design," at 128px and the "$0" / "$29" numerals at 80px, which are the settings the census measures.

### Fragment Mono — technical face named by the inventory · `--font-mono`
- **Substitute:** IBM Plex Mono, JetBrains Mono, ui-monospace
- **Weights:** 400
- **Sizes:** `not measured`
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** The census names the family and its single weight but measures no text row on it; treat it as the metadata face at the caption sizes the sans uses.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display 1 (Inter 700) | 96px | 96px | −4.8px | `--text-display-1` |
| Display Serif (Instrument Serif 400) | 128px | 128px | −3.2px | `--text-display-serif` |
| Display 2 (Instrument Serif 400) | 80px | 80px | −2px | `--text-display-2` |
| Heading 2 (Inter 700) | 64px | 64px | −3.2px | `--text-heading-2` |
| Heading 3 (Inter 500) | 48px | 54px | −2.4px | `--text-heading-3` |
| Heading 4 (Inter 600) | 56px | 62px | −2.24px | `--text-heading-4` |
| Page Title (Inter 500) | 32px | 36px | −1.28px | `--text-title-page` |
| Title (Inter 700) | 24px | 28px | −1.2px | `--text-title` |
| Section (Inter 600) | 20px | 24px | normal | `--text-section` |
| Body Large (Inter 500) | 18px | 24px | −0.45px | `--text-body-large` |
| Body (Inter 400/500) | 14px | 20px | normal | `--text-body` |
| Body Small (Inter 500) | 13px | 20px | −0.13px | `--text-body-small` |
| Caption (Inter 400/500) | 12px | 16px | normal | `--text-caption` |
| Micro (Inter 500) | 10px | 10px | normal | `--text-micro` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable on the marketing pages, compact in the product surfaces

### Spacing Scale

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

### Border Radius

| Element | Value |
|---------|-------|
| Product control, badge, card | 4px |
| Sidebar row, compact dark button | 6px |
| Preview tile, product panel | 8px |
| Template tile, calendar day cell | 12px |
| Marketing pill button, nav row | 16px |
| Marketing card, hero panel | 24px |
| Progress track, scrollbar rail | 2px |
| Avatar, dot, pill chip | 9999px |
| Chart dot | 100% |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Card | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-card` |
| Raised | `rgba(0, 0, 0, 0.08) 0px 4px 16px -2px, rgba(0, 0, 0, 0.08) 0px 2px 4px -1px` | `--shadow-raised` |
| Overlay | `rgba(0, 0, 0, 0.08) 0px 12px 32px -4px, rgba(0, 0, 0, 0.08) 0px 4px 8px -2px` | `--shadow-overlay` |
| Floating pill | `rgba(0, 0, 0, 0.04) 0px 2px 12px 2px, rgba(0, 0, 0, 0.04) 0px 1px 4px 0px` | `--shadow-floating` |
| CTA bevel (inset) | `rgba(255, 255, 255, 0.25) 0px 4px 4px -2px inset, rgba(0, 0, 0, 0.25) 0px -4px 4px -2px inset, rgba(255, 255, 255, 0.1) -2px 0px 2px -2px inset, rgba(255, 255, 255, 0.1) -2px 0px 2px -2px inset` | `--shadow-cta-bevel` |

### Layout
- **Page max-width:** 1024px — `.flex.w-full.max-w-[1024px].flex-col` and `.flex.w-full.max-w-[1024px].items-center`, all four pages
- **Section gap:** 64px; section vertical padding runs 48px, 96px, 128px, and 192px on the home page's carousel wrapper
- **Card padding:** 16px and 24px square in the product boxes; 48px top / 80px side on the widest white band
- **Element gap:** 8px default; 4px for tight label stacks, 16px and 24px for card interiors, 48px for logo rows
- **Gutter:** 48px horizontal inset on every page, matching `--page-padding: 48px`; the templates page steps its bands in to 80px

## Components

### Dark Pill CTA
**Role:** The marketing call to action — "Start for free", "Start building" — the control that asks for a decision.
`.flex.h-11.cursor-pointer`, the `group/3b777358` pill: fill `#242424`, 12px/500 computed type, padding `0px 16px`, radius 16px, no border, and the four-layer inset bevel — a white 25% highlight down the top, a black 25% shade up the bottom, two white 10% edge licks. That bevel models a lit surface rather than a cast shadow, and it is what makes an otherwise flat page feel like it has a button. The label span is painted `#FFFFFF` at the 18px/500/24px/−0.45px style the nav's "Log in" uses. Height comes from the class; vertical padding is zero.

### Ghost Pill Button
**Role:** The secondary action beside the dark pill — "Watch demo", "View docs" — present without competing.
`.flex.cursor-pointer.items-center`, the ghost variant of the same `group/3b777358` pill: fill `rgba(0, 0, 0, 0.06)`, 12px/500, padding `0px 20px`, radius 16px, no border. Its box-shadow is a fully transparent three-layer stack — `rgba(0, 0, 0, 0) 0px 0px 0px 0px` three times — an invisible slot so a hover state can fade elevation in without a layout shift. Note the asymmetry with the dark pill: 20px of side padding against 16px, so the pair balances optically rather than metrically.

### Compact Dark Button
**Role:** The product's inverted action, sitting where the marketing pages would put the pill.
`.flex.h-8.cursor-pointer`, the product's `group/3b777358`: fill `#171717`, 12px/500, padding `0px 12px`, radius 6px, no border, no shadow. Same family name as the marketing pill, a completely different posture: the radius drops from 16px to 6px, the bevel disappears, the side padding tightens by a quarter.

### Blue Primary Button
**Role:** The filled action inside the product's component library and templates.
`.sc-3fdd167a-0.iyzmNF.reset_reset__7T5z_.sc-6300f89-2`: fill `#2563EB`, 12px/500, padding `0px 12px`, radius 4px, no border, no shadow. Flat colour, flat corner, no elevation — the blue does the work alone. Two padding siblings share the fill: `.sc-3fdd167a-0.hihwih.reset_reset__7T5z_.sc-6300f89-2` at `0px 16px` and `.sc-3fdd167a-0.gJvBuC.reset_reset__7T5z_.sc-6300f89-2` at `0px 0px` for the icon-only case. Across the three, padding is the only variable — all hold the 4px corner.

### Neutral Outline Button
**Role:** The default product button — "Cancel", "Share", most toolbar actions.
`.sc-3fdd167a-0.hPupml.reset_reset__7T5z_.sc-6300f89-2`: fill `#FFFFFF`, 12px/500, padding `0px 12px`, radius 4px, border `1px #E5E5E5`, no shadow, box 20–59 × 9–13px. A white fill on a `#FCFCFC` canvas is a one-step luminance lift and the hairline does the rest — no shadow is spent on a button here. Its 8px-padding sibling `.sc-3fdd167a-0.dhHbC.reset_reset__7T5z_.sc-6300f89-2` carries "Share" at 13–40px wide, same border and radius.

### Status Badge
**Role:** The tinted label classifying a row — a department, a state, a delta.
`.sc-3fdd167a-0.iMnreW.reset_reset__7T5z_.sc-6300f89-2`, the informational variant: fill `#DBEAFE`, border `1px #DBEAFE`, padding `0px 8px`, radius 4px, no shadow, box 16–36 × 9–10px, holding "Engineering". Border matches fill exactly, so the badge reads as a solid block while keeping a border-box the size of its outlined neighbours. The family repeats that geometry at `.dHAYTm` in `#DCFCE7`, `.bUZnzS` in `#FEF9C3`, `.jTbVCj` in `#F5F5F5` and `.kEuNwC` in `#DBEAFE`, with ink stepping to `#166534`, `#854D0E`, `#404040`, `#1E40AF`. Badge text is 12px/400/16px.

### Elevated Card
**Role:** The product card that sits above the page rather than beside it.
`.sc-3fdd167a-0.jmMdLB.reset_reset__7T5z_`: fill `#FFFFFF`, padding `16px 16px`, radius 4px, border `1px #E5E5E5`, shadow `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`. Its borderless twin `.sc-3fdd167a-0.erbXtc.reset_reset__7T5z_` takes identical fill, padding, radius and shadow with no border — those two are the vocabulary for "raised". A 1px/2px shadow at 5% black is a seam, not a lift; the border does the separating.

### Component Preview Tile
**Role:** The square stage each library component is demonstrated on.
`.component-preview-tile_root__RRqgP.cursor-pointer.w-full.aspect-`: fill `rgba(0, 0, 0, 0.04)`, padding `16px 16px`, radius 8px, no border, no shadow, 368 × 368px. A 4% black fill is barely distinguishable from the canvas, which is the point: the component inside is the content. Its caption sits outside the tile in `.components-page_previewLabel__4vz0j`: 14px/500/20px, −0.14px tracking, `rgba(0, 0, 0, 0.55)`.

### Template Preview Tile
**Role:** The gallery thumbnail showing a whole page design at square crop.
`.flex.flex-1.aspect-square.rounded-lg`: radius 12px, no fill, no border, no shadow, 432 × 432px. Its loading state `.page-preview-tile_loading__xcCDs` takes fill `#F0F0F0` at radius 8px on the same box, so the skeleton is four pixels squarer than the thing it stands in for. Inside, `.w-full.h-full.fake-browser_root__xlunw.sf-group` frames the screenshot at radius 8px with `.fake-browser_content__GweJ6` painting `#FFFFFF` at radius 0px: a chrome-less browser that lets the design be the image.

### Sidebar Nav Item
**Role:** The left-rail row walking the component and theme lists.
`.flex.h-7.cursor-pointer`, the `group/a7f6fa75` row, at rest: no fill, padding `4px 12px`, radius 6px, no border, no shadow, box 49–96 × 28px, holding "Theme". The active variant is the same class with fill `#F0F0F0` at box 83–97 × 28px. Selection is a fill change and nothing else — no bar, no border, no weight shift — which is why the rail stays quiet under a long list.

### Calendar Day Cell
**Role:** A single date in the calendar component, and the clearest demonstration of how selection is marked.
`.flex.h-8.w-8.cursor-pointer`: a 32 × 32px button, no fill, ink `#A3A3A3`, 14px/400/20px at −0.14px, radius 12px, no border, no shadow, carrying "30". The selected variant is the same class and box with fill `#2563EB` and ink `#FFFFFF`, carrying "13". A 12px radius on a 32px square is a squircle, not a circle — the cell stays rectangular in the grid while still reading as a token.

### Data Table Row
**Role:** The repeating row of the table components — a person, a department, a value.
`.sc-812598cc-0.ldUvyW.reset_reset__7T5z_.sc-6300f89-2`: a `tr` with no fill, radius 0px, border `1px #E5E5E5`, no shadow, box 237–369 × 19–20px, holding "John Walton john.walton@example.com Engineering". Zero radius is the point — dropping the 4px corner lets rows stack into a continuous ruled field instead of a strip of tiles. Header cells are 12px/500/16px in `#737373`; body cells run 14px in `#171717`.

## Do's and Don'ts

### Do
- Keep the marketing pages greyscale and let `#242424` carry the dark mass; the pill CTA earns its weight by being the filled shape on a page of outlines.
- Set display type at 700 with −0.05em tracking and leading equal to the font size — 96px/96px, 64px/64px. The type locks up as a block, which is why it can sit alone on a near-empty canvas.
- Pair every tinted badge fill with its darker ink from the same hue: `#DBEAFE`/`#1E40AF`, `#DCFCE7`/`#166534`, `#FEF9C3`/`#854D0E`, `#FEE2E2`/`#991B1B`.
- Build structure from the 1px `#E5E5E5` hairline first, and add `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` when a panel needs to float, the way `.jmMdLB` and `.erbXtc` do.
- Hold the 1024px column and the 48px gutter, and let marketing sections breathe at 96px and 128px of vertical padding.
- Use `#2563EB` for the product's actions and keep it out of the marketing pages, where no census row paints it.

### Don't
- Don't mix the two radius languages in one view: 16px and 24px belong to the marketing pages, 4px and 6px to the product surfaces.
- Don't give a product button a shadow — the outline (`.hPupml`), blue (`.iyzmNF`), tint (`.dIvexz`) and muted (`.jEKkyx`) control rows all measure `shadow none`.
- Don't outline a tinted badge in a colour other than its fill; `.iMnreW`, `.dHAYTm`, `.bUZnzS` and `.jTbVCj` each set border and fill to the same value.
- Don't set Instrument Serif below display scale — the census measures it on "Design," at 128px and on "$0" and "$29" at 80px, and at no smaller size.
- Don't let the secondary marketing voice go darker than `#A3A3A3` — the low-contrast 48px sub-line under a black headline is the home page's tonal idea.
- Don't add a radius to table rows; `.ldUvyW` paints 0px and the ruled field depends on it.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FCFCFC` | Body fill on every page — the theme's ground |
| −1 | Surface | `#F5F5F5` | Recessed chips, shortcut keys, muted buttons; a step *below* the canvas |
| −1 | Wash | `#FAFAFA` | Footer band and closing sections |
| 1 | Pill Grey | `#F0F0F0` | Soft rounded rows: sidebar active state, tile skeletons |
| 2 | Panel | `#FFFFFF` | Cards, popovers, table shells, outline buttons |
| 3 | Deep Panel | `#242424` | Inverted hero panel, marketing pill CTA |

## Elevation

Elevation is carried by luminance and a hairline, with shadow as a seam rather than a lift. The ladder is not monotonic: `#F5F5F5` sits *below* the `#FCFCFC` canvas for recessed chips while `#FFFFFF` sits above it for cards, so depth reads in both directions from the ground. The structural line is the 1px `#E5E5E5` border, which lands on far more elements as a border than as a fill. Above it, three registers do the lifting — `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` for a card, `rgba(0, 0, 0, 0.08) 0px 4px 16px -2px, rgba(0, 0, 0, 0.08) 0px 2px 4px -1px` for a raised panel, `rgba(0, 0, 0, 0.08) 0px 12px 32px -4px, rgba(0, 0, 0, 0.08) 0px 4px 8px -2px` for an overlay — and none exceeds 8% black. The outlier is the marketing CTA's inset bevel, and it should stay a one-off.

## Imagery

Three registers, all synthetic. The home page opens on photoreal 3D renders in near-white plastic and black glass — a floating segmented toolbar, a keycap-shaped module with a UI on its face — lit softly against a grey wash with no hard shadow. Behind the product cards sit heavily blurred photographic textures in warm oranges, sages and blues, cropped so no subject is legible: colour fields, not pictures, keeping a monochrome page from going cold. The templates page swaps them for saturated mesh gradients inside the fake browser frames. A monochrome logo row runs at reduced contrast under the hero, and the human faces in the capture are avatar thumbnails a few pixels across. No illustration, no glyph larger than an interface icon — the product's own UI is the imagery.

## Layout

Contained, centred, single-column on the marketing pages: 1024px maximum width, 48px gutter, matching the declared `--page-padding`. Sections stack with 64px of gap and vertical padding stepping 48px → 96px → 128px, reaching 192px around the home page's design carousel. The navigation is a centred pill of links on a soft grey row, wordmark pinned left, the "Log in" / "Start for free" pair pinned right; it holds position across every tile of every page, so it is sticky. The blog is the same column with a `#242424` hero panel at 24px radius, then a flat list of posts — category label, 24px/700 title, avatar, author, date — no cards, no dividers.

The product pages abandon the column. The library runs a fixed left rail against a four-up grid of 368px preview tiles, each captioned below, its content area inset 280px and 200px from the left to clear the rail. The templates page is a four-up grid of 432px squares under a search field and a row of filter pills, bands inset 80px rather than 48px. Both open with a dark panel at 24px radius carrying white display type — the visual handshake between the two systems.

## Typography Voice

Two modes, and tracking separates them. In display mode Inter runs at 700 with −0.05em of tracking and leading exactly equal to the font size: "Ship what you design." at 96px/96px, "Drag & drop meets code." at 64px/64px, "Real design control." at 24px/28px. Leading of 1.0 at that scale makes a two-line headline behave like a single graphic mass, and the negative tracking closes the counters so the block stays optically solid on a near-empty canvas. Under it the secondary voice drops to 48px at weight 500 in `#A3A3A3` with 54px leading — same tracking ratio, half the contrast — and that pairing does the hierarchy work without a rule, a colour or a badge.

In interface mode the same family runs 12–14px at 400–500 with `normal` tracking and 16–20px leading, and the discipline inverts: where display type is pulled tight, labels are left alone. The 13px/500 row at −0.13px is the bridge. Instrument Serif is the exception — weight 400, −0.025em, half the display sans's tracking, at 128px and at 80px for the pricing numerals, where a serif figure signals "price" faster than a label could.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FCFCFC`
- text: `#171717`
- surface: `#F5F5F5`
- border: `#E5E5E5`
- accent: `#2563EB`
- primary action: `#242424` on the marketing pages, `#2563EB` in the product surfaces

## Example Component Prompts
1. **Dark Pill CTA**: Button, fill `#242424`, radius 16px, padding `0 16px`, 44px tall, no border; label `#FFFFFF` at 18px/500/24px, −0.45px tracking; inset bevel `rgba(255,255,255,0.25) 0 4px 4px -2px inset, rgba(0,0,0,0.25) 0 -4px 4px -2px inset, rgba(255,255,255,0.1) -2px 0 2px -2px inset`.
2. **Status Badge Set**: Five badges sharing padding `0 8px`, radius 4px, 1px border equal to the fill: `#DBEAFE`/`#1E40AF`, `#DCFCE7`/`#166534`, `#FEF9C3`/`#854D0E`, `#FEE2E2`/`#991B1B`, `#F5F5F5`/`#404040`. Text 12px/400/16px.
3. **Elevated Card**: Fill `#FFFFFF`, padding 16px, radius 4px, border `1px #E5E5E5`, shadow `rgba(0,0,0,0.05) 0 1px 2px 0`. Title 16px/600/20px in `#171717`, body 14px/400/20px in `#737373`, 8px gap.
4. **Component Preview Grid**: Four-column grid of 368 × 368px tiles, fill `rgba(0,0,0,0.04)`, radius 8px, padding 16px, no border, no shadow; caption below each tile at 14px/500/20px, −0.14px tracking, `rgba(0,0,0,0.55)`. Grid gap 16px on `#FCFCFC`.
5. **Marketing Hero**: Centred 1024px column on `#FCFCFC`, 128px vertical padding, 48px gutter. Headline Inter 700 at 96px/96px, −4.8px tracking, `#171717`; sub-line Inter 500 at 48px/54px, −2.4px tracking, `#A3A3A3`; below, a 16px gap between a `#242424` pill and a `rgba(0,0,0,0.06)` pill at padding `0 20px`.

## Similar Brands
- **Linear** — a near-monochrome ramp with one working accent and structure carried by hairlines rather than shadow.
- **Vercel** — the same near-white canvas, black-pill CTA, and willingness to let one display headline hold an empty viewport.
- **Raycast** — treats its own product UI as the marketing imagery, with tinted status chips and small-radius controls.
- **Framer** — pairs oversized weight-700 display type with soft grey washes and photoreal 3D renders in the hero slot.
- **Radix Themes** — the same documentation primitives: flat 4px controls, a hairline neutral border, a blue-tint badge family for state.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FCFCFC;
  --color-wash: #FAFAFA;
  --color-surface: #F5F5F5;
  --color-panel: #FFFFFF;
  --color-pill: #F0F0F0;
  --color-border: #E5E5E5;
  --color-ink: #171717;
  --color-ink-default: rgba(0, 0, 0, 0.86);
  --color-subtext: rgba(0, 0, 0, 0.55);
  --color-text-secondary: #A3A3A3;
  --color-text-muted: #737373;
  --color-deep: #242424;
  --color-ghost-fill: rgba(0, 0, 0, 0.06);
  --color-primary: #2563EB;
  --color-primary-tint: #DBEAFE;
  --color-primary-wash: #EFF6FF;
  --color-primary-ink: #1E40AF;
  --color-success-tint: #DCFCE7;
  --color-success-ink: #166534;
  --color-warning-tint: #FEF9C3;
  --color-warning-ink: #854D0E;
  --color-danger-tint: #FEE2E2;
  --color-danger-ink: #991B1B;

  /* Typography — Families */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'Fragment Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-display-serif: 128px;   --leading-display-serif: 128px;
  --text-display-1: 96px;        --leading-display-1: 96px;
  --text-display-2: 80px;        --leading-display-2: 80px;
  --text-heading-2: 64px;        --leading-heading-2: 64px;
  --text-heading-4: 56px;        --leading-heading-4: 62px;
  --text-heading-3: 48px;        --leading-heading-3: 54px;
  --text-title-page: 32px;       --leading-title-page: 36px;
  --text-title: 24px;            --leading-title: 28px;
  --text-section: 20px;          --leading-section: 24px;
  --text-body-large: 18px;       --leading-body-large: 24px;
  --text-body: 14px;             --leading-body: 20px;
  --text-body-small: 13px;       --leading-body-small: 20px;
  --text-caption: 12px;          --leading-caption: 16px;
  --text-micro: 10px;            --leading-micro: 10px;

  /* Spacing */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 96px;
  --spacing-6xl: 128px;
  --spacing-7xl: 192px;
  --page-padding: 48px;

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

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-raised: rgba(0, 0, 0, 0.08) 0px 4px 16px -2px, rgba(0, 0, 0, 0.08) 0px 2px 4px -1px;
  --shadow-overlay: rgba(0, 0, 0, 0.08) 0px 12px 32px -4px, rgba(0, 0, 0, 0.08) 0px 4px 8px -2px;
  --shadow-floating: rgba(0, 0, 0, 0.04) 0px 2px 12px 2px, rgba(0, 0, 0, 0.04) 0px 1px 4px 0px;
  --shadow-cta-bevel: rgba(255, 255, 255, 0.25) 0px 4px 4px -2px inset, rgba(0, 0, 0, 0.25) 0px -4px 4px -2px inset, rgba(255, 255, 255, 0.1) -2px 0px 2px -2px inset, rgba(255, 255, 255, 0.1) -2px 0px 2px -2px inset;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FCFCFC;
  --color-wash: #FAFAFA;
  --color-surface: #F5F5F5;
  --color-panel: #FFFFFF;
  --color-pill: #F0F0F0;
  --color-border: #E5E5E5;
  --color-ink: #171717;
  --color-ink-default: rgba(0, 0, 0, 0.86);
  --color-subtext: rgba(0, 0, 0, 0.55);
  --color-text-secondary: #A3A3A3;
  --color-text-muted: #737373;
  --color-deep: #242424;
  --color-ghost-fill: rgba(0, 0, 0, 0.06);
  --color-primary: #2563EB;
  --color-primary-tint: #DBEAFE;
  --color-primary-wash: #EFF6FF;
  --color-primary-ink: #1E40AF;
  --color-success-tint: #DCFCE7;
  --color-success-ink: #166534;
  --color-warning-tint: #FEF9C3;
  --color-warning-ink: #854D0E;
  --color-danger-tint: #FEE2E2;
  --color-danger-ink: #991B1B;

  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'Fragment Mono', ui-monospace, monospace;

  --text-display-serif: 128px;
  --text-display-serif--line-height: 128px;
  --text-display-1: 96px;
  --text-display-1--line-height: 96px;
  --text-display-2: 80px;
  --text-display-2--line-height: 80px;
  --text-heading-2: 64px;
  --text-heading-2--line-height: 64px;
  --text-heading-4: 56px;
  --text-heading-4--line-height: 62px;
  --text-heading-3: 48px;
  --text-heading-3--line-height: 54px;
  --text-title-page: 32px;
  --text-title-page--line-height: 36px;
  --text-title: 24px;
  --text-title--line-height: 28px;
  --text-section: 20px;
  --text-section--line-height: 24px;
  --text-body-large: 18px;
  --text-body-large--line-height: 24px;
  --text-body: 14px;
  --text-body--line-height: 20px;
  --text-body-small: 13px;
  --text-body-small--line-height: 20px;
  --text-caption: 12px;
  --text-caption--line-height: 16px;
  --text-micro: 10px;
  --text-micro--line-height: 10px;

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

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

  --shadow-card: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-raised: rgba(0, 0, 0, 0.08) 0px 4px 16px -2px, rgba(0, 0, 0, 0.08) 0px 2px 4px -1px;
  --shadow-overlay: rgba(0, 0, 0, 0.08) 0px 12px 32px -4px, rgba(0, 0, 0, 0.08) 0px 4px 8px -2px;
  --shadow-floating: rgba(0, 0, 0, 0.04) 0px 2px 12px 2px, rgba(0, 0, 0, 0.04) 0px 1px 4px 0px;
}
```