---
version: alpha
name: Ramp
description: "Warm paper, a hairline of grey, and one jolt of highlighter yellow."
colors:
  on-surface: "#0C0A08"
  surface: "#FFFFFF"
  outline: "#D2CECB"
  primary: "#E4F222"
  black: "#1A1919"
  warm-grey: "#F4F2F0"
  hushed: "rgba(12, 10, 8, 0.6)"
  hushed-reverse: "rgba(255, 255, 255, 0.6)"
  spring: "#5683D2"
  spring-light: "#E4EBF6"
  mist: "#F2F5F9"
  daylight-top: "#D2DFF3"
  verdant: "#5AB570"
  ash: "#DADADA"
  hairline-ink: "rgba(33, 33, 33, 0.1)"
  consent-slate: "#2B2E35"
typography:
  eyebrow:
    fontFamily: lausanne
    fontSize: 10px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0.18px
  caption-legal:
    fontFamily: lausanne
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: 0em
  body-small-nav:
    fontFamily: lausanne
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  field:
    fontFamily: lausanne
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0em
  body-medium:
    fontFamily: lausanne
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0em
  button-label:
    fontFamily: lausanne
    fontSize: 16px
    fontWeight: 400
    lineHeight: 10.8px
    letterSpacing: 0em
  body-large:
    fontFamily: lausanne
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  stat-description:
    fontFamily: lausanne
    fontSize: 18.9696px
    fontWeight: 400
    lineHeight: 26.0832px
    letterSpacing: 0em
  body-xl:
    fontFamily: lausanne
    fontSize: 20px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0em
  headline-xs:
    fontFamily: lausanne
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  headline-s:
    fontFamily: lausanne
    fontSize: 28px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: 0em
  headline-m:
    fontFamily: lausanne
    fontSize: 40px
    fontWeight: 400
    lineHeight: 42px
    letterSpacing: -0.005px
  headline-l:
    fontFamily: lausanne
    fontSize: 48px
    fontWeight: 400
    lineHeight: 50px
    letterSpacing: -0.01px
  headline-xl:
    fontFamily: lausanne
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -0.01px
  metric:
    fontFamily: lausanne
    fontSize: 72px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -2.88px
  stat-display:
    fontFamily: lausanne
    fontSize: 101.05px
    fontWeight: 400
    lineHeight: 101.05px
    letterSpacing: -7.07347px
rounded:
  micro-affordance: 3px
  counter-chip: 4px
  buttons-nav-items-small-fields: 6px
  list-panel-plan-tier-chip: 8px
  text-input: 10px
  cards-capture-fields-media-frames: 12px
  large-media-frame: 16px
  customer-stats-tile: 29.184px
  circular-affordance: 9999px
spacing:
  3xs: 2.9184px
  2xs: 4px
  xs: 7px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 29.184px
  3xl: 38.4px
  spacer-m: 40px
  spacer-l: 80px
  section: 128px
---
# Ramp — Style Reference

> Warm paper, a hairline of grey, and one jolt of highlighter yellow.

**Theme:** light

