---
version: alpha
name: Dia
description: "A scream on black, then paper-grey calm and a serif that leans in."
colors:
  on-surface: "#000000"
  surface: "#F8F8F8"
  secondary: "rgba(0, 0, 0, 0.6)"
  tertiary: "rgba(0, 0, 0, 0.45)"
  primary: "#FFDC5C"
  hero-void: "#020204"
  true-white: "#FFFFFF"
  primary-ink: "rgba(0, 0, 0, 0.85)"
  nav-ink: "rgba(0, 0, 0, 0.42)"
  fill-tertiary: "rgba(0, 0, 0, 0.04)"
  fill-secondary: "rgba(0, 0, 0, 0.08)"
  stroke-light: "rgba(0, 0, 0, 0.06)"
  chip-grey: "rgba(235, 235, 235, 0.7)"
  research-indigo: "#5863EA"
  toggle-lime: "#F2FCB3"
  better-day-gradient: "#000000"
  aurora-wash: "#B1BDFF"
typography:
  numeral:
    fontFamily: ABC Favorit Mono
    fontSize: 11px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0em
  counter:
    fontFamily: Exposure VAR
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  caption-nav:
    fontFamily: ABC Favorit Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 17px
    letterSpacing: 1.3px
  body:
    fontFamily: Exposure VAR
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  lead:
    fontFamily: Exposure VAR
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: -0.36px
  card-eyebrow:
    fontFamily: Exposure VAR
    fontSize: 24px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: -0.72px
  section-head:
    fontFamily: Exposure VAR
    fontSize: 36px
    fontWeight: 400
    lineHeight: 44px
    letterSpacing: -1.8px
  document-head:
    fontFamily: Exposure VAR
    fontSize: 36px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -1.44px
  display:
    fontFamily: Exposure VAR
    fontSize: 48px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -2.4px
  document-display:
    fontFamily: Exposure VAR
    fontSize: 54px
    fontWeight: 400
    lineHeight: 60px
    letterSpacing: -2.16px
  page-title:
    fontFamily: Exposure VAR
    fontSize: 72px
    fontWeight: 400
    lineHeight: 82px
    letterSpacing: -3.6px
  page-title-2:
    fontFamily: Exposure VAR
    fontSize: 72px
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: -2.88px
  masthead:
    fontFamily: Exposure VAR
    fontSize: 81px
    fontWeight: 400
    lineHeight: 113px
    letterSpacing: -3.24px
  hero-letters:
    fontFamily: Exposure VAR
    fontSize: 112px
    fontWeight: 400
    lineHeight: 95.2px
    letterSpacing: -3.36px
rounded:
  dot-play-disc-floating-control: 9999px
  pill-chip-ghost-link: 20px
  card: 12px
  panel-nav-bar-faq-trigger: 16px
  media-frame: 24px
  postcard-inline-image: 10px
  card-media-cap: 12px
  cta-button: 14px
  large-callout-card: 28px
  small-link-tile: 8px
  sticky-banner: 0px
spacing:
  list-gap: 10px
  control-gap: 14px
  chip-padding-nav-gap: 16px
  grid-gutter: 20px
  card-row-gap: 24px
  button-padding: 24px
  column-gap: 40px
  callout-padding: 44px
  nav-gap: 80px
  section-rhythm: 200px
---
# Dia — Style Reference
> A scream on black, then paper-grey calm and a serif that leans in.

**Theme:** light

