---
version: alpha
name: Brex
description: "White ledger, one orange, a near-black band at each end."
colors:
  on-surface-variant: "#6F737B"
  on-surface: "#15191E"
  surface: "#FFFFFF"
  primary: "#FF3D00"
  paper: "#FCFCFD"
  frost: "#F9F9FB"
  mist: "#F3F3F7"
  ink-black: "#000000"
  midnight: "#000710"
  slate: "#8B8D98"
  steel: "#60646C"
  fog: "#B9BBC6"
  silver: "#BFBFBF"
  hairline: "rgba(66, 87, 138, 0.15)"
  hairline-faint: "rgba(84, 87, 142, 0.07)"
typography:
  display:
    fontFamily: Inter
    fontSize: 72px
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: -1.44px
  headline:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.96px
  headline-tight:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -1.44px
  section:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.72px
  quote:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: 0em
  title:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 29px
    letterSpacing: -0.48px
  title-loose:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.48px
  lede:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.4px
  plan-name:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.4px
  unstyled-heading:
    fontFamily: Inter
    fontSize: 18.72px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.32px
  link:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: -0.28px
  nav:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.14px
  button:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: -0.24px
  caption-loose:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: -0.24px
rounded:
  buttons-nav-links-chips-outlined-fields: 10px
  menu-triggers-pricing-plan-card: 6px
  cards-and-outlined-boxes: 12px
  field-embedded-submit-buttons: 8px
  dark-feature-panel: 30px
  tab-indicator: 4px
  bands-nav-footer-table-cells: 0px
spacing:
  hair: 1px
  2xs: 4px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 48px
  gutter: 72px
  5xl: 80px
  6xl: 160px
  inset-wide: 200px
---
# Brex — Style Reference

> White ledger, one orange, a near-black band at each end.

**Theme:** light

Brex paints on white and lets exactly one colour shout. A saturated `#FF3D00` carries the filled buttons, the inline links and the proof numerals; everything else is a four-step near-white ladder — `#FFFFFF`, `#FCFCFD`, `#F9F9FB`, `#F3F3F7` — whose steps sit close enough that alternating full-bleed bands read as rhythm rather than contrast. Type is Inter throughout, headings holding weight 500 from 24px up to 72px with tracking pulled to a constant −0.02em, so the display line closes into a dark mass while the footnote stays open: hierarchy is scale, not weight. One serif, Flecha, is held back for a single job — the customer's own words. Depth is refused outright; the measured shadows are one-pixel offsets, so planes separate by a hairline rule and a luminance step instead of a blur. Near-black `#000710` caps every page, closes most at the foot, and cuts a band through the middle — punctuation down the page, not a frame around it.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#FFFFFF` | `--color-canvas` | Page ground, nav fill, and the card fill inside grey bands. |
| Paper | `#FCFCFD` | `--color-paper` | Ink on orange and on near-black, plus the circular story badge — a warmer white, used where pure white would glare. |
| Frost | `#F9F9FB` | `--color-frost` | One step down from Canvas, and in the inventory it carries two fill observations, both on the round carousel control `.css-3v3ds1`. |
| Mist | `#F3F3F7` | `--color-mist` | The alternating band, the grey card and the zebra row — the workhorse surface. |
| Graphite | `#15191E` | `--color-graphite` | Primary ink for headings, body and nav; also the fill of the deeply-rounded dark panel. Not black — it keeps a blue cast. |
| Ink Black | `#000000` | `--color-ink-black` | The inherited browser default ink: 1,574 text observations and no fill count. Reach for Graphite as ink and Midnight (`.css-eowykp`) as a plane instead. |
| Midnight | `#000710` | `--color-midnight` | The release bar `.css-1nxvxs3`, the mid-page band `.css-xhv1s0` and the footer `.css-eowykp` — seven of its ten fills are sections, only four the bar. |
| Brex Orange | `#FF3D00` | `--color-orange` | Fill, border and ink for action: filled CTAs `.css-ybwmp8`, inline links `.css-116qeg9`, stat numerals `.css-1rsgoym`. Its 86 observations land on links, spans, divs and buttons — no section or card carries it. |
| Slate | `#8B8D98` | `--color-slate` | Footer link ink against Midnight. |
| Steel | `#60646C` | `--color-steel` | Muted body ink on light: ledes under a headline, supporting paragraphs in a card. |
| Ash | `#6F737B` | `--color-ash` | Placeholder and helper ink inside outlined fields and tab controls (`.css-1gdcre5-Layouts--BaseLayouts--InputBox.e1ika9z23`). Its carriers are divs and buttons — keep it off headings. |
| Fog | `#B9BBC6` | `--color-fog` | Footnote and disclosure ink on Midnight, plus the disabled carousel glyph. The lowest-contrast text in the system. |
| Silver | `#BFBFBF` | `--color-silver` | Four text observations, every one on a `p` — legal small print. Prefer Fog or Steel. |
| Hairline | `rgba(66, 87, 138, 0.15)` | `--color-hairline` | The structural line: field borders (`.css-1mjrjwv-Layouts--BaseLayouts--OutlinedContent.e1ika9z20`), chip outlines (`.css-hz6be5`), comparison rules (`.css-1q7ti4e`), the header's underline (`.css-1rd5kn8`). Base `#42578A` at 15% — blue-tinted, not neutral grey. |
| Hairline Faint | `rgba(84, 87, 142, 0.07)` | `--color-hairline-faint` | A single outlined block on the demo form, at roughly half the Hairline's presence. Keep it exceptional. |