Ramp paints a near-white canvas, keeps its ink a warm off-black, and lets a single acid yellow do all the shouting. Two systems share these pages: a warm-neutral marketing system running the home page, the AI cost monitoring page and pricing, and a cool blue system on the customers page alone, where the stats wall swaps warm greys for #5683D2 on #E4EBF6 and trades the tight control radius for a soft 29.184px pillow. Type is lausanne at weight 400 from the caption to the 64px hero — hierarchy comes from scale and ink opacity, not weight — and the signature move is the two-tone headline, a sentence whose second clause drops to the hushed ink at the same size and leading. Structure is drawn with hairlines: #D2CECB rules, and a 1px grid gap that lets a warm grey ground show between white cells. Sections breathe at 128px, controls sit on a 6px radius, cards on 12px, and every page ends in a #1A1919 band that reverses the ink instead of changing the type.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper | `#FFFFFF` | `--color-white` | The canvas, the fill of `.bg-white.spacer-p-t-l.spacer-p-b-l` section blocks, and the ink of every reversed surface. |
| Ink | `#0C0A08` | `--color-text-primary` | Warm off-black. Default text on light, and the hairline on the pricing accordion; a fill only where a divider needs mass. |
| Black | `#1A1919` | `--color-black` | Dark bands, the footer, the dark half of the nav CTA pair. Not the body ink — that is Ink, which is warmer. |
| Solar | `#E4F222` | `--color-solar` | The accent, and the whole of it. Fills the primary action, outlines the featured plan; not a text colour, not a field. |
| Warm Grey | `#F4F2F0` | `--color-grayLight` | Secondary-button fill and the ground behind hairline grids. The quiet alternative when two actions sit together. |
| Rule | `#D2CECB` | `--color-border-primary` | The structural 1px line: comparison rows, dividers, panels, the sticky pricing header. Structure is drawn, not shaded. |
| Hushed | `rgba(12, 10, 8, 0.6)` | `--color-text-hushed` | Ink at sixty. Sub-heads, captions, the second clause of a two-tone headline — the whole secondary-text strategy. |
| Hushed Reverse | `rgba(255, 255, 255, 0.6)` | `--color-text-hushedReverse` | Paper at sixty, for footer links and dark-band copy. Same idea, mirrored. |
| Spring | `#5683D2` | `--color-spring` | The customers page: stat numerals, units, descriptions. A storytelling colour, never a CTA. |
| Spring Light | `#E4EBF6` | `--color-springLight` | Fill of the blue stats tile, against Spring ink at a contrast that reads calm rather than alarming. |
| Mist | `#F2F5F9` | `--color-mist` | Border on the pale stats tiles, lower stop of the daylight gradient. Cool where Rule is warm. |
| Daylight Top | `#D2DFF3` | `--color-daylight-top` | Upper stop of the one gradient painted as a surface: `#D2DFF3 → #F2F5F9` on the customers hero card. |
| Verdant | `#5AB570` | `--color-verdant` | The included-feature icon on the pricing matrix — a semantic tick, deliberately outside the brand palette. |
| Ash | `#DADADA` | `--color-ash` | The excluded-feature icon in the same matrix. Greyed, not red; the table declines to scold. |
| Hairline Ink | `rgba(33, 33, 33, 0.1)` | `--color-black-100` | Border on inputs, capture fields and platform cards, where Rule would be too warm against white. |
| Consent Slate | `#2B2E35` | `--color-consent-slate` | The consent overlay's button fill and panel border, set in Inter. Vendor chrome — do not borrow it. |

## Tokens — Typography

### lausanne — the whole brand voice: display, headings, body, labels, buttons, legal, all at weight 400 · `--font-lausanne`
- **Substitute:** Neue Haas Grotesk Display, Helvetica Now Display, Inter Tight
- **Weights:** 400, 700
- **Sizes:** 10px, 13px, 14px, 15px, 16px, 18px, 18.9696px, 20px, 24px, 28px, 40px, 48px, 64px, 72px, 101.05px
- **Line height:** 10.4px–101.05px absolute; 0.89× at 72px, 1.0× at 64px and 101.05px, 1.04× at 48px, 1.05× at 40px, 1.43× at 14px, 1.46× at 13px
- **Letter spacing:** normal at and below 28px; −0.005px at 40px, −0.01px at 48px and 64px, −2.88px at 72px, −7.07347px at 101.05px; +0.18px on the 10px eyebrow
- **Role:** Every heading row the census measures, 16px through 64px, reads 400. It records a 700 for the family, but no heading or text row paints it — treat 700 as available and unused.

### Inter — the consent overlay's face, and nothing else on these pages · `--font-inter`
- **Substitute:** system-ui, Helvetica Neue, Arial
- **Weights:** 400, 500, 600
- **Sizes:** 14px on the consent buttons (`.fides-banner-button-primary`)
- **Line height:** 1.4em, declared as `--fides-overlay-line-height`
- **Letter spacing:** not measured
- **Role:** Vendor typography in the consent banner, and the one family the census paints above 400 — why it reads as foreign.

### Material Icons / Material Icons Outlined — the pricing matrix glyphs · `--font-icon`
- **Substitute:** Material Symbols Rounded, Phosphor, Lucide
- **Weights:** 400
- **Sizes:** `size-6` on `.box-content.block.size-6.font-iconFill` and `.box-content.block.size-6.font-icon`
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** Two glyph states — filled in Verdant for included, outlined in Ash for excluded. Icons as data, not decoration.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Eyebrow | 10px | 22px | 0.18px | `--text-eyebrow` |
| Caption / legal | 13px | 19px | normal | `--text-body-xs` |
| Body small · nav | 14px | 20px · 14px | normal | `--text-body-s` |
| Field (pricing) | 15px | 22.5px | normal | `--text-field-s` |
| Body medium | 16px | 22px | normal | `--text-body-m` |
| Button label | 16px | 10.8px | normal | `--text-button` |
| Body large | 18px | 24px | normal | `--text-body-l` |
| Stat description | 18.9696px | 26.0832px | normal | `--text-stat-desc` |
| Body XL | 20px | 26px | normal | `--text-body-xl` |
| Headline XS | 24px | 28px | normal | `--text-headline-xs` |
| Headline S | 28px | 32px | normal | `--text-headline-s` |
| Headline M | 40px | 42px | -0.005px | `--text-headline-m` |
| Headline L | 48px | 50px | -0.01px | `--text-headline-l` |
| Headline XL | 64px | 64px | -0.01px | `--text-headline-xl` |
| Metric | 72px | 64px | -2.88px | `--text-metric` |
| Stat display | 101.05px | 101.05px | -7.07347px | `--text-stat` |