Dia paints on one near-white canvas, `#F8F8F8`, and spends almost no chroma on it: the palette is black at graded opacities, and what colour survives is a lime-and-amber status dot, an indigo link ink, a sunset gradient saved for the closing headline. The captured pages run two systems — the marketing pages (the home page, the Reports launch, the weekly release note) set their display type in the Exposure serif, while the security document is set end to end in ABC Oracle and carries an indigo link the marketing pages have no use for; the split falls where the site stops selling and starts explaining. The home page opens on a full-height near-black band with a screaming face on it, then hands the site back to grey paper. Type carries the hierarchy: Exposure at 650 tracked roughly −0.05em, ABC Oracle at 300 for the document voice, a 13px mono tracked open for the labels between. Geometry is short — a 20px pill, a 12px card, a 14px button, 9999px for controls — and elevation is low-opacity black blurred wide over 1px hairlines.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#F8F8F8` | `--color-background` | The body fill on every captured page; the site's own `--background`. |
| Hero Void | `#020204` | `--color-hero-void` | The full-height opening band (`.relative.isolate.flex.min-h-[100svh]`) — one held frame, not a mode. |
| True White | `#FFFFFF` | `--color-true-white` | Pills, cards, the download button face; a step above the canvas. |
| Ink Black | `#000000` | `--color-black` | The closing CTA fill and nav link ink — button scale, not paragraph scale. |
| Primary Ink | `rgba(0, 0, 0, 0.85)` | `--color-primary` | Headings and emphatic copy; `--primary` at 85%, softer than the CTA fill. |
| Secondary Ink | `rgba(0, 0, 0, 0.6)` | `--color-secondary` | Body prose, card copy, list items — the reading ink. |
| Tertiary Ink | `rgba(0, 0, 0, 0.45)` | `--color-tertiary` | Step-list titles waiting their turn: a heading's resting state. |
| Nav Ink | `rgba(0, 0, 0, 0.42)` | `--color-primary-50` | Footer directory and secondary nav — furniture, not content. |
| Fill Tertiary | `rgba(0, 0, 0, 0.04)` | `--color-fill-tertiary` | The feature-card plane — a 4% ink wash rather than a grey hex. |
| Fill Secondary | `rgba(0, 0, 0, 0.08)` | `--color-fill-secondary` | The secondary button fill on the release-note index, and the nav pill's hairline. |
| Stroke Light | `rgba(0, 0, 0, 0.06)` | `--color-stroke-light` | The card and chip hairline — structure as a 1px edge. |
| Chip Grey | `rgba(235, 235, 235, 0.7)` | `--color-chip` | The toggle pill fill (`.h-35.rounded-20.leading-35.px-16`), translucent over the canvas. |
| Research Indigo | `#5863EA` | `--color-link` | Link ink on the security document — text in all eight of its observations, a fill in none. |
| Toggle Lime | `#F2FCB3` | `--color-toggle-lime` | The 12px status dot on a privacy pill, in its more frequent state. |
| Toggle Amber | `#FFDC5C` | `--color-toggle-amber` | The same dot in its other state. |
| Better Day Gradient | `#000000 → #000000 → #C679C4 → #FA3D1D` | `--gradient-better-day` | Painted into `"Ready for a better day?" .inline-flex.pb-1.pr-2.-mr-2` — black, then violet, then ember. |
| Aurora Wash | `#B1BDFF → rgba(177, 215, 255, 0.85)` | `--gradient-aurora` | The band under the weekly issue, on `.absolute.inset-0` layers; `#FEB085` warms its twin. |

## Tokens — Typography

### Exposure VAR — the marketing display serif, carried by `"Dia reads between the tabs" .h2--exposure.max-w-[20ch].mx-auto.text-balance` and its siblings, mostly at 650 · `--font-display`
- **Substitute:** Instrument Serif, Playfair Display, Georgia
- **Weights:** 400, 450, 600, 650, 700
- **Sizes:** 24px, 25px, 36px, 48px, 50px, 56px, 72px
- **Line height:** 30px at 24px through 82px at 72px — tightening from 1.25 to 1.14
- **Letter spacing:** −0.72px at 24px, −1.8px at 36px, −2.4px at 48px, −2.8px at 56px, −3.6px at 72px — a flat −0.05em
- **Role:** The marketing voice: set large and tracked tight, so a headline reads as one object.

### Exposure Variable — the two oversized wordmark moments, the hero letters and the weekly masthead · `--font-variable`
- **Substitute:** Instrument Serif, Newsreader, Georgia
- **Weights:** 300, 400
- **Sizes:** 81px, 112px
- **Line height:** 95.2px at 112px (0.85); 113px at 81px (1.40)
- **Letter spacing:** −3.36px at 112px, −3.24px at 81px
- **Role:** Logotype-scale type — hero letters at 300 in white on the void, masthead at 400 in primary ink.

### ABC Oracle — the workhorse sans: body copy, UI labels, and the whole security document including its headings · `--font-sans`
- **Substitute:** Inter, Söhne, ui-sans-serif
- **Weights:** 300, 350, 400, 500, 700
- **Sizes:** 16px, 18px, 34px, 36px, 54px, 72px
- **Line height:** 20px and 24px at 16px, 27px at 18px, 36px at 36px, 60px at 54px, 72px at 72px
- **Letter spacing:** normal below 18px; −0.36px at 18px, −0.68px at 34px, −1.44px at 36px, −2.16px at 54px, −2.88px at 72px
- **Role:** Everything the serif does not do. At 300 it is the document voice; at 400/16px the reading ink.

### ABC Favorit Mono — the structural label: nav links, footer headers, step numerals · `--font-mono`
- **Substitute:** ABC Diatype Mono, IBM Plex Mono, ui-monospace
- **Weights:** 400
- **Sizes:** 11px, 13px
- **Line height:** 14px at 11px; 16px and 17px at 13px
- **Letter spacing:** +1.3px at 13px (+0.1em) — tracked open where the display faces track tight; normal at 11px
- **Role:** Wayfinding and metadata: uppercase, wide, quiet under the serif.

### ABC Oracle Triple — the interface-mimicking face inside privacy toggles and feature-card chips · `--font-triple`
- **Substitute:** ABC Diatype Mono, Berkeley Mono, ui-monospace
- **Weights:** 400
- **Sizes:** 12px, 16px, 81px
- **Line height:** 17px at 12px; 20px, 33px and 35px at 16px; 113px at 81px
- **Letter spacing:** normal at 12px and 16px; −3.24px at 81px
- **Role:** It makes a marketing pill look like a product control — a 35px line height inside a 35px pill centres the label without padding.