## Tokens — Typography

### Inter — the whole system: display, headings, body, nav, buttons, footnotes; weight 500 for every heading from 24px up, 400 for prose, 600 reserved for the nav bar · `--font-sans`

- **Substitute:** Inter Variable, Helvetica Neue, system-ui
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px, 14px, 16px, 18.72px, 20px, 24px, 36px, 48px, 72px
- **Line height:** 16px at 12px through 72px at 72px — ratios run 1.50 down to 1.00, tightening as size grows
- **Letter spacing:** −0.02em applied almost everywhere (72px→−1.44px, 48px→−0.96px, 36px→−0.72px, 24px→−0.48px, 20px→−0.4px, 16px→−0.32px, 14px→−0.28px, 12px→−0.24px). Two deliberate departures: −1.44px at 48px on the pricing headline (`.css-l9darp`) and the stat numeral (`.css-1rsgoym`), and −0.14px on the nav link (`.css-1s4nk7l`). Button and footer-link rows run `normal`.
- **Role:** Display through caption in one family — hierarchy comes from scale and tracking, with the census giving weight 600 a single row (`.css-1s4nk7l`) and weight 700 a single control row (`.css-em226e`).

### Flecha — the attributed customer quote, at one size and one weight · `--font-serif`

- **Substitute:** Freight Display Pro, Tiempos Text, Georgia
- **Weights:** 500
- **Sizes:** 36px
- **Line height:** 40px (1.11)
- **Letter spacing:** `normal`, where Inter's 36px row (`.css-r3yjc4`) tracks −0.72px
- **Role:** The census paints Flecha on one row, the pull quote `.css-v3m0ec` ("Brex has been a major gain for us in efficiency…"), so keep the serif to speech that belongs to a named person.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 72px | 72px | −1.44px | `--text-display` |
| Headline | 48px | 48px | −0.96px | `--text-headline` |
| Headline Tight | 48px | 48px | −1.44px | `--text-headline-tight` |
| Section | 36px | 36px | −0.72px | `--text-section` |
| Quote (Flecha) | 36px | 40px | normal | `--text-quote` |
| Title | 24px | 29px | −0.48px | `--text-title` |
| Title Loose | 24px | 32px | −0.48px | `--text-title-loose` |
| Lede | 20px | 24px | −0.4px | `--text-lede` |
| Plan Name | 20px | 28px | −0.4px | `--text-plan` |
| Unstyled Heading | 18.72px | normal | normal | `--text-h3-default` |
| Body | 16px | 24px | −0.32px | `--text-body` |
| Link | 16px | 24px | normal | `--text-link` |
| Label | 14px | 21px | −0.28px | `--text-label` |
| Nav | 14px | 20px | −0.14px | `--text-nav` |
| Button | 14px | 22px | normal | `--text-button` |
| Caption | 12px | 16px | −0.24px | `--text-caption` |
| Caption Loose | 12px | 18px | −0.24px | `--text-caption-loose` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Hair | 1px | `--spacing-px` |
| 2xs | 4px | `--spacing-1` |
| xs | 6px | `--spacing-1-5` |
| sm | 8px | `--spacing-2` |
| md | 12px | `--spacing-3` |
| lg | 16px | `--spacing-4` |
| xl | 20px | `--spacing-5` |
| 2xl | 24px | `--spacing-6` |
| 3xl | 32px | `--spacing-8` |
| 4xl | 48px | `--spacing-12` |
| Gutter | 72px | `--spacing-18` |
| 5xl | 80px | `--spacing-20` |
| 6xl | 160px | `--spacing-40` |
| Inset Wide | 200px | `--spacing-50` |