## Tokens — Spacing & Shapes

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

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 3xs | 2.9184px | `--spacing-3xs` |
| 2xs | 4px | `--spacing-2xs` |
| xs | 7px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 16px | `--spacing-lg` |
| xl | 24px | `--spacing-xl` |
| 2xl | 29.184px | `--spacing-2xl` |
| 3xl | 38.4px | `--spacing-3xl` |
| spacer-m | 40px | `--spacer-m` *(declared, not painted)* |
| spacer-l | 80px | `--spacer-l` |
| section | 128px | `--spacing-section` |

### Border Radius

| Element | Value |
|---------|-------|
| Micro affordance | 3px |
| Counter chip | 4px |
| Buttons, nav items, small fields | 6px |
| List panel, plan-tier chip | 8px |
| Text input | 10px |
| Cards, capture fields, media frames | 12px |
| Large media frame | 16px |
| Customer stats tile | 29.184px |
| Circular affordance | 9999px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Rim | `rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset` | `--shadow-rim` |

The `<shadows>` block measures one box-shadow across all four pages, on the "Sign in" link.

### Layout
- **Page max-width:** not measured. The census's class names cap the *measure* instead: `max-w-[1050px]` on the h1, `max-w-[960px]` on Headline L, `max-w-[755px]` and `max-w-[656px]` on section heads, `max-w-[531px]` on the lede, `max-w-[500px]` on the capture field, `max-w-[300px]` on card headings.
- **Section gap:** 128px is the rhythm; 120px, 80px, 64px, 62px are the exceptions, plus a 192px column on the customers page.
- **Card padding:** 29.184px on stats tiles, 24px on bordered panels, 8px on the small bordered list, 64px on the personalise panel.
- **Element gap:** 8px default; 24px between grid cells and in the pricing grid, 16px in icon rows, 12px in button groups, 4px in the capture field.

## Components

### Navigation Bar
**Role:** The fixed top rail — word-marks left, three actions right, the same height on every page.
Sits at `--nav-height: calc(62px + var(--nav-banner-height))`, ink on Paper, separated from content by a hairline rather than a shadow. Triggers are `.group.inline-flex.h-11.w-max` buttons: no fill, ink #0C0A08, lausanne 14px/400 with a 14px line-height, padding 0px 12px, radius 6px, no border, no shadow. Plain links use `.group/link.group.inline-flex.h-11` with the same type, padding and radius, on an 8px gap; the line-height set equal to the font size collapses the label box to its cap height. The account link, `"Sign in" .group/link.body-s.body-s.block`, paints fill rgba(255, 255, 255, 0.05), ink #0C0A08, lausanne 14px/400, padding 12px 16px, radius 6px, no border, and carries the one shadow the `<shadows>` block measures: `rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset` — an edge without a border.

### Solar Button
**Role:** The primary action — start, demo, get updates — carrying the accent as a fill.
`.body-m.leading-[.675rem].relative.flex` paints fill #E4F222, ink #0C0A08, lausanne 16px/400 with a 10.8px line-height, padding 0px 20px, radius 6px, border none, shadow none. The wider inline variant `.relative.space-x-2.inline-flex.justify-center` takes fill #E4F222 at padding 16px 16px, same radius; one instance on the AI page pads to 20px 20px. The 10.8px leading is the trick: `leading-[.675rem]` trims the line box below the font size, so a 16px label sits in a short pill. Black on yellow, never white.

### Ink Button
**Role:** The paired dark action that sits beside Solar without competing.
`.group/link.flex.relative.shrink-0` paints fill #1A1919, ink #FFFFFF, lausanne 14px/400 with a 10.4px line-height, padding 12px 16px, radius 6px, border none, shadow none. Its Solar twin uses the identical class and geometry with fill #E4F222 and ink #0C0A08, so the two differ in nothing but colour. A larger inline variant paints fill #1A1919 at padding 20px 20px, radius 6px. Solar reads as the invitation, Ink as the commitment; the geometry refuses to rank them.