### Quadrant Text Mono — the release-note data face: counters, versions, timestamps · `--font-quadrant`
- **Substitute:** Söhne Mono, JetBrains Mono, ui-monospace
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** 17px and 18px
- **Letter spacing:** normal
- **Role:** Tabular digits, so numbers do not shift width as they tick.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Numeral (mono) | 11px | 14px | normal | `--text-11` |
| Counter (Quadrant) | 12px | 18px | normal | `--text-12` |
| Caption / nav (mono) | 13px | 16–17px | 1.3px | `--text-13` |
| Body | 16px | 24px | normal | `--text-16` |
| Lead | 18px | 27px | −0.36px | `--text-18` |
| Card eyebrow (Exposure) | 24px | 30px | −0.72px | `--text-24` |
| Section head (Exposure) | 36px | 44px | −1.8px | `--text-36` |
| Document head (Oracle) | 36px | 36px | −1.44px | `--text-36-sans` |
| Display (Exposure) | 48px | 56px | −2.4px | `--text-48` |
| Document display (Oracle) | 54px | 60px | −2.16px | `--text-54` |
| Page title (Exposure) | 72px | 82px | −3.6px | `--text-72` |
| Page title (Oracle) | 72px | 72px | −2.88px | `--text-72-sans` |
| Masthead | 81px | 113px | −3.24px | `--text-81` |
| Hero letters | 112px | 95.2px | −3.36px | `--text-112` |

## Tokens — Spacing & Shapes

**Base unit:** 2px *(inferred — the measured gap ladder runs 10 / 14 / 16 / 20 / 24 / 40 / 80, which no 4px grid explains)*   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| List gap | 10px | `--spacing-10` |
| Control gap | 14px | `--spacing-14` |
| Chip padding / nav gap | 16px | `--spacing-16` |
| Grid gutter | 20px | `--spacing-20` |
| Card row gap | 24px | `--spacing-24` |
| Button padding | 24px / 28px | `--spacing-28` |
| Column gap | 40px | `--spacing-40` |
| Callout padding | 44px | `--spacing-44` |
| Nav gap | 80px | `--spacing-80` |
| Section rhythm | 50 / 60 / 70 / 80 / 100 / 112 / 200px | `--spacing-section` |

### Border Radius

| Element | Value |
|---------|-------|
| Dot, play disc, floating control | 9999px |
| Pill, chip, ghost link | 20px |
| Card | 12px |
| Panel, nav bar, FAQ trigger | 16px |
| Media frame | 24px |
| Postcard, inline image | 10px |
| Card media cap | 12px 12px 0px 0px |
| CTA button | 14px |
| Large callout card | 28px |
| Small link tile | 8px |
| Sticky banner | 0px 0px 12px 12px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Card lift | `rgba(0, 0, 0, 0.06) 0px 4px 32px 0px` | `--shadow-card` |
| Media frame | `rgba(0, 0, 0, 0.08) 0px 4.6px 27.6px 0px, rgba(0, 0, 0, 0.25) 0px 0px 2.3px 0px` | `--shadow-frame` |
| Floating nav | `rgba(0, 0, 0, 0.06) 0px 2px 8px 0px, rgba(0, 0, 0, 0.04) 0px 0px 2px 0px` | `--shadow-nav` |
| On-video control | `rgba(0, 0, 0, 0.6) 0px 8px 30px -8px` | `--shadow-on-media` |
| Glass banner | `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px` | `--shadow-banner` |
| Link tile | `rgba(0, 0, 0, 0.16) 0px 1px 2px 0px` | `--shadow-tile` |
| Postcard | `rgba(0, 0, 0, 0.12) 0px 22px 40px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px` | `--shadow-postcard` |

### Layout
- **Page max-width:** 1440px on the marketing shell (`.my-80.800:my-120.max-w-1440.mx-auto`), 1400px on the weekly issue (`.mb-100.w-full.max-w-1400.mx-auto`), 1040px on the security document (`.w-full.max-w-[1040px].mx-auto.pt-100`)
- **Section gap:** 50–200px of vertical padding, with 80px and 100px the repeated middle
- **Card padding:** 44px on the large callout, 15px sides with a 40px top on the release-note card, 0px 16px on chips
- **Element gap:** 14px between controls, 20px across the 12-column gutter, 10px inside lists, 80px between footer columns

## Components