*(declared, not painted)*, and left out above: 2px, 28px, 36px, 40px, 44px, 52px, 56px, 64px, 96px, 104px, 120px, 136px, 144px.

### Border Radius

| Element | Value |
|---------|-------|
| Buttons, nav links, chips, outlined fields | 10px |
| Menu triggers, pricing plan card | 6px |
| Cards and outlined boxes | 12px |
| Field-embedded submit buttons | 8px |
| Carousel controls, story badges | 50% |
| Dark feature panel | 30px |
| Tab indicator | 4px |
| Bands, nav, footer, table cells | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Field lift | `rgba(0, 0, 0, 0.04) 0px 1px 1px 0px` | `--shadow-field` |
| Header rule | `rgba(66, 87, 138, 0.15) 0px 1px 0px 0px` | `--shadow-header` |

### Layout

- **Page max-width:** bands run the full 1920px viewport; content sits inside a 72px side inset (58 carriers), with 48px on the dark panel and 200px on two blocks. The nav row measures 1680×60px inside a 1920×60px header.
- **Section gap:** 48px (25 carriers) default, 80px (12) generous, 160px (3) at the footer's top padding.
- **Card padding:** 32px on product and grey cards, 24px on the pricing plan card, 48px on the dark panel, 0px 12px on outlined fields.
- **Element gap:** 16px (44) in lists and card stacks, 24px (35) between columns, 8px (28) inside controls, 4px (11) label to field.

## Components

### Announcement Bar

**Role:** The release note that sits above the navigation on every page, dark so the white header below reads as the start of the page.

Cited from `.css-1nxvxs3`: a `section` filled `#000710`, 16px vertical padding and none horizontal, radius 0, no border, no shadow, measured 1920×50px on all four pages. Its link is `.css-10fbso6` — Inter 12px/400, 18px line-height, −0.24px, ink `#FCFCFD` — centred, with a trailing arrow glyph in the copy rather than an icon. The tiles show no button inside the bar. Keep it to one sentence — at 50px there is no second line.

### Header Bar

**Role:** The persistent white navigation shell, separated from the page by a rule rather than a shadow.

Two rows compose it. `.css-1rd5kn8` is the 1920×60px `div` filled `#FFFFFF`, radius 0, no border, carrying the header shadow `rgba(66, 87, 138, 0.15) 0px 1px 0px 0px` — a zero-blur offset that behaves as a 1px underline. Inside it `.css-zfmdwl` is the `nav`, also `#FFFFFF`, 1680×60px with 24px horizontal padding and none vertical. Both appear on all four pages: wordmark, triggers, Customers and Pricing left; Sign in, See a demo and the filled CTA right.

### Navigation Link & Menu Trigger

**Role:** The two kinds of top-level nav target — a direct link, and a trigger that opens a menu.

The direct link is `.css-1s4nk7l`: an `a` with no fill, ink `#15191E`, Inter 14px/600 at 20px and −0.14px, 4px/8px padding, radius 10px, no border or shadow, boxes 63–96×30px, on all pages ("Customers") — the census's one weight-600 row. The trigger is `.css-55zzdl`: a `button`, no fill, 16px/400 with normal metrics, 4px/8px padding, radius 6px, boxes 96–106×31px, containing "Products"; its label row is `.css-1pkgpg1`, Inter 14px/400/21px/−0.28px in `#15191E`, 8px from the chevron.

### Primary Button

**Role:** The one filled action in the system, sized to where it sits.