### Email Capture Field
**Role:** The recurring conversion unit — one input, one Solar button, one line of consent copy.
The shell `.relative.inline-flex.w-full.max-w-[500px]` paints fill rgba(33, 33, 33, 0.02), border 1px rgba(33, 33, 33, 0.1), radius 12px, shadow none, 4px gap; on dark bands it flips to fill rgba(255, 255, 255, 0.1), border 1px rgba(255, 255, 255, 0.3). The input, `.transition-colors.duration-150.focus:outline-0.focus:ring-white-`, is fill-less, ink #0C0A08, lausanne 16px/400/22px, padding 0px 24px, radius 10px, no border; the pricing variant paints fill rgba(33, 33, 33, 0.02) at 15px/400/22.5px, padding 0px 0px, radius 6px, border 1px rgba(33, 33, 33, 0.1). The 10px inner radius inside the 12px shell is a deliberate 2px concentric step.

### Statistic Eyebrow
**Role:** The live-counter kicker above the home hero — a label, a colon, a number that ticks.
The label is lausanne 10px/400 with a 22px line-height and +0.18px tracking in rgba(12, 10, 8, 0.6), carried by `.leading-trim.body-m.text-hushed.text-[10px]` on `"US corporate payments processed by Ramp:"`. The numeral sits in `.body-xs.rounded.bg-black-50.group-hover:bg-black-100`: a span with fill rgba(33, 33, 33, 0.05), padding 6px 6px, radius 4px, no border, no shadow, type 10px/400/19px at 0.18px. The smallest type in the census, and the one row where tracking goes positive — a micro-label that lets a 64px headline follow with nothing in between.

### Two-Tone Headline
**Role:** The system's rhetorical device — one sentence, two levels of attention, one type size.
A heading paints its first clause in #0C0A08 and continues in rgba(12, 10, 8, 0.6) via a `.text-hushed` span at identical size, weight and leading. The census carries the pair at three scales: 48px/400/50px at −0.01px (`.text-hushed.xl:block`, "One platform for the agentic era."), 40px/400/42px at −0.005px (`.text-hushed`, "Agents for every workflow, working 24/7."), and 28px/400/32px (`.text-hushed`, "growing 3.2x faster than the average American bu"). Opacity carries the emphasis, so the line keeps its optical alignment; a weight or size change would break it. Build it as one text node with an inline span.

### Platform Card
**Role:** The home product tile — a warm panel with a headline, a screenshot, a corner affordance.
`.PlatformCard-module__MXf3fW__root.relative.overflow-hidden.round` paints fill #F4F2F0, ink #0C0A08, lausanne 16px/400, padding 0px 0px, radius 12px, border 1px rgba(33, 33, 33, 0.1), shadow none. The interior media frame is `.group.relative.overflow-hidden.rounded-[12px]` — no fill, radius 12px, no border — and the arrow affordance is `.group.relative.aspect-square.w-full`, a button with fill #FFFFFF, border 1px rgba(26, 25, 25, 0.1), radius 12px, ink #0C0A08. Zero padding on the root: content sets its own inset, so imagery bleeds to the corner radius.

### Hairline Logo Grid
**Role:** The customer logo wall — white cells split by a single hairline, no borders drawn at all.
`.grid.gap-px.overflow-hidden.rounded-[12px]` is a div with fill #F4F2F0, padding 1px 1px, radius 12px, border none, shadow none; its cells are `.absolute.inset-0.bg-white`, fill #FFFFFF, radius 0px, border none. The 1px grid gap lets the warm grey ground show through as the rule, and the 1px container padding closes the frame — a full grid of lines from one fill and one gap. Divider marks nearby use `.inline-block.opacity-40.bg-(--text-primary).h-6`, a solid #0C0A08 bar at forty opacity.

### Customer Stats Tile
**Role:** The customers page proof wall — a scrolling column of numbers, each a claim on a soft tile.
Two variants, not interchangeable. The blue tile `.CustomersStatsWall-module__8TAT3W__card.CustomersStatsWall-modul` paints fill #E4EBF6, padding 29.184px 29.184px, radius 29.184px, border none, shadow none, ink #5683D2; the pale tile paints fill #FDFDFC with border 1px #F2F5F9 at the same padding and radius, ink rgba(12, 10, 8, 0.6). The numeral is lausanne 101.05px/400/101.05px at −7.07347px, the unit 18.9696px/400/18.9696px, the description 18.9696px/400/26.0832px, stacked on a 2.9184px gap and columned on 38.4px. Padding equals radius exactly — a pillow, shaped like nothing else here.