### Floating Nav Pill
**Role:** The persistent wayfinder — a frosted capsule hovering over whatever the page is doing beneath it.
`.bg-white.backdrop-blur-md.border.border-solid`: fill `#F8F8F8`, padding `0px 6px`, radius 16px, 1px `rgba(0, 0, 0, 0.08)`, shadow `rgba(0, 0, 0, 0.06) 0px 2px 8px 0px, rgba(0, 0, 0, 0.04) 0px 0px 2px 0px`, 16px internal gap, three observations. Links are ABC Oracle 16px/400/20px in `#000000` (`"What's New" .p2.group.relative.transition-opacity`, nine observations). The fill is canvas colour, not white, so the blur does the separating.

### Download Button — White on Void
**Role:** The primary action on the opening frame, and the brightest object on its page.
`.flex.h-56.w-280.items-center`: fill `#FFFFFF`, ink `#000000`, ABC Oracle 20px/500/30px, radius 14px, border none, shadow none, 10px gap — 56px by 280px, a fixed slab rather than a text-hugging control. The wrapper `.pointer-events-auto.inline-flex.rounded-14.focus-visible:outline` repeats the 14px radius, so the focus ring shares the corner. Unshadowed and unbordered at the system's loudest moment, resting on a white-on-`#020204` luminance jump.

### Closing CTA Button
**Role:** The end-of-page repeat of the primary action, restated once the argument is over.
`.h-56.px-28.flex.items-center` measures two ways. On the home page: fill `#000000`, padding `0px 28px`, radius 14px, border none, shadow none, 20px/500/30px. On the Reports page the same class paints fill `#F8F8F8` at identical padding, radius and type, over a darkened photograph where the canvas colour is the bright value — one geometry, two inversions.

### Privacy Toggle Pill
**Role:** Product settings shown as marketing — the page proving control by letting you read the switches.
`.h-35.rounded-20.leading-35.px-16`: fill `rgba(235, 235, 235, 0.7)`, ink `rgba(0, 0, 0, 0.85)`, ABC Oracle Triple 16px/400/35px, padding `0px 16px`, radius 20px, border none and shadow none in all fifty observations, 14px between pills. The state word rides `.bg-true-white.h-20.px-5.leading-20` — fill `#FFFFFF`, radius `0px`, padding `0px 5px`, 16px/400/20px — a square chip inside a rounded one. The dot `.h-12.w-12.rounded-full.transition-colors`, radius 9999px, paints `#F2FCB3` thirty times and `#FFDC5C` twenty.

### Feature Card
**Role:** The grid unit of the product tour — a named capability, a sentence, a screenshot bleeding off the bottom.
`.bg-fill-tertiary.col-span-12.800:col-span-6.rounded-12` and `.bg-fill-tertiary.col-span-12.800:col-span-4.rounded-12`: fill `rgba(0, 0, 0, 0.04)`, radius 12px, 1px `rgba(0, 0, 0, 0.06)`, shadow none, three observations each. Label `.h-35.bg-true-white.px-16.font-triple`: fill `#FFFFFF`, ink `rgba(0, 0, 0, 0.6)`, ABC Oracle Triple 16px/400/33px, padding `0px 16px`, radius 20px, 1px `rgba(0, 0, 0, 0.06)`. Copy is 18px/400/27px at −0.36px in `rgba(0, 0, 0, 0.6)` (`.font-400.text-18.leading-[1.5].text-secondary`). Screenshots sit in `.w-full.overflow-hidden.rounded-t-12.[mask-image:linear-gradient(` at radius `12px 12px 0px 0px` — rounded on top, faded at the bottom.

### Numbered Step Rail
**Role:** A vertical list of claims where one is open at a time, paced against the media beside it.
`.absolute.left-0.top-[16%].bottom-[16%]`, radius 9999px, measures twice: fill none in four observations, fill `rgba(0, 0, 0, 0.85)` in two — resting track and active segment. Numerals are ABC Favorit Mono 11px/400/14px in `rgba(0, 0, 0, 0.2)` (`"02" .block.font-mono.text-11.leading-14`); titles Exposure VAR 24px/650/30px at −0.72px in `rgba(0, 0, 0, 0.45)` (`.block.font-serif.font-650.text-22`); the open step's copy runs `rgba(0, 0, 0, 0.6)` on `.pt-10.text-14.leading-20.text-secondary`, size `not measured`. Opacity is the state.

### Video Chip Button
**Role:** The play affordance laid over full-bleed media, legible against an unpredictable image.
`"Watch the scream" .group.pointer-events-auto.flex.items-center`: fill `rgba(0, 0, 0, 0.65)`, ink `#FFFFFF`, ABC Oracle 16px/500/24px, padding `10px 12px`, radius 9999px, border none, shadow `rgba(0, 0, 0, 0.6) 0px 8px 30px -8px` — the heaviest single-layer shadow measured. Its glyph disc `.flex.h-30.w-30.items-center` is fill `rgba(255, 255, 255, 0.25)` at radius 9999px. It stays readable on a dark photograph because the shadow, not the fill, separates it.