Five classes carry the fill, 17 elements in all. Three are the button proper, orange on orange: fill `#FF3D00`, ink `#FCFCFD`, border `1px #FF3D00`, radius 10px, no shadow. `.css-tlbyu4` is the header instance — 14px/400 at 22px, 0px/12px padding, measured 148×36px, on all pages. `.css-ybwmp8` is the in-page instance — same type, 0px/20px padding, 160×48px. `.css-em226e` is the pricing instance — 14px/**700**, 8px/16px padding, box `not measured`. The other two sit in forms at radius 8px over a hairline border: `.css-122zs2m-Button--BaseButton--StyledButton` in the email field, `.css-1tyttb7-Button--BaseButton--StyledButton` (16px/400) on the demo form.

### Outlined Field with Inline Button

**Role:** The email-capture control and the demo form's inputs — a bordered white box, with the submit inside it only on the capture variant.

`.css-1mjrjwv-Layouts--BaseLayouts--OutlinedContent.e1ika9z20` measures two ways. On the demo form it is a `div` filled `#FFFFFF`, 16px/400 at −0.4px, 0px/12px padding, radius 10px, `1px rgba(66, 87, 138, 0.15)` border, shadow `rgba(0, 0, 0, 0.04) 0px 1px 1px 0px`, boxes 238–500×48px. On the home and customers pages: 14px/400 at −0.35px, same padding, border and shadow, radius 12px, boxes 384×58px, containing "Get started". Only that two-carrier variant nests a button: `.css-122zs2m-Button--BaseButton--StyledButton` — fill `#FF3D00`, ink `#FFFFFF`, 14px/400, 0px/16px padding, radius 8px, with a `rgba(66, 87, 138, 0.15)` border matching its host's hairline. The demo form's submit is separate: `button.css-1tyttb7`, 500×40px, below the fields. Label and field sit 4px apart.

### Product Feature Card

**Role:** The repeating tile in the product overview row — a title, a short paragraph, and a rendered UI fragment below.

`.css-mmo1av`: a `div` filled `#FFFFFF`, 32px padding all round, radius 12px, no border, no shadow, measured 294×328px, five on the home page; the row prints `(no text)`, so its contents are tile readings. Title row `.css-mk23ax`, Inter 24px/500 at 29px and −0.48px in `#15191E`; supporting line `.css-sf7y3l`, Inter 14px/500/21px/−0.28px in `#60646C`.

### Grey Surface Card

**Role:** The filled panel that holds a claim and its illustration on the customers page.

Two rows, two radii. `.css-ie8jsb` is a `div` filled `#F3F3F7`, 0px padding, radius 8px, no border or shadow, measured 380×496px, containing "Unlock higher limits. Get the card with up to 30…" — its heads are `.css-1mgt3k0` (Inter 24px/500 at 32px, −0.48px, `#15191E`) over `.css-1a3rq54` (16px/500 at 20px, −0.32px), and it carries the chip `.css-hz6be5`. `.css-knu1kx` is the padded sibling in another section: `#F3F3F7`, 32px padding, radius 12px, measured 496×418px, holding a testimonial over a 125×28 logo.

### Status Chip

**Role:** The small labelled pill that names the benefit a grey card is claiming.

`.css-hz6be5`: a `span` filled `#FFFFFF`, ink `#15191E`, Inter 14px/400 at 22px with normal tracking, 0px/12px padding, radius 10px, `1px rgba(66, 87, 138, 0.15)` border, no shadow, measured 120–140×40px, six on the customers page ("Spend smarter") — one per grey card `.css-ie8jsb`. Note the radius: 10px on a 40px box is a rounded rectangle, not a pill — the 50% token exists and is passed over here.

### Dark Feature Panel

**Role:** The inverted block on the customers page — a dark object in the page body, rounded where the midnight bands run full-bleed.

`.css-z4sggu`: a `div` filled `#15191E` — Graphite, not Midnight — with 48px padding on all sides, radius **30px**, no border, no shadow, one element measured 1536×604px. The 48px is internal padding, not an inset: 1536 is the content width inside the 72px gutter (1680 − 144), so the panel runs to the gutter rather than insetting from it. 30px is the largest fixed radius in the system — 50% rounds fuller, on nine carriers (`.css-3v3ds1`, `.css-yc6i2h`) — and its row holds three carriers, this panel and the 752×604 `.css-1k9ejn2`. Spread 30px further and the distinction dissolves.

### Pricing Plan Card & Comparison Table

**Role:** The three-up plan chooser and the feature matrix beneath it.

The plan card is `.css-13enryz`: a `div` filled `#FFFFFF`, 24px padding, radius 6px, no border, no shadow, three on the pricing page; box `not measured`. Its name is `h2.css-151ddds` at 36px/500, not the 20px `.css-185poze` of the comparison header `th.css-110y5w4` (272×124). Feature lines are `.css-1eu137r` (20px/400 at 24px, −0.4px), each led by a 16×24 icon slot in `li.css-1n6yqh1` (`.css-swp7fn`) — the tiles show a check mark on every line. Comparison rows are `.css-1q7ti4e`: `div`, no fill, radius 0, one `1px rgba(66, 87, 138, 0.15)` border, measured 1536×78px, nine of them. Cells are `.css-ndbq56` at 272×88px, 12px/400, alternating `#FFFFFF` and `#F3F3F7`.

### Stat Block

**Role:** The proof figure — a label, a large numeral, and a one-line gloss.

Two treatments. On the home page the numeral is `.css-1rsgoym`, Inter 48px/500 at 48px line-height with −1.44px tracking in `#FF3D00` ("756 hours") — tracking matched only by the pricing headline `.css-l9darp`, and the one 48px row the census paints in the accent. On the customers page the accent moves up to the label: `.css-pcar7z`, Inter 24px/500 at 29px, −0.48px, `#FF3D00` ("Control spend"), with the figure in `#15191E` inside `.css-1yjg7qr`, a `div` filled `#FFFFFF` measured 384×157px, 0px padding, radius 0. Pick one; running both in a view halves the signal.

### Footer

**Role:** The closing near-black plane carrying the link columns, the app badges, and the regulatory small print.

`.css-eowykp`: a `footer` filled `#000710`, **160px** top padding and 0px horizontal, radius 0, no border, no shadow, measured 1920×1385–1537px on three of the four pages — `/book-a-demo` renders no `footer` at all. The row prints `(no text)`; columns, badges and small print are tile readings. Column headings `.css-xv1tn4` (Inter 14px/500 at 21px, −0.28px, `#FCFCFD`); links `.css-1whhl1d` (16px/400 at 24px, normal, `#8B8D98`) stacked on the 20px `ul` gap (`.css-1irzh0v`); disclosures `.css-1ovgh5b` (12px/400 at 16px, −0.24px, `#B9BBC6`). That 160px lead-in is where the section-padding census tops out.

## Do's and Don'ts

### Do

- Set headings from 24px to 72px in Inter 500 and let size carry rank — `.css-1riprm5` at 72px and `.css-mk23ax` at 24px share a weight.
- Track headings at −0.02em of their own size; the scale encodes it (48px→−0.96px, 36px→−0.72px, 24px→−0.48px).
- Alternate `#FFFFFF` and `#F3F3F7` full-bleed sections for rhythm, holding content to the 72px gutter inside them.
- Use `rgba(66, 87, 138, 0.15)` for structural lines — field borders, chip outlines, table rules and the header's underline all run the same ink.
- Give filled CTAs a border matching their fill (`1px #FF3D00` over `#FF3D00`), so an outlined variant swaps in without shifting the label.
- Cap a page top and bottom in `#000710` and leave the body white between them.

### Don't

- Don't specify `#000000` as a fill. Its inventory row is 1,574 text observations and no fill count; the dark planes are `#000710` (`.css-1nxvxs3`, `.css-xhv1s0`, `.css-eowykp`) and the dark panel is `#15191E` (`.css-z4sggu`).
- Don't put `#FF3D00` behind a section. The accent's 86 observations are text, fill and border on controls and numerals (`.css-ybwmp8`, `.css-116qeg9`, `.css-1rsgoym`) — no band carries it.
- Don't add a blurred shadow. Both measured shadows are 1px offsets with no spread (`.css-1mjrjwv-Layouts--BaseLayouts--OutlinedContent.e1ika9z20`, `.css-1rd5kn8`); everything else separates by hairline or luminance step.
- Don't collapse the radii into one value. 10px is the control family (46 carriers, `.css-1s4nk7l`, `.css-tlbyu4`), 12px the card family (28, `.css-mmo1av`), 6px the trigger and plan card (31, `.css-55zzdl`, `.css-13enryz`), and 30px the panel family at three carriers (`.css-z4sggu`, `.css-1k9ejn2`).
- Don't reach for bold. Weight 700 appears on one control row, the pricing CTA `.css-em226e`; weight 600 on one, the nav link `.css-1s4nk7l`.
- Don't set the pull quote in Inter. The census gives Flecha one row of two elements — `.css-v3m0ec` on home, `.css-a6193l` on customers — and the serif is the signal that a human is speaking.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page ground, nav, cards in grey bands, comparison cells |
| 1 | Paper | `#FCFCFD` | Ink on dark and on orange; the round story badge |
| 2 | Frost | `#F9F9FB` | Spent state of the round carousel control |
| 3 | Mist | `#F3F3F7` | Alternating bands, grey cards, zebra rows, live carousel control |
| — | Graphite | `#15191E` | The inverted feature panel in the page body |
| — | Midnight | `#000710` | Release bar, footer, and the full-bleed CTA bands mid-page (`.css-xhv1s0`, 1920×660 and 1920×900) |

## Elevation

Depth is a rule, not a glow. Two box-shadows exist in the whole capture: `rgba(0, 0, 0, 0.04) 0px 1px 1px 0px`, giving outlined fields a single pixel of lift, and `rgba(66, 87, 138, 0.15) 0px 1px 0px 0px`, zero-blur, functioning as the header's underline. Everything else stacks by luminance: a `#FFFFFF` card on a `#F3F3F7` band, a `#F3F3F7` card on a `#FFFFFF` band, figure and ground trading places. Where a boundary must be explicit the system draws `1px rgba(66, 87, 138, 0.15)` — on fields, chips and comparison rows. The one object that escapes the plane does it with geometry rather than light: the 30px radius of `.css-z4sggu`.

## Imagery

Three registers, kept apart. First, photographic portraits under heavy single-hue colour grading — an orange wash, an amber rim light — for the audience cards in the "Solutions" row, cropped to a 12px-radius rectangle. Second, product renders: the physical card on a pale surface, a phone showing the wallet UI, shot at an angle and bled off the right edge of the hero. Third, customer logos in flat grey, evenly gridded with no card or border. The customer stories use full-bleed brand photography with the partner's logo knocked out in white over it and a circular `#FCFCFD` badge (`.css-yc6i2h`, 46×46px, 8px padding, radius 50%) top-right as the affordance. The pale lavender stages behind the in-page UI screenshots are artwork, not a surface — no census row paints them.

## Layout

Full-bleed by default: sections run the entire 1920px viewport and alternate `#FFFFFF` against `#F3F3F7`, with a 72px horizontal inset holding the content column. Vertical rhythm is 48px as the standard section padding (25 carriers), 80px as the emphatic one (12), 160px at the footer's lead-in (`.css-eowykp`). The grid varies by purpose — 5-up for products, 3-up for audiences and pricing, two-column alternation for the deep-dive sections where copy and a screenshot stage trade sides down the page. The nav is a 60px bar under a 50px release strip, holding `#FFFFFF` on every page it is measured (`.css-1rd5kn8`, `.css-zfmdwl`, four carriers each). The customers page opens on a wide hero image inside the gutter; the pricing page runs its comparison as 1536px rows of 272×88px cells.

## Typography Voice

One face, two modes. Inter at 400 does the reading — 16px at 24px for body, 14px at 21px for labels, 12px at 16px for footnotes — and Inter at 500 does the announcing, from 24px card titles to the 72px home headline. The move that makes it work is tracking tied to size: −0.02em applied literally, so the 72px line loses 1.44px per character and the 12px footnote only 0.24px. Combine that with line-heights falling from 1.50 at caption size to exactly 1.00 at 36px, 48px and 72px, and large type stops behaving like text and starts behaving like a shape. Two rows break the rule for extra compression: the pricing headline `.css-l9darp` and the stat numeral `.css-1rsgoym`, each 48px at −1.44px. Against all of that, Flecha at 36px/500 with `normal` tracking and 40px leading is the one warm, un-tightened row in the census.

## Agent Prompt Guide

## Quick Color Reference

- background: `#FFFFFF`
- text: `#15191E`
- surface: `#F3F3F7`
- border: `rgba(66, 87, 138, 0.15)`
- accent: `#FF3D00`
- primary action: `#FF3D00`

## Example Component Prompts

1. **Primary Button**: A link-styled button, background `#FF3D00`, text `#FCFCFD`, border `1px solid #FF3D00`, border-radius 10px, padding 0 20px, height 48px (width 160px), Inter 14px weight 400, line-height 22px, letter-spacing normal, no box-shadow.
2. **Outlined Email Field**: A 384×58px white box, background `#FFFFFF`, border `1px solid rgba(66, 87, 138, 0.15)`, border-radius 12px, padding 0 12px, box-shadow `rgba(0, 0, 0, 0.04) 0px 1px 1px 0px`, Inter 14px/400 with −0.35px tracking, holding a flush-right button: background `#FF3D00`, text `#FFFFFF`, Inter 14px/400, padding 0 16px, border-radius 8px, border `1px solid rgba(66, 87, 138, 0.15)`.
3. **Product Feature Card**: A 294×328px card, background `#FFFFFF`, padding 32px, border-radius 12px, no border, no shadow. Title in Inter 24px weight 500, line-height 29px, letter-spacing −0.48px, color `#15191E`; body in Inter 14px weight 500, line-height 21px, letter-spacing −0.28px, color `#60646C`; product artwork anchored to the bottom edge.
4. **Alternating Section Band**: A full-bleed `section`, background `#F3F3F7`, padding 80px 0, border-radius 0, content column inset 72px from each side, 24px gap between columns and 16px gap inside stacks. Heading in Inter 36px weight 500, line-height 36px, letter-spacing −0.72px, color `#15191E`; lede in Inter 20px weight 500, line-height 24px, letter-spacing −0.4px, color `#60646C`.
5. **Footer**: A `footer`, background `#000710`, padding 160px 0 0, no radius. Column headings in Inter 14px weight 500, line-height 21px, letter-spacing −0.28px, color `#FCFCFD`; links in Inter 16px weight 400, line-height 24px, letter-spacing normal, color `#8B8D98`, stacked in 20px-gap lists; legal copy in Inter 12px weight 400, line-height 16px, letter-spacing −0.24px, color `#B9BBC6`.

## Similar Brands

- **Stripe** — a white canvas, a neutral sans at negative tracking, one saturated accent carrying the calls to action.
- **Mercury** — banking marketing on near-whites and hairline borders, depth expressed as a 1px rule rather than a shadow.
- **Ramp** — near-black ink on white with one high-chroma accent kept to action and proof numerals.
- **Linear** — tight optical tracking on a neutral sans, a small radius vocabulary, near-total refusal of blur.
- **Monzo** — an orange-red brand colour held to controls and numerals while the surfaces stay neutral.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-paper: #FCFCFD;
  --color-frost: #F9F9FB;
  --color-mist: #F3F3F7;
  --color-graphite: #15191E;
  --color-ink-black: #000000;
  --color-midnight: #000710;
  --color-orange: #FF3D00;
  --color-slate: #8B8D98;
  --color-steel: #60646C;
  --color-ash: #6F737B;
  --color-fog: #B9BBC6;
  --color-silver: #BFBFBF;
  --color-hairline: rgba(66, 87, 138, 0.15);
  --color-hairline-faint: rgba(84, 87, 142, 0.07);

  /* Typography — Families */
  --font-sans: 'Inter', 'Inter Variable', 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Flecha', 'Freight Display Pro', 'Tiempos Text', Georgia, serif;

  /* Typography — Scale */
  --text-display: 72px;          --leading-display: 72px;          --tracking-display: -1.44px;
  --text-headline: 48px;         --leading-headline: 48px;         --tracking-headline: -0.96px;
  --text-headline-tight: 48px;   --leading-headline-tight: 48px;   --tracking-headline-tight: -1.44px;
  --text-section: 36px;          --leading-section: 36px;          --tracking-section: -0.72px;
  --text-quote: 36px;            --leading-quote: 40px;            --tracking-quote: normal;
  --text-title: 24px;            --leading-title: 29px;            --tracking-title: -0.48px;
  --text-title-loose: 24px;      --leading-title-loose: 32px;      --tracking-title-loose: -0.48px;
  --text-lede: 20px;             --leading-lede: 24px;             --tracking-lede: -0.4px;
  --text-plan: 20px;             --leading-plan: 28px;             --tracking-plan: -0.4px;
  --text-h3-default: 18.72px;    --leading-h3-default: normal;     --tracking-h3-default: normal;
  --text-body: 16px;             --leading-body: 24px;             --tracking-body: -0.32px;
  --text-link: 16px;             --leading-link: 24px;             --tracking-link: normal;
  --text-label: 14px;            --leading-label: 21px;            --tracking-label: -0.28px;
  --text-nav: 14px;              --leading-nav: 20px;              --tracking-nav: -0.14px;
  --text-button: 14px;           --leading-button: 22px;           --tracking-button: normal;
  --text-caption: 12px;          --leading-caption: 16px;          --tracking-caption: -0.24px;
  --text-caption-loose: 12px;    --leading-caption-loose: 18px;    --tracking-caption-loose: -0.24px;

  /* Spacing */
  --spacing-px: 1px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-18: 72px;
  --spacing-20: 80px;
  --spacing-40: 160px;
  --spacing-50: 200px;

  /* Border Radius */
  --radius-indicator: 4px;
  --radius-trigger: 6px;
  --radius-field-button: 8px;
  --radius-control: 10px;
  --radius-card: 12px;
  --radius-panel: 30px;
  --radius-round: 50%;
  --radius-none: 0px;

  /* Shadows */
  --shadow-field: rgba(0, 0, 0, 0.04) 0px 1px 1px 0px;
  --shadow-header: rgba(66, 87, 138, 0.15) 0px 1px 0px 0px;
}
```

### Tailwind v4

```css
@theme {
  --color-canvas: #FFFFFF;
  --color-paper: #FCFCFD;
  --color-frost: #F9F9FB;
  --color-mist: #F3F3F7;
  --color-graphite: #15191E;
  --color-ink-black: #000000;
  --color-midnight: #000710;
  --color-orange: #FF3D00;
  --color-slate: #8B8D98;
  --color-steel: #60646C;
  --color-ash: #6F737B;
  --color-fog: #B9BBC6;
  --color-silver: #BFBFBF;
  --color-hairline: rgba(66, 87, 138, 0.15);
  --color-hairline-faint: rgba(84, 87, 142, 0.07);

  --font-sans: 'Inter', 'Inter Variable', 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Flecha', 'Freight Display Pro', 'Tiempos Text', Georgia, serif;

  --text-display: 72px;
  --text-display--line-height: 72px;
  --text-display--letter-spacing: -1.44px;
  --text-headline: 48px;
  --text-headline--line-height: 48px;
  --text-headline--letter-spacing: -0.96px;
  --text-headline-tight: 48px;
  --text-headline-tight--line-height: 48px;
  --text-headline-tight--letter-spacing: -1.44px;
  --text-section: 36px;
  --text-section--line-height: 36px;
  --text-section--letter-spacing: -0.72px;
  --text-quote: 36px;
  --text-quote--line-height: 40px;
  --text-quote--letter-spacing: normal;
  --text-title: 24px;
  --text-title--line-height: 29px;
  --text-title--letter-spacing: -0.48px;
  --text-title-loose: 24px;
  --text-title-loose--line-height: 32px;
  --text-title-loose--letter-spacing: -0.48px;
  --text-lede: 20px;
  --text-lede--line-height: 24px;
  --text-lede--letter-spacing: -0.4px;
  --text-plan: 20px;
  --text-plan--line-height: 28px;
  --text-plan--letter-spacing: -0.4px;
  --text-h3-default: 18.72px;
  --text-h3-default--line-height: normal;
  --text-h3-default--letter-spacing: normal;
  --text-body: 16px;
  --text-body--line-height: 24px;
  --text-body--letter-spacing: -0.32px;
  --text-link: 16px;
  --text-link--line-height: 24px;
  --text-link--letter-spacing: normal;
  --text-label: 14px;
  --text-label--line-height: 21px;
  --text-label--letter-spacing: -0.28px;
  --text-nav: 14px;
  --text-nav--line-height: 20px;
  --text-nav--letter-spacing: -0.14px;
  --text-button: 14px;
  --text-button--line-height: 22px;
  --text-button--letter-spacing: normal;
  --text-caption: 12px;
  --text-caption--line-height: 16px;
  --text-caption--letter-spacing: -0.24px;
  --text-caption-loose: 12px;
  --text-caption-loose--line-height: 18px;
  --text-caption-loose--letter-spacing: -0.24px;

  --spacing-px: 1px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-18: 72px;
  --spacing-20: 80px;
  --spacing-40: 160px;
  --spacing-50: 200px;

  --radius-indicator: 4px;
  --radius-trigger: 6px;
  --radius-field-button: 8px;
  --radius-control: 10px;
  --radius-card: 12px;
  --radius-panel: 30px;
  --radius-round: 50%;
  --radius-none: 0px;

  --shadow-field: rgba(0, 0, 0, 0.04) 0px 1px 1px 0px;
  --shadow-header: rgba(66, 87, 138, 0.15) 0px 1px 0px 0px;
}
```