### Plan Tier Chip
**Role:** The label riding the top edge of each pricing card, naming its intelligence tier.
Three boxes, identical geometry, distinct fills: `.label-s.absolute.left-1/2.top-0` paints fill #F4F2F0 for "AI-assisted", #E4F222 for "AI-powered", #1A1919 for "AI-tailored", each at padding 4px 16px, radius 8px, border none, shadow none. The ladder is the message — warm grey for free, Solar for recommended, black for enterprise — and the card beneath the Solar chip is outlined in #E4F222 rather than filled, so the accent brackets the plan without swallowing it. Radius is 8px, not the 6px of buttons: a chip is a label, not a control.

### Feature Comparison Row
**Role:** The pricing matrix — four columns, one feature per line, a tick or dash per plan.
Rows are `.grid.grid-cols-4.items-center.gap-x-2`: no fill, padding 16px 0px, radius 0px, border 1px #D2CECB, shadow none, type 16px/400/24px, on a 24px column gap. The sticky header, `.sticky.top-[var(--nav-height)].z-10.grid`, paints fill #FFFFFF, padding 24px 0px, radius 0px, border 1px #D2CECB. Included features are `.box-content.block.size-6.font-iconFill` in #5AB570; excluded are `.box-content.block.size-6.font-icon` in #DADADA. Group headers are 14px/400/20px in #0C0A08 via `.leading-trim.body-s.mb-1`. Expandable groups use `.flex.flex-1.items-center.justify-between`, a fill-less button at padding 40px 0px with a 1px #0C0A08 border — where the hairline goes full-strength ink.

### Dark Band and Footer
**Role:** The inverse surface — a full-bleed dark block for a statement, and the footer that closes every page.
`.flex.flex-col.py-20.bg-(--bg-color)` paints fill #1A1919, padding 128px 0px, radius 0px, border none, shadow none, on all four pages. Links are lausanne 14px/400/20px in rgba(255, 255, 255, 0.6) — the largest single text row in the census — legal copy is 13px/400/19px in the same ink, emphasis goes to solid #FFFFFF at 14px/20px. Headlines invert to `.headline-s.text-primaryReverse` at 28px/400/32px and `.text-primaryReverse.headline-l` at 48px/400/50px. Nothing about the type changes across the inversion — only the ink and its opacity.

## Do's and Don'ts

### Do
- Set every heading at weight 400 in lausanne and let size carry hierarchy: 64px/64px hero, 48px/50px section heads, then 40px/42px, 28px/32px, 24px/28px.
- Use `rgba(12, 10, 8, 0.6)` for secondary text on light and `rgba(255, 255, 255, 0.6)` on dark. One opacity, both directions.
- Hold controls at 6px radius and cards at 12px; nest a 10px input inside a 12px shell when a field wraps a control.
- Draw structure with a 1px #D2CECB rule, or a 1px grid gap over a #F4F2F0 ground. Both are sharper than a shadow.
- Trim the button line-height below the font size — 10.8px at 16px, 10.4px at 14px — so pills stay short without cramping the label.
- Space sections at 128px and elements at 8px; step to 24px between grid cells.

### Don't
- Don't set #E4F222 as a text colour or a page background. Its census role is a fill on controls and an outline on the featured plan; its rarity is the signal.
- Don't add a box-shadow. The `<shadows>` block measures one value in the whole capture, an inset white rim on the "Sign in" link, and it replaces a border rather than lifting.
- Don't reach for a bolder weight to emphasise a phrase. Drop it to the hushed ink at the same size, in the same line.
- Don't put the 29.184px radius or the #5683D2 / #E4EBF6 pair anywhere but a customer-stats surface; elsewhere it reads as a foreign system, because it is one.
- Don't use #1A1919 as body ink or #0C0A08 as a full-bleed band. The two blacks are not interchangeable — one is text, one is architecture.
- Don't borrow the consent overlay's Inter, `#2B2E35` or `#F7FAFC`. That surface is vendor chrome sitting on top of the system.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Default ground on every page, and the fill of the 128px section blocks. |
| 1 | Warm Grey | `#F4F2F0` | Cards, secondary buttons, the ground behind hairline grids, the free-tier chip. |
| 1 | Chalk | `#FDFDFC` | The pale stats tile — a half-step off Canvas, bordered in Mist. |
| 2 | Spring Light | `#E4EBF6` | The blue stats tile; the most saturated surface in the system. |
| 2 | Warm Panel | `#F4F2EF` | The personalise panel, at 64px padding and a 12px radius. |
| −1 | Inverse | `#1A1919` | Dark bands, footer, the dark CTA. Ink flips to Paper and Hushed Reverse. |