### FAQ Disclosure Row
**Role:** The security document's question list — collapsed answers stacked as one ruled column.
`.group.transition-colors.duration-200.site-ease`: fill none, radius `0px`, 1px `rgba(0, 0, 0, 0.1)`, shadow none, 16px/400/20px, seventeen observations. The trigger is ABC Oracle 16px/400/24px in `rgba(0, 0, 0, 0.85)` on `.pl-24.relative.p2--body.text-left`, whose 24px left padding is the gutter the plus glyph lives in. Sharpest corners here: zero radius, no fill, one hairline.

### Release-Note Link Card
**Role:** A past issue of the weekly, presented as an object you could pick up.
`.flex.flex-col.px-15.pt-15`: fill `#FFFFFF`, padding `40px 15px`, radius 12px, 1px `rgba(0, 0, 0, 0.1)`, shadow `rgba(0, 0, 0, 0.06) 0px 4px 32px 0px` — a 32px blur at 6%, almost weightless. Artwork uses `.w-full.h-auto.object-contain.rounded-10` at radius 10px, smaller than its container, so it reads inset. Metadata is Quadrant Text Mono 12px/400/17px in `rgba(0, 0, 0, 0.85)` (`"Aug 27, '26" .font-quadrant.text-12.leading-17`); the title is Exposure VAR 25px/700/30px, normal tracking (`.mt-12.text-center.font-serif.text-25`).

### Framed Media Panel
**Role:** The container for screenshots and video stills — a soft rectangle that keeps media off the grid.
`.relative.rounded-20.800:rounded-24.overflow-hidden` measures twice at radius 24px. On the home page: no border, no shadow, three observations — the capture floats on the canvas with nothing but its corners. On the Reports page: `rgba(0, 0, 0, 0.08) 0px 4.6px 27.6px 0px, rgba(0, 0, 0, 0.25) 0px 0px 2.3px 0px`, three more — a wide pool plus a 2.3px contact line that keeps the edge crisp.

### Footer Directory
**Role:** The four-column site index closing every page, set entirely in the mono.
`.col-span-12.1000:col-span-10.1000:col-start-2.grid`: 1px `rgba(0, 0, 0, 0.09)`, 80px gap, ABC Favorit Mono 13px/400/16px at +1.3px, four observations across all pages; padding `not measured`. Headers are the `.caption` row — 13px/400/17px at +1.3px in `rgba(0, 0, 0, 0.85)`, sixteen observations. Links drop to `rgba(0, 0, 0, 0.42)` (`"For Work" .transition-colors.duration-200.site-ease.text-primary/50`, seventy-two observations). Uppercase, wide, dim: a printed colophon.

## Do's and Don'ts

### Do
- Set marketing display in Exposure VAR at 650 with −0.05em tracking (`.h2--exposure.max-w-[20ch].mx-auto.text-balance`, 48px/56px).
- Build fills from black at low opacity — `rgba(0, 0, 0, 0.04)` for card planes, `rgba(0, 0, 0, 0.08)` for secondary buttons.
- Keep `#5863EA` for document links: the census records it as text in all eight observations and as a fill in none.
- Label every region with the 13px mono at +1.3px (`.caption`, "Product") — the one positively tracked style.
- Pair a 20px pill with a 12px card, and reserve 9999px for dots and floating controls.
- Let 1px hairlines carry structure — `rgba(0, 0, 0, 0.06)` on cards, `rgba(0, 0, 0, 0.09)` on the footer nav — before reaching for a shadow.

### Don't
- Don't border or shadow the privacy toggle pill: `.h-35.rounded-20.leading-35.px-16` measures "border none · shadow none" in every one of its fifty observations.
- Don't set the security document in the display serif — its headings are ABC Oracle 300, at 72px on `"Security" .h1.leading-[1]` and 34px on `"How to Submit your Research"`.
- Don't tint the primary action. Every control the capture measures paints a neutral fill — `#FFFFFF`, `#000000`, `#EFEFEF`, `#252525` or `rgba(0, 0, 0, 0.08)`.
- Don't stack elevation. The heaviest measured shadow is `rgba(0, 0, 0, 0.12) 0px 22px 40px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px` on the release-note postcard — the outlier.
- Don't paint the declared-but-unpainted brand hues: `--blue`, `--pink`, `--yellow`, `--brown` and `--grey` sit on `:root` *(declared, not painted)* and no census row uses them.
- Don't let chroma exceed a dot: outside the closing gradient and the weekly's wash, colour at size is a 12px circle.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#F8F8F8` | The body fill on all four pages. |
| 1 | Tinted plane | `rgba(0, 0, 0, 0.04)` | Feature cards — a wash darkening the canvas by a hair. |
| 2 | Chip | `rgba(235, 235, 235, 0.7)` | Toggle pills; the plane beneath still reads. |
| 3 | Raised white | `#FFFFFF` | Cards, chips, buttons — top of the light ladder. |
| — | Void | `#020204` | The home page's opening band, outside the ladder. |

## Elevation