## Elevation

No elevation ladder. Depth is drawn, not cast: a 1px #D2CECB rule for structure, a 1px rgba(33, 33, 33, 0.1) border where a white field meets a white ground, a luminance step from #FFFFFF to #F4F2F0 when a card must detach. The one measured box-shadow — `rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset` on the "Sign in" link — is inset, so it recedes rather than lifts. For foreground the system inverts to #1A1919, or scrims the photography: `rgba(23, 18, 14, 0.2) → 0.6 → 0.82` on the home customer section, `rgba(0, 0, 0, 0.5) → 0.4` on the customers hero card, `rgba(26, 25, 25, 0.8) → 0.4` on the AI page. Contrast, not altitude.

## Imagery

Three registers, cleanly separated. Documentary photography carries the customer stories — real people in real rooms, colour-true, cropped tight, the client's wordmark reversed in white over a black gradient scrim so the caption stays legible. Product UI appears as flat, un-shadowed screenshots on warm grey grounds: dashboards, receipt tables, approval flows, at full fidelity rather than abstracted. A halftone dot field — the AI page's world map, the efficiency panel's matrix — supplies texture where a photograph would be too literal. Logo walls sit in one grey monochrome so no brand out-shouts another. Iconography is thin: Material Icons at 400, mostly the tick and dash of the pricing matrix.

## Layout

Full-bleed sections on a contained measure. Every band runs edge to edge on 128px of vertical padding, with 120px, 80px, 64px and 62px as local exceptions; the measure classes cap content at 1050px, 960px, 755px, 656px, 531px and 500px. The nav is a fixed rail at `62px + var(--nav-banner-height)`, with an announcement strip above it on #1A1919 carrying 14px/400/20px #FFFFFF copy. Grids stay simple: three-up product cards on a 24px gap, a four-column pricing matrix on a 24px column gap under a sticky #FFFFFF header bordered in #D2CECB, vertical stats columns on 38.4px. The customers page is where the second system lives — 29.184px tiles, the Spring palette, 101.05px numerals — and it does not leak into the marketing pages.

## Typography Voice

Two modes, little between them. Display mode is 40px and up, always tracked in: −0.005px at 40px, −0.01px at 48px and 64px, −2.88px at 72px, −7.07347px at the 101.05px stat — the larger the type, the harder it is pulled together, so a headline reads as one object, not a row of words. Leading tightens in step, 1.05× at 40px to 1.0× at 64px and 0.89× at 72px. Utility mode is 20px and down, tracked normal and leaded generously — 14px on 20px, 13px on 19px, 16px on 22px — sizes meant to be read, not seen. The eyebrow inverts both rules: 10px type on a 22px line at +0.18px. Buttons take a third treatment, `leading-trim` crushing the line box to 10.8px at 16px and 10.4px at 14px. Weight holds still, size changes constantly, opacity does the emphasis.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF`
- text: `#0C0A08`
- surface: `#F4F2F0`
- border: `#D2CECB`
- accent: `#E4F222`
- primary action: `#E4F222` with `#0C0A08` ink

## Example Component Prompts
1. **Solar Button**: Fill `#E4F222`, ink `#0C0A08`, lausanne 16px/400, line-height 10.8px, padding 0 20px, radius 6px, no border, no shadow. Wide variant: padding 16px 16px.
2. **Nav Bar**: A fixed rail 62px tall on `#FFFFFF`. Left: wordmark plus six triggers at lausanne 14px/400/14px, ink `#0C0A08`, padding 0 12px, radius 6px, no fill, 8px gap. Right: a "Sign in" link, fill `rgba(255,255,255,0.05)`, padding 12px 16px, radius 6px, inset shadow `rgba(255,255,255,0.6) 0 0 2px 0`; then a `#E4F222` button and a `#1A1919`/`#FFFFFF` button, both 14px/400/10.4px, padding 12px 16px, radius 6px.
3. **Email Capture**: A 500px-max shell, fill `rgba(33,33,33,0.02)`, border 1px `rgba(33,33,33,0.1)`, radius 12px, gap 4px. Inside: a transparent input, ink `#0C0A08`, lausanne 16px/400/22px, padding 0 24px, radius 10px, no border; a `#E4F222` button flush right. On dark, shell fill `rgba(255,255,255,0.1)`, border 1px `rgba(255,255,255,0.3)`.
4. **Feature Comparison Row**: A 4-column grid, 24px column gap, padding 16px 0, no fill, 1px `#D2CECB` bottom border, lausanne 16px/400/24px. Column one names the feature; columns two to four carry a filled Material Icon tick in `#5AB570` or an outlined icon in `#DADADA`. Header sticks below the nav, fill `#FFFFFF`, padding 24px 0, 1px `#D2CECB` border.
5. **Two-Tone Section Head**: One h2 at lausanne 48px/400/50px, letter-spacing −0.01px. First clause `#0C0A08`; second clause in an inline span at `rgba(12,10,8,0.6)`, same size, weight and leading. Cap the measure at 960px, centred.