Depth is a 1px line plus a wide, faint pool. Four families do the lifting: the card lift `rgba(0, 0, 0, 0.06) 0px 4px 32px 0px` (release-note cards and the 44px-padded callout `.bg-true-white.rounded-24.800:rounded-28.border`), the nav's `rgba(0, 0, 0, 0.06) 0px 2px 8px 0px, rgba(0, 0, 0, 0.04) 0px 0px 2px 0px`, the frame's `rgba(0, 0, 0, 0.08) 0px 4.6px 27.6px 0px, rgba(0, 0, 0, 0.25) 0px 0px 2.3px 0px`, and one on-video `rgba(0, 0, 0, 0.6) 0px 8px 30px -8px`. Each pairs a wide blur with a tiny contact shadow or a hairline: a defined edge and a soft body at once. On a light page the system usually reaches for a border instead — `rgba(0, 0, 0, 0.06)`, `0.08`, `0.09`, `0.1`, in that order of frequency.

## Imagery

Photography carries the emotional argument, screenshots the functional one. The home page opens on a tight portrait of a woman mid-scream on a black seamless, warm skin and hair the only colour in the frame. The Reports page runs a documentary shot of a Brooklyn coffee shop under `rgba(0, 0, 0, 0.3)` and `rgba(0, 0, 0, 0.4)` scrims with white Exposure display over it. Product imagery is the opposite register: real Dia windows, unretouched, in 24px frames, masked to fade at a card's lower edge rather than crop. The weekly adds a third mode — painterly landscapes shown as photographs pinned to a postcard, credited in mono. Icons are almost absent; the recurring marks are the black speech-bubble glyph and the circular Browser Company seal.

## Layout

Everything sits on a 12-column grid with a 20px gutter (`.grid.grid-cols-12.gap-x-20`, `.grid.grid-cols-12.gap-10.800:gap-20`), inset one column at wide viewports (`.col-span-12.1000:col-span-10.1000:col-start-2.grid`). Three max-widths mark the three page types; the reference page is narrowest because it is read in one column. Vertical rhythm runs 50 / 60 / 70 / 80 / 100 / 112 / 200px, the 200px block opening the security page. The nav is a fixed floating pill rather than a bar, so no page has a header band. The marketing composition is asymmetric: a sticky left column of numbered steps against a right column of media scrolling past it, then a two-up card grid, then a centred closing headline over one button. The security document drops all of it for two columns — a link index left, prose right, ruled FAQ rows underneath.

## Typography Voice

The system runs two registers and switches by page, not by element. In marketing mode Exposure VAR at 650 holds a flat −0.05em from 36px to 72px while ABC Oracle handles everything under 20px. In document mode ABC Oracle takes the display job at weight 300, tracked about −0.04em, at 72px and 54px and 34px, and the serif is absent. The signature move is the hero: Exposure Variable at 112px, weight 300, line height 95.2px — a 0.85 ratio, so the letters overlap their own line box and the wordmark reads as a drawn object. Under both sits a quieter third voice: ABC Favorit Mono at 13px with +1.3px tracking in `rgba(0, 0, 0, 0.42)`, doing every label and every piece of metadata — the one style on all four pages, and what makes a sales page and a security reference feel like the same publication.

## Agent Prompt Guide

## Quick Color Reference
- background: `#F8F8F8`
- text: `rgba(0, 0, 0, 0.85)`
- surface: `#FFFFFF`
- border: `rgba(0, 0, 0, 0.06)`
- accent: `#5863EA`
- primary action: `#000000`

## Example Component Prompts

1. **Privacy toggle pill**: A 35px-tall inline pill, fill `rgba(235, 235, 235, 0.7)`, radius 20px, padding `0px 16px`, no border, no shadow. Inside: a 12px circle at radius 9999px filled `#F2FCB3`; a label in ABC Oracle Triple 16px/400 with a 35px line height in `rgba(0, 0, 0, 0.85)`; a state chip, fill `#FFFFFF`, radius `0px`, padding `0px 5px`, 16px/400/20px. Wrap pills in a row with a 14px gap.
2. **Feature card**: A 12px-radius card, fill `rgba(0, 0, 0, 0.04)`, 1px `rgba(0, 0, 0, 0.06)`, no shadow, spanning 6 of 12 columns with a 20px gutter. Top-left, a white pill chip: fill `#FFFFFF`, radius 20px, padding `0px 16px`, 1px `rgba(0, 0, 0, 0.06)`, ABC Oracle Triple 16px/400/33px in `rgba(0, 0, 0, 0.6)`. Below, a paragraph in ABC Oracle 18px/400/27px at −0.36px in `rgba(0, 0, 0, 0.6)`. Bottom, a screenshot at radius `12px 12px 0px 0px`, masked to fade at the lower edge.
3. **Closing CTA block**: Centre a headline in Exposure VAR 48px/650, 56px line height, −2.4px tracking, in `rgba(0, 0, 0, 0.85)` on a `#F8F8F8` canvas. Below it a 56px-tall button, fill `#000000`, radius 14px, padding `0px 28px`, ABC Oracle 20px/500/30px, no border, no shadow. Under the button, one line of ABC Oracle in `rgba(0, 0, 0, 0.5)`.

## Similar Brands

- **Linear** — near-monochrome, its colour budget spent on one accent and a few status dots, with the same trust in tight negative tracking.
- **Vercel** — black-at-opacity fills over a single off-white canvas, hairlines instead of shadows.
- **Stripe Press** — a bookish serif carrying the voice while a neutral sans handles reading copy, printed-object metaphors as legitimate UI.
- **Readymag** — mono captions, oversized wordmarks and painterly artwork sitting together without a template.
- **Frank Collective** — documentary photography and high-contrast display type at near-absent chroma: the register the scream portrait works in.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-background: #F8F8F8;
  --color-hero-void: #020204;
  --color-true-white: #FFFFFF;
  --color-black: #000000;
  --color-primary: rgba(0,0,0,0.85);
  --color-secondary: rgba(0,0,0,0.6);
  --color-tertiary: rgba(0,0,0,0.45);
  --color-primary-50: rgba(0,0,0,0.42);
  --color-quaternary: rgba(0,0,0,0.2);
  --color-fill-tertiary: rgba(0,0,0,0.04);
  --color-fill-secondary: rgba(0,0,0,0.08);
  --color-stroke-light: rgba(0,0,0,0.06);
  --color-stroke-nav: rgba(0,0,0,0.09);
  --color-stroke-medium: rgba(0,0,0,0.1);
  --color-chip: rgba(235,235,235,0.7);
  --color-link: #5863EA;
  --color-toggle-lime: #F2FCB3;
  --color-toggle-amber: #FFDC5C;
  --color-pill-grey: #EFEFEF;
  --color-tile-graphite: #252525;
  --color-postcard-cream: #F7F4EE;
  --color-red: #FA3D1D;
  --color-twilight: #C679C4;
  --color-aurora-periwinkle: #B1BDFF;
  --color-aurora-peach: #FEB085;
  --gradient-better-day: linear-gradient(180deg,#000000,#000000,#C679C4,#FA3D1D);
  --gradient-aurora-periwinkle: linear-gradient(180deg,#B1BDFF,rgba(154,191,255,0.85),rgba(177,215,255,0.85));
  --gradient-aurora-peach: linear-gradient(180deg,#FEB085,rgba(255,176,178,0.85),rgba(255,204,249,0.85),rgba(233,215,255,0.85));
  --gradient-scrim: linear-gradient(180deg,rgba(2,2,4,0.7),rgba(2,2,4,0.3));

  /* Typography — Families */
  --font-display: 'Exposure VAR', 'Instrument Serif', Georgia, serif;
  --font-variable: 'Exposure Variable', 'Instrument Serif', Georgia, serif;
  --font-sans: 'ABC Oracle', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'ABC Favorit Mono', ui-monospace, SFMono-Regular, monospace;
  --font-triple: 'ABC Oracle Triple', ui-monospace, SFMono-Regular, monospace;
  --font-quadrant: 'Quadrant Text Mono', ui-monospace, SFMono-Regular, monospace;

  /* Typography — Scale */
  --text-11: 11px; --leading-11: 14px;
  --text-12: 12px; --leading-12: 18px;
  --text-13: 13px; --leading-13: 17px;
  --text-16: 16px; --leading-16: 24px;
  --text-16-tight: 16px; --leading-16-tight: 20px;
  --text-18: 18px; --leading-18: 27px;
  --text-24: 24px; --leading-24: 30px;
  --text-25: 25px; --leading-25: 30px;
  --text-36: 36px; --leading-36: 44px;
  --text-36-sans: 36px; --leading-36-sans: 36px;
  --text-48: 48px; --leading-48: 56px;
  --text-54: 54px; --leading-54: 60px;
  --text-72: 72px; --leading-72: 82px;
  --text-72-sans: 72px; --leading-72-sans: 72px;
  --text-81: 81px; --leading-81: 113px;
  --text-112: 112px; --leading-112: 95.2px;
  --tracking-13: 1.3px; --tracking-18: -0.36px; --tracking-24: -0.72px;
  --tracking-36: -1.8px; --tracking-36-sans: -1.44px; --tracking-48: -2.4px;
  --tracking-54: -2.16px; --tracking-72: -3.6px; --tracking-72-sans: -2.88px;
  --tracking-81: -3.24px; --tracking-112: -3.36px;

  /* Spacing */
  --spacing-10: 10px; --spacing-14: 14px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px;
  --spacing-40: 40px; --spacing-44: 44px; --spacing-80: 80px;
  --spacing-100: 100px; --spacing-200: 200px;

  /* Border Radius */
  --radius-tile: 8px; --radius-image: 10px; --radius-card: 12px;
  --radius-button: 14px; --radius-panel: 16px; --radius-pill: 20px;
  --radius-frame: 24px; --radius-callout: 28px; --radius-full: 9999px;

  /* Shadows */
  --shadow-card: rgba(0,0,0,0.06) 0px 4px 32px 0px;
  --shadow-frame: rgba(0,0,0,0.08) 0px 4.6px 27.6px 0px, rgba(0,0,0,0.25) 0px 0px 2.3px 0px;
  --shadow-nav: rgba(0,0,0,0.06) 0px 2px 8px 0px, rgba(0,0,0,0.04) 0px 0px 2px 0px;
  --shadow-on-media: rgba(0,0,0,0.6) 0px 8px 30px -8px;
  --shadow-banner: rgba(0,0,0,0.08) 0px 1px 2px 0px;
  --shadow-tile: rgba(0,0,0,0.16) 0px 1px 2px 0px;
  --shadow-postcard: rgba(0,0,0,0.12) 0px 22px 40px 0px, rgba(0,0,0,0.05) 0px 0px 0px 1px;
}
```

### Tailwind v4

```css
@theme {
  --color-background: #F8F8F8;
  --color-hero-void: #020204;
  --color-true-white: #FFFFFF;
  --color-black: #000000;
  --color-primary: rgba(0,0,0,0.85);
  --color-secondary: rgba(0,0,0,0.6);
  --color-tertiary: rgba(0,0,0,0.45);
  --color-primary-50: rgba(0,0,0,0.42);
  --color-quaternary: rgba(0,0,0,0.2);
  --color-fill-tertiary: rgba(0,0,0,0.04);
  --color-fill-secondary: rgba(0,0,0,0.08);
  --color-stroke-light: rgba(0,0,0,0.06);
  --color-stroke-nav: rgba(0,0,0,0.09);
  --color-stroke-medium: rgba(0,0,0,0.1);
  --color-chip: rgba(235,235,235,0.7);
  --color-link: #5863EA;
  --color-toggle-lime: #F2FCB3;
  --color-toggle-amber: #FFDC5C;
  --color-pill-grey: #EFEFEF;
  --color-tile-graphite: #252525;
  --color-postcard-cream: #F7F4EE;
  --color-red: #FA3D1D;
  --color-twilight: #C679C4;
  --color-aurora-periwinkle: #B1BDFF;
  --color-aurora-peach: #FEB085;

  --font-display: 'Exposure VAR', 'Instrument Serif', Georgia, serif;
  --font-variable: 'Exposure Variable', 'Instrument Serif', Georgia, serif;
  --font-sans: 'ABC Oracle', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'ABC Favorit Mono', ui-monospace, SFMono-Regular, monospace;
  --font-triple: 'ABC Oracle Triple', ui-monospace, SFMono-Regular, monospace;
  --font-quadrant: 'Quadrant Text Mono', ui-monospace, SFMono-Regular, monospace;

  --text-11: 11px; --leading-11: 14px;
  --text-12: 12px; --leading-12: 18px;
  --text-13: 13px; --leading-13: 17px;
  --text-16: 16px; --leading-16: 24px;
  --text-18: 18px; --leading-18: 27px;
  --text-24: 24px; --leading-24: 30px;
  --text-25: 25px; --leading-25: 30px;
  --text-36: 36px; --leading-36: 44px;
  --text-48: 48px; --leading-48: 56px;
  --text-54: 54px; --leading-54: 60px;
  --text-72: 72px; --leading-72: 82px;
  --text-81: 81px; --leading-81: 113px;
  --text-112: 112px; --leading-112: 95.2px;

  --spacing-10: 10px; --spacing-14: 14px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px;
  --spacing-40: 40px; --spacing-44: 44px; --spacing-80: 80px;
  --spacing-100: 100px; --spacing-200: 200px;

  --radius-tile: 8px; --radius-image: 10px; --radius-card: 12px;
  --radius-button: 14px; --radius-panel: 16px; --radius-pill: 20px;
  --radius-frame: 24px; --radius-callout: 28px; --radius-full: 9999px;

  --shadow-card: rgba(0,0,0,0.06) 0px 4px 32px 0px;
  --shadow-frame: rgba(0,0,0,0.08) 0px 4.6px 27.6px 0px, rgba(0,0,0,0.25) 0px 0px 2.3px 0px;
  --shadow-nav: rgba(0,0,0,0.06) 0px 2px 8px 0px, rgba(0,0,0,0.04) 0px 0px 2px 0px;
  --shadow-on-media: rgba(0,0,0,0.6) 0px 8px 30px -8px;
  --shadow-banner: rgba(0,0,0,0.08) 0px 1px 2px 0px;
  --shadow-tile: rgba(0,0,0,0.16) 0px 1px 2px 0px;
  --shadow-postcard: rgba(0,0,0,0.12) 0px 22px 40px 0px, rgba(0,0,0,0.05) 0px 0px 0px 1px;
}
```