## Similar Brands
- **Mercury** — a warm off-white banking canvas held by hairline rules and one restrained accent, with the same refusal to use shadow as structure.
- **Wise** — a near-fluorescent accent kept to fills and never to type, over a neutral ground and an oversized neo-grotesque.
- **Vercel** — monochrome surfaces, a hairline-first grid, hierarchy built from size rather than weight.
- **Linear** — one saturated colour against an otherwise achromatic ladder, and the same trust in a single tight radius vocabulary.
- **Vitsœ** — shadowless, rule-drawn layouts and single-weight type: the analogue ancestor of this page.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-white: #FFFFFF;
  --color-text-primary: #0C0A08;
  --color-black: #1A1919;
  --color-solar: #E4F222;
  --color-grayLight: #F4F2F0;
  --color-border-primary: #D2CECB;
  --color-warm-panel: #F4F2EF;
  --color-chalk: #FDFDFC;
  --color-mist: #F2F5F9;
  --color-daylight-top: #D2DFF3;
  --color-spring: #5683D2;
  --color-springLight: #E4EBF6;
  --color-verdant: #5AB570;
  --color-ash: #DADADA;
  --color-consent-slate: #2B2E35;
  --color-consent-surface: #F7FAFC;
  --color-text-hushed: rgba(12, 10, 8, 0.6);
  --color-text-hushedReverse: rgba(255, 255, 255, 0.6);
  --color-black-25: rgba(33, 33, 33, 0.02);
  --color-black-50: rgba(33, 33, 33, 0.05);
  --color-black-100: rgba(33, 33, 33, 0.1);
  --color-black-200: rgba(33, 33, 33, 0.2);
  --color-white-50: rgba(255, 255, 255, 0.05);
  --color-white-100: rgba(255, 255, 255, 0.1);
  --color-white-300: rgba(255, 255, 255, 0.3);
  --gradient-daylight: linear-gradient(to bottom, #D2DFF3, #F2F5F9);
  --gradient-photo-scrim: linear-gradient(to bottom, rgba(23,18,14,0.2), rgba(23,18,14,0.6), rgba(23,18,14,0.82));

  /* Typography — Families */
  --font-lausanne: 'lausanne', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-icon: 'Material Icons', 'Material Icons Outlined', sans-serif;

  /* Typography — Scale */
  --text-eyebrow: 10px;       --leading-eyebrow: 22px;      --tracking-eyebrow: 0.18px;
  --text-body-xs: 13px;       --leading-body-xs: 19px;
  --text-body-s: 14px;        --leading-body-s: 20px;
  --text-nav: 14px;           --leading-nav: 14px;
  --text-field-s: 15px;       --leading-field-s: 22.5px;
  --text-body-m: 16px;        --leading-body-m: 22px;
  --text-body: 16px;          --leading-body: 24px;
  --text-button: 16px;        --leading-button: 10.8px;
  --text-button-s: 14px;      --leading-button-s: 10.4px;
  --text-body-l: 18px;        --leading-body-l: 24px;
  --text-stat-desc: 18.9696px;--leading-stat-desc: 26.0832px;
  --text-body-xl: 20px;       --leading-body-xl: 26px;
  --text-headline-xs: 24px;   --leading-headline-xs: 28px;
  --text-headline-s: 28px;    --leading-headline-s: 32px;
  --text-headline-m: 40px;    --leading-headline-m: 42px;   --tracking-headline-m: -0.005px;
  --text-headline-l: 48px;    --leading-headline-l: 50px;   --tracking-headline-l: -0.01px;
  --text-headline-xl: 64px;   --leading-headline-xl: 64px;  --tracking-headline-xl: -0.01px;
  --text-metric: 72px;        --leading-metric: 64px;       --tracking-metric: -2.88px;
  --text-stat: 101.05px;      --leading-stat: 101.05px;     --tracking-stat: -7.07347px;

  /* Spacing */
  --spacing-3xs: 2.9184px;
  --spacing-2xs: 4px;
  --spacing-xs: 7px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 29.184px;
  --spacing-3xl: 38.4px;
  --spacer-m: 40px;
  --spacer-l: 80px;
  --spacing-section: 128px;
  --nav-banner-height: 0px;
  --nav-height: calc(62px + var(--nav-banner-height));

  /* Border Radius */
  --radius-micro: 3px;
  --radius-chip: 4px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-input: 10px;
  --radius-card: 12px;
  --radius-media: 16px;
  --radius-tile: 29.184px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-rim: rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset;
}
```

### Tailwind v4
```css
@theme {
  --color-white: #FFFFFF;
  --color-text-primary: #0C0A08;
  --color-black: #1A1919;
  --color-solar: #E4F222;
  --color-gray-light: #F4F2F0;
  --color-border-primary: #D2CECB;
  --color-warm-panel: #F4F2EF;
  --color-chalk: #FDFDFC;
  --color-mist: #F2F5F9;
  --color-daylight-top: #D2DFF3;
  --color-spring: #5683D2;
  --color-spring-light: #E4EBF6;
  --color-verdant: #5AB570;
  --color-ash: #DADADA;
  --color-consent-slate: #2B2E35;
  --color-consent-surface: #F7FAFC;
  --color-text-hushed: rgba(12, 10, 8, 0.6);
  --color-text-hushed-reverse: rgba(255, 255, 255, 0.6);
  --color-black-25: rgba(33, 33, 33, 0.02);
  --color-black-50: rgba(33, 33, 33, 0.05);
  --color-black-100: rgba(33, 33, 33, 0.1);
  --color-black-200: rgba(33, 33, 33, 0.2);
  --color-white-50: rgba(255, 255, 255, 0.05);
  --color-white-100: rgba(255, 255, 255, 0.1);
  --color-white-300: rgba(255, 255, 255, 0.3);

  --font-lausanne: 'lausanne', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-icon: 'Material Icons', 'Material Icons Outlined', sans-serif;

  --text-eyebrow: 10px;        --text-eyebrow--line-height: 22px;       --text-eyebrow--letter-spacing: 0.18px;
  --text-body-xs: 13px;        --text-body-xs--line-height: 19px;
  --text-body-s: 14px;         --text-body-s--line-height: 20px;
  --text-nav: 14px;            --text-nav--line-height: 14px;
  --text-field-s: 15px;        --text-field-s--line-height: 22.5px;
  --text-body-m: 16px;         --text-body-m--line-height: 22px;
  --text-body: 16px;           --text-body--line-height: 24px;
  --text-button: 16px;         --text-button--line-height: 10.8px;
  --text-button-s: 14px;       --text-button-s--line-height: 10.4px;
  --text-body-l: 18px;         --text-body-l--line-height: 24px;
  --text-stat-desc: 18.9696px; --text-stat-desc--line-height: 26.0832px;
  --text-body-xl: 20px;        --text-body-xl--line-height: 26px;
  --text-headline-xs: 24px;    --text-headline-xs--line-height: 28px;
  --text-headline-s: 28px;     --text-headline-s--line-height: 32px;
  --text-headline-m: 40px;     --text-headline-m--line-height: 42px;    --text-headline-m--letter-spacing: -0.005px;
  --text-headline-l: 48px;     --text-headline-l--line-height: 50px;    --text-headline-l--letter-spacing: -0.01px;
  --text-headline-xl: 64px;    --text-headline-xl--line-height: 64px;   --text-headline-xl--letter-spacing: -0.01px;
  --text-metric: 72px;         --text-metric--line-height: 64px;        --text-metric--letter-spacing: -2.88px;
  --text-stat: 101.05px;       --text-stat--line-height: 101.05px;      --text-stat--letter-spacing: -7.07347px;

  --spacing-3xs: 2.9184px;
  --spacing-2xs: 4px;
  --spacing-xs: 7px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 29.184px;
  --spacing-3xl: 38.4px;
  --spacing-spacer-m: 40px;
  --spacing-spacer-l: 80px;
  --spacing-section: 128px;
  --spacing-nav: 62px;

  --radius-micro: 3px;
  --radius-chip: 4px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-input: 10px;
  --radius-card: 12px;
  --radius-media: 16px;
  --radius-tile: 29.184px;
  --radius-full: 9999px;

  --shadow-rim: rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset;
}
```