---
version: alpha
name: Devin
description: "Warm paper, hairline ink, and one electric-blue word per headline."
colors:
  on-surface: "#191919"
  surface: "#F7F6F5"
  primary: "#2200FF"
  tile: "#EFEFEF"
  band: "#E7E7E7"
  card: "#FFFFFF"
  wash: "#FCFCFC"
  void: "#000000"
  bento-dark: "#1F1F1F"
  night: "#141414"
  link-blue: "#317CFF"
  slate: "#818F9A"
  ink-secondary: "rgba(25, 25, 25, 0.56)"
  ink-disabled: "rgba(25, 25, 25, 0.4)"
  hairline: "rgba(0, 0, 0, 0.1)"
  tint: "rgba(0, 0, 0, 0.08)"
typography:
  mono-caption:
    fontFamily: geistMono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0.36px
  mono-field-label:
    fontFamily: geistMono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: -0.12px
  nav-label:
    fontFamily: nbInternationalPro
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0em
  pill-label:
    fontFamily: nbInternationalPro
    fontSize: 15px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: 0em
  body:
    fontFamily: nbInternationalPro
    fontSize: 15.9997px
    fontWeight: 400
    lineHeight: 23.9995px
    letterSpacing: 0em
  body-compact:
    fontFamily: nbInternationalPro
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0em
  faq-question:
    fontFamily: nbInternationalPro
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  deck:
    fontFamily: nbInternationalPro
    fontSize: 24px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: 0em
  card-heading:
    fontFamily: nbInternationalPro
    fontSize: 26.3992px
    fontWeight: 400
    lineHeight: 33.0392px
    letterSpacing: -0.527985px
  band-heading:
    fontFamily: nbInternationalPro
    fontSize: 30px
    fontWeight: 400
    lineHeight: 37.5px
    letterSpacing: 0em
  plan-name:
    fontFamily: nbInternationalPro
    fontSize: 32px
    fontWeight: 400
    lineHeight: 38.4px
    letterSpacing: -0.64px
  stat-light:
    fontFamily: nbInternationalPro
    fontSize: 36px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.72px
  product-heading:
    fontFamily: nbInternationalPro
    fontSize: 40px
    fontWeight: 400
    lineHeight: 41.6px
    letterSpacing: -1.2px
  product-display:
    fontFamily: nbInternationalPro
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -1.92px
  marketing-display:
    fontFamily: nbInternationalPro
    fontSize: 64px
    fontWeight: 400
    lineHeight: 74.4px
    letterSpacing: -2.56px
  hero:
    fontFamily: nbInternationalPro
    fontSize: 70.4px
    fontWeight: 400
    lineHeight: 70.4px
    letterSpacing: -2.816px
rounded:
  text-button-nav-cta: 2px
  pricing-card-faq-panel-popular-badge: 4px
  carousel-arrow: 9.6px
  hero-figure: 10px
  story-card-footer-stat-block: 12px
  fluid-card-stack: 14.1421px
  story-image-well: 15px
  logo-tile-bento-card-enterprise-panel: 16px
  nav-link-pill: 200px
  filter-pill: 9999px
spacing:
  3xs: 4px
  2xs: 6px
  xs: 8px
  xs-fluid: 9.42816px
  sm: 10px
  grid-col: 19.2px
  md: 24px
  lg: 32px
  xl: 36px
  2xl: 40px
  section-sm: 56.5718px
  section-md: 113.142px
  section-lg: 188px
  section-lg-fluid: 188.572px
  section-xl: 226.286px
---
# Devin — Style Reference

> Warm paper, hairline ink, and one electric-blue word per headline.

**Theme:** light

Two systems share one canvas here. The marketing pages — the home page and the customer stories — run a `legacy-`prefixed scale: bands of vertical padding measured in hundreds of pixels, soft #EFEFEF tiles at 16px radius, and display type at weight 500 dragged to −2.56px tracking so the words close ranks. The pricing and demo pages run a `dt-` product scale instead: white cards at 4px radius over rgba(0, 0, 0, 0.08) hairlines, uppercase geistMono micro-labels, and headings that drop to weight 400 and a looser −1.92px. Both sit on the same warm off-white #F7F6F5 and the same near-black #191919 ink, so the seam passes unnoticed — the split is in the radius vocabulary and the heading weight, not the palette. The signature move is chromatic thrift: #2200FF appears at display size on a single phrase inside a headline and almost nowhere else, so a blue word reads as emphasis rather than decoration. Nothing in the capture paints a box-shadow; depth is a luminance ladder from paper to tile to card to black band.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#191919` | `--color-ink` | Body, headings, nav and the filled button. Never lightened for hierarchy — the opacity ladder below does that job. |
| Canvas | `#F7F6F5` | `--color-canvas` | Warm off-white ground on `body`, `nav` and `footer`. A section that is not another colour is this one. |
| Tile | `#EFEFEF` | `--color-tile` | First step up from canvas: home-page logo tiles, customer story cards. A tint, not a card — it carries no border. |
| Band | `#E7E7E7` | `--color-band` | Full-bleed band behind Use cases (`.bg-legacy-primary-04`), and the ink for headings set on the dark bands — the same value inverted by context. |
| Card | `#FFFFFF` | `--color-card` | Reserved for pricing plan cards. The only fill brighter than canvas, which makes a plan read as a document rather than a panel. |
| Wash | `#FCFCFC` | `--color-wash` | Barely-there fill on the filter pills. Reads as "outlined" and is really an off-white — the border does the work. |
| Void | `#000000` | `--color-void` | FAQ panel fill and story-card image well. The deepest plane, used sparingly. |
| Bento Dark | `#1F1F1F` | `--color-bento` | Card fill inside the dark band (`.bg-legacy-bento-dark`) — raised on black without a shadow. |
| Night | `#141414` | `--color-night` | The full-height dark home-page band, and the COLLABORATE chip inside it. One luminance step below Bento Dark. |
| Electric Blue | `#2200FF` | `--color-electric` | Display-size accent on a headline's highlighted word, the "Learn about Devin Review" link, the carousel arrow. Never a page background, never a card fill. |
| Link Blue | `#317CFF` | `--color-accent` | Product-side link ink on the pricing announcement bar, in mono uppercase. Distinct from Electric Blue. |
| Slate | `#818F9A` | `--color-slate` | Customer names above story titles. The one hue-shifted grey — it makes a company name read as metadata. |
| Ink / Secondary | `rgba(25, 25, 25, 0.56)` | `--color-ink-secondary` | Subheads, deck copy, eyebrow labels. The site's `--text-secondary`; use opacity, not a lighter grey. |
| Ink / Disabled | `rgba(25, 25, 25, 0.4)` | `--color-ink-disabled` | Compare-table prices, tooltip text, form labels. The bottom rung of the ink ladder. |
| Hairline | `rgba(0, 0, 0, 0.1)` | `--color-hairline` | The structural rule: compare-plan separators, container edges, input outlines. The site's `--border-primary`. |
| Tint | `rgba(0, 0, 0, 0.08)` | `--color-tint` | Pricing card border and enterprise panel fill both. One token, two jobs, no third grey needed. |

## Tokens — Typography

### nbInternationalPro — the whole voice: display, headings, nav, body, buttons and labels · `--font-heading` / `--font-body`
- **Substitute:** Neue Haas Grotesk Display, Inter Tight, Helvetica Now Display
- **Weights:** 300, 400, 500
- **Sizes:** 14px, 15px, 15.9997px, 16px, 20px, 24px, 26.3992px, 30px, 32px, 36px, 40px, 64px, 70.4px
- **Line height:** 15px on a pill label up to 74.4px on the 64px marketing display — 0.94× to 1.5× depending on role
- **Letter spacing:** negative and growing with size: −0.527985px at 26.3992px, −1.92px at 64px, −2.816px at 70.4px; body and nav sit at `normal`
- **Role:** One grotesque runs everything. Hierarchy comes from size and tracking, not from family contrast — the marketing display sets weight 500, the product display weight 400, and 300 appears only on the customer-stat line `"8 months to 8 days"`.

### geistMono — uppercase micro-labels: pricing captions, section eyebrows, form field labels · `--font-mono`
- **Substitute:** Geist Mono, JetBrains Mono, IBM Plex Mono
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** 16.8px (1.4×) on pricing captions; 18px (1.5×) on form labels
- **Letter spacing:** +0.36px on the pricing caption, −0.12px on the form label — the same size tuned in opposite directions
- **Role:** The system's only second face, and it is never used above 12px. It marks machine metadata — `"per month"`, `"INDIVIDUAL PLANS"`, `"FIRST NAME"` — so the grotesque never has to signal "technical".

### -apple-system — inherited system stack on unstyled runs · `--font-system`
- **Substitute:** system-ui, BlinkMacSystemFont, Segoe UI
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** Present in the inventory as the platform fallback under the two brand faces; not a design choice to reproduce.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Mono caption | 12px | 16.8px | 0.36px | `--text-caption` |
| Mono field label | 12px | 18px | −0.12px | `--text-label-mono` |
| Nav / label | 14px | 19.6px | normal | `--text-label` |
| Pill label | 15px | 15px | normal | `--text-pill` |
| Body | 15.9997px | 23.9995px | normal | `--text-body` |
| Body compact | 16px | 22.4px | normal | `--text-body-compact` |
| FAQ question | 20px | 24px | normal | `--text-question` |
| Deck | 24px | 36px | normal | `--text-deck` |
| Card heading | 26.3992px | 33.0392px | −0.527985px | `--text-h4` |
| Band heading | 30px | 37.5px | normal | `--text-h3` |
| Plan name | 32px | 38.4px | −0.64px | `--text-h2-alt` |
| Stat / light | 36px | 36px | −0.72px | `--text-stat` |
| Product heading | 40px | 41.6px | −1.2px | `--text-h2` |
| Product display | 64px | 64px | −1.92px | `--text-display-product` |
| Marketing display | 64px | 74.4px | −2.56px | `--text-display` |
| Hero | 70.4px | 70.4px | −2.816px | `--text-hero` |

## Tokens — Spacing & Shapes

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

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 3xs | 4px | `--spacing-3xs` |
| 2xs | 6px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| xs-fluid | 9.42816px | `--spacing-xs-fluid` |
| sm | 10px | `--spacing-sm` |
| grid-col | 19.2px | `--spacing-grid-col` |
| md | 24px | `--spacing-md` |
| lg | 32px | `--spacing-lg` |
| xl | 36px | `--spacing-xl` |
| 2xl | 40px | `--spacing-2xl` |
| section-sm | 56.5718px | `--spacing-section-sm` |
| section-md | 113.142px | `--spacing-section-md` |
| section-lg | 188px | `--spacing-section-lg` |
| section-lg-fluid | 188.572px | `--spacing-section-lg-fluid` |
| section-xl | 226.286px | `--spacing-section-xl` |

### Border Radius

| Element | Value |
|---------|-------|
| Text button, nav CTA | 2px |
| Pricing card, FAQ panel, POPULAR badge | 4px |
| Carousel arrow | 9.6px |
| Hero figure | 10px |
| Story card, footer, stat block | 12px |
| Fluid card stack | 14.1421px |
| Story image well | 15px |
| Logo tile, bento card, enterprise panel | 16px |
| Nav link pill | 200px |
| Filter pill | 9999px |

### Shadows

The walk records `box-shadow` on every element and the captured pages paint none — the value on all four pages, on cards, panels, buttons and nav alike, is `none`. The site declares `--shadow-L1` through `--shadow-L4` and `--shadow-inner` on `:root` *(declared, not painted)*. Build with fills and hairlines; a drop shadow is off-system.

### Layout

- **Page max-width:** 1440px (`.w-full.max-w-[1440px].mx-auto.px-5`, and the nav's `.flex.items-center.justify-between.max-w-[1440px]`)
- **Section gap:** 188.572px on the marketing bands, 188px flat on the product pages, 226.286px on the dark band, 113.142px on the tighter marketing sections
- **Card padding:** 24px on the pricing card, 36px on the FAQ panel, 56.5718px × 47.1424px on the enterprise panel, 4px top on the logo tile
- **Element gap:** 8px is the default; 24px inside compare rows, 10px in wrapped chip rows, 4px between nav pills

## Components

### Sticky Nav Bar
**Role:** The one persistent chrome element — brand mark, five link pills, and two right-side actions.

`.fixed.top-0.left-0.right-0` measures twice: on the marketing pages `nav` paints fill #F7F6F5, radius 0px, border none, shadow none, inherited text 17.9997px/400/26.9995px; on the product pages the same class paints fill #F7F6F5, radius 0px, border none, shadow none, text 16px/400/24px. The bar is the colour of the page beneath it and separates by nothing — no border, no shadow, no blur. Content clamps to `.flex.items-center.justify-between.max-w-[1440px]`. Reproduce the flatness; add a rule under this nav and the system stops being a sheet of paper.

### Nav Link Pill
**Role:** Top-level navigation item, sized to be tapped rather than underlined.

`.flex.items-center.h-[27px].pt-[6px]` measures two ways: as `a` it carries ink #191919 at 14px/400/19.6px/normal, padding 6px 12px, radius 200px, border none, shadow none — sample text `"Customers"`; as `button`, the dropdown triggers, the same geometry appears with ink not measured. Radius 200px on a 27px-tall box is a full round in disguise. The pills sit 4px apart, so the row reads as one strip until a hover isolates one.

### Nav Buttons
**Role:** The paired right-hand actions — one outlined, one filled — that end every page's nav.

`.inline-flex.box-border.items-center.justify-center` measures twice. Outlined: fill none, ink #191919, 14px/400/19.6px, padding 5px 11px, radius 2px, border 1px #191919, shadow none — sample text `"Download"`. Filled: fill #191919, ink #FFFFFF, 14px/400/19.6px, padding 6px 12px, radius 2px, border none, shadow none — sample text `"Log in"`. The 1px padding difference is the border being absorbed, so the two boxes measure identically on screen. Note the radius: 2px, not a pill, beside nav links that are 200px round.

### Primary Action Button
**Role:** The page's committing action — try, start, select, get a demo.

`.font-heading.font-normal.leading-[1.4].[text-box:normal]` paints fill #191919, ink #FFFFFF, 16px/400/24px, padding 6px 12px, radius 2px, border none, shadow none. Its sibling `.font-heading.font-normal.[text-box:normal].box-border` measures both ways: filled #191919 with ink #FFFFFF at padding 6px 12px, and outlined with fill none, border 1px #191919, padding 5px 11px. There is no coloured CTA here — the census gives #2200FF seven fills, and they are `.legacy-text-gradient` and the arrow at `.absolute.top-1/2.z-[2].h-full`, never a text button. Black is the action colour; blue is voice.

### Gradient Wordmark
**Role:** The single word inside a headline that carries the emphasis.

`.legacy-text-gradient` paints a `span` with fill #2200FF at 64px/500/74.4px/−2.56px, radius 0px, border none, shadow none — sample text `"Devin"`. It rides inside the surrounding `h2` and inherits its metrics exactly, so the colour break is the only break. The restraint is the point: one span per headline, the rest of the line #191919. On the dark band the same trick runs with `"together"` in blue against #E7E7E7 heading ink.

### Logo Tile
**Role:** The customer-logo grid cell on the home page.

`.flex.items-center.justify-center.overflow-hidden` paints `div` with fill #EFEFEF, padding 4px 0px, radius 16px, border none, shadow none. Logos sit greyed inside — no brand colour, no white plate, no border. A 16px radius and a single luminance step off canvas do all the containing, and that step is small enough that the grid reads as texture rather than as separate cards. Keep the marks monochrome or the band breaks.

### Filter Pill
**Role:** Use-case filter on the customer stories page.

`.inline-flex.cursor-pointer.items-center.gap-2` paints `button` with fill #FCFCFC, ink #191919, 15px/400/15px/normal, padding 10px 20px, radius 9999px, border 1px rgba(0, 0, 0, 0.15), shadow none — sample text `"Testing & QA Automation"`. Line-height equal to font-size makes the pill sit tightly around its label. Its border is rgba(0, 0, 0, 0.15), heavier than the rgba(0, 0, 0, 0.1) hairline, because a control must out-contrast a rule.

### Customer Story Card
**Role:** A linked case study: full-bleed art, company name, headline.

`.group/card.relative.overflow-hidden.rounded-xl` paints `div` with fill #EFEFEF, radius 12px, border none, shadow none, inherited text 17.9997px/400/26.9995px. Its image well is a separate row — `.relative.overflow-hidden.rounded-[15px].pb-[133.333%]`, radius 15px, border none, shadow none — a 3:4 portrait crop holding a dark saturated abstract with the customer's wordmark reversed out in white. Above the title the company name runs 15.9997px/400/23.9995px in Slate #818F9A. The 15px well inside a 12px card is a measured mismatch; keep it — it stops the art reading as pasted in.

### Dark Bento Card
**Role:** A product-capability panel living inside the dark home-page band.

`.relative.overflow-hidden.rounded-2xl.bg-legacy-bento-dark` paints `div` with fill #1F1F1F, radius 16px, border none, shadow none. It sits on the #141414 band — a luminance step of eleven units, no border, no shadow, doing all the separation. Headings inside run 30px/500/37.5px/normal in #E7E7E7; the `"Collaborate"` chip uses fill #141414 at radius 5px, so the chip recedes into the band while the card advances. The elevation grammar at its narrowest.

### Pricing Plan Card
**Role:** One purchasable plan: name, price, action, feature list.

`.bg-dt-white.border.border-black/8.rounded` paints `div` with fill #FFFFFF, ink inherited at 16px/400/24px, padding 24px 24px, radius 4px, border 1px rgba(0, 0, 0, 0.08), shadow none, internal gap 36px. Inside, the plan name sets 32px/400/38.4px/−0.64px in rgba(0, 0, 0, 0.4) while the price sets 64px/400/64px/−1.92px in #191919 — price loud, label deliberately faded, an inversion of the usual card hierarchy. The `"POPULAR"` badge is a geistMono 12px/16.8px/+0.36px uppercase span at radius 4px on rgba(51, 125, 244, 0.1), ink not measured. Feature rows sit on `.flex.items-center.gap-2.py-3`: padding 12px 0px, a 1px rgba(0, 0, 0, 0.08) rule.

### FAQ Panel
**Role:** The dark accordion that closes the pricing page.

`.bg-dt-surface.border.border-black/8.rounded` paints `div` with fill #000000, padding 36px 36px, radius 4px, border 1px rgba(0, 0, 0, 0.08), shadow none. Each question row is `.border-t.border-white/12.pt-10.cursor-pointer` — padding 40px 0px, radius 0px, border 1px rgba(255, 255, 255, 0.12), shadow none — question at 20px/400/24px in #E7E7E7, thin plus glyph at the right edge. The note above the rows sets 16px in rgba(255, 255, 255, 0.56). A pure-black panel at 4px radius on a warm off-white page is the loudest gesture the product system permits itself.

### Demo Form Field
**Role:** A single input in the demo request form.

`.min-w-0.w-full.bg-dt-tint.border-0` paints `input` with fill rgba(0, 0, 0, 0.04), 15px/400/22.5px/normal, padding 8px 12px, radius 0px, border 1px rgba(0, 0, 0, 0.1), shadow none. Square corners beside 2px buttons and 4px cards make the field the sharpest object in the system. Its label sits above in geistMono 12px/400/18px/−0.12px uppercase at rgba(25, 25, 25, 0.4); the submit control is the filled `.font-heading.font-normal.[text-box:normal].box-border` button at padding 6px 12px, radius 2px.

## Do's and Don'ts

### Do
- Ground every page on `#F7F6F5` and set ink `#191919`; step to `#EFEFEF` for a tint, and reach for `#FFFFFF` where the pricing card does — all five `#FFFFFF` fills in the census belong to `.bg-dt-white.border.border-black/8.rounded`.
- Fade text with the opacity ladder — `rgba(25, 25, 25, 0.56)` then `rgba(25, 25, 25, 0.4)` — rather than reaching for a lighter grey.
- Tighten tracking as type grows: −0.527985px at 26.3992px, −1.92px at 64px, −2.816px at 70.4px.
- Keep `#2200FF` to one span per headline, matching the surrounding heading's size, weight and tracking exactly.
- Use geistMono at 12px uppercase for machine labels; the census paints the family at one size, in `.text-[12px].leading-[1.4].tracking-[0.03em].uppercase` (`"per month"`) and `.font-mono-alt.text-[12px].tracking-[-0.12px].uppercase` (`"First Name"`).
- Separate planes with fills: canvas → `#EFEFEF` → `#FFFFFF`, and `#141414` → `#1F1F1F` on the dark side.
- Match the radius to the system you are in: 16px and 12px on the marketing pages, 4px and 2px on the product pages.

### Don't
- Don't add a `box-shadow`. The census records `box-shadow` on every element across all four pages and the painted value is `none` everywhere — the declared `--shadow-L1`–`--shadow-L4` are unused.
- Don't tint a button. Filled actions are `#191919` with `#FFFFFF` ink at radius 2px on `.font-heading.font-normal.leading-[1.4].[text-box:normal]`; Electric Blue is not a button fill on any captured page.
- Don't put a border under the nav. `.fixed.top-0.left-0.right-0` paints border none on both its marketing and product variants.
- Don't set a weight above 500. The heaviest row in the heading census is 500, on `.mb-fl-l.text-center.font-heading.text-legacy-h1` (`"Devin, the AIsoftware engineer"`); the family census lists 300, 400 and 500 for nbInternationalPro and 400 for geistMono.
- Don't round the form fields. `.min-w-0.w-full.bg-dt-tint.border-0` paints radius 0px, and the squareness is the product system's signature.
- Don't mix `#2200FF` and `#317CFF` on one page; the marketing blue and the product link blue live on separate pages in the capture.
- Don't add a third grey. `rgba(0, 0, 0, 0.08)` already serves as both the card border and the enterprise-panel fill.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#F7F6F5` | Body, nav and footer ground on every page |
| 1 | Tile | `#EFEFEF` | Logo tiles and story cards — a tint with no border |
| 1b | Tint | `rgba(0, 0, 0, 0.08)` | Enterprise panel fill at 16px radius |
| 2 | Band | `#E7E7E7` | Full-bleed Use cases band |
| 3 | Card | `#FFFFFF` | Pricing plan cards, with a `rgba(0, 0, 0, 0.08)` border |
| −1 | Night | `#141414` | Full-height dark marketing band |
| −2 | Bento | `#1F1F1F` | Cards raised on the dark band |
| −3 | Void | `#000000` | FAQ panel and story image wells |

## Elevation

There is no elevation in the shadow sense — the shadow record is empty on the pricing card, the FAQ panel, the nav and every button alike. Depth is a luminance ladder plus a hairline. On the light side: #F7F6F5 → #EFEFEF → #FFFFFF, a swing of eight luminance units, with a raised object earning a 1px rgba(0, 0, 0, 0.08) border rather than a lift. On the dark side: #141414 → #1F1F1F, borderless. Surfaces read as paper laid on paper, which is why a shadow anywhere would look imported.

## Imagery

Two registers. The marketing pages run product-UI screenshots at near-full-bleed — the agent session view, the automation builder, the knowledge card — dark inside the dark band and light on canvas, framed at radius 10px on the hero figure and 16px on the tiles, cropped so the interface edge runs off-frame. The stories page runs abstract saturated art: dark-green, blue and greyscale gradient fields at a 3:4 portrait crop inside a 15px-radius well, each customer's wordmark reversed out in white and centred. The one photographic frame is a video still of two people in conversation. Customer logos appear greyed inside #EFEFEF tiles. No stock photography, no illustration, no 3D; icons are thin monochrome line marks at nav and list scale.

## Layout

Contained, not full-bleed: content clamps to 1440px via `.w-full.max-w-[1440px].mx-auto.px-5`, and only the coloured bands run edge to edge. Section rhythm is enormous and fluid on the marketing side — 188.572px of vertical padding on the Use cases band and the footer, 226.286px on the dark band, 113.142px on tighter sections — and flat on the product side, where `.dt-page.bg-dt-bg.text-dt-text.font-body` pays a plain 188px. Grids run three-up for use-case cards, four-up for story cards, five-up for logo tiles, with a 19.2px column gap on `.legacy-grid`. Nav is fixed, flat and identical across both systems. The footer at `.rounded-xl.bg-[rgb(var(--bg-page))].pt-fl-4xl.pb-[calc(var(--con` is canvas-coloured at 12px radius — it rounds itself off the page rather than sitting as a dark slab.

## Typography Voice

The two modes are weight-and-tracking pairs, not two families. Marketing display sets weight 500 with tracking at −4% of the size (−2.56px on 64px, −2.816px on 70.4px) and line-height 1.16 — letters crowd, lines stack tightly, and that is what gives `"Devin, the AI software engineer"` its poster density. Product display drops to weight 400 with −3% tracking (−1.92px on 64px) and line-height 1.0, opening the letterfit and flattening the leading so a price or plan name reads as data. Body never tracks: 15.9997px on 23.9995px, `normal`, in both systems. Where the system goes lighter rather than heavier is the customer stat at weight 300, 36px on 36px — a headline made quiet so the number beside it can shout. And geistMono's 12px labels track outward (+0.36px) exactly where the grotesque tracks inward: the cleanest signal that you have crossed from voice into metadata.

## Agent Prompt Guide

## Quick Color Reference
- background: `#F7F6F5`
- text: `#191919`
- surface: `#EFEFEF`
- border: `rgba(0, 0, 0, 0.1)`
- accent: `#2200FF`
- primary action: `#191919`

## Example Component Prompts

1. **Primary Action Button**: Anchor `a` with background `#191919`, text `#FFFFFF`, nbInternationalPro 16px/400, line-height 24px, letter-spacing normal, padding 6px 12px, border-radius 2px, no border, no shadow. Outlined variant: transparent fill, `#191919` text, 1px solid `#191919` border, padding 5px 11px, same 2px radius.
2. **Pricing Plan Card**: White `#FFFFFF` card, 1px solid `rgba(0, 0, 0, 0.08)` border, border-radius 4px, padding 24px, 36px internal gap, no shadow. Plan name 32px/400, line-height 38.4px, letter-spacing −0.64px in `rgba(0, 0, 0, 0.4)`; price 64px/400, line-height 64px, letter-spacing −1.92px in `#191919`; a geistMono 12px uppercase badge at +0.36px tracking, border-radius 4px on `rgba(51, 125, 244, 0.1)`; feature rows at padding 12px 0 with a 1px `rgba(0, 0, 0, 0.08)` top rule and 8px icon gap.
3. **Sticky Nav Bar**: Fixed top bar, background `#F7F6F5`, no border, no shadow, content clamped to max-width 1440px with 20px side padding. Left: brand mark. Centre: link pills at nbInternationalPro 14px/400, line-height 19.6px, `#191919`, padding 6px 12px, border-radius 200px, 4px apart. Right: outlined "Download" (1px `#191919`, padding 5px 11px, radius 2px) and filled "Log in" (`#191919` on `#FFFFFF` text, padding 6px 12px, radius 2px).
4. **Customer Story Card**: Card with `#EFEFEF` fill, border-radius 12px, no border, no shadow. Inside, a 3:4 portrait image well at border-radius 15px holding a dark saturated gradient with the customer wordmark reversed out in white. Below: company name at nbInternationalPro 15.9997px/400, line-height 23.9995px in `#818F9A`, then the story headline at 16px/400, line-height 22.4px in `#191919`.
5. **Dark FAQ Accordion**: Panel with `#000000` fill, 1px solid `rgba(0, 0, 0, 0.08)` border, border-radius 4px, padding 36px. Rows separated by a 1px `rgba(255, 255, 255, 0.12)` top border with 40px top padding; question at nbInternationalPro 20px/400, line-height 24px in `#E7E7E7`; standing note at 16px in `rgba(255, 255, 255, 0.56)`; a thin plus glyph right-aligned. No shadow anywhere.

## Similar Brands

- **Linear** — a near-black-on-off-white marketing surface with one saturated accent held back for a single word, and product screenshots doing the illustration work.
- **Vercel** — the same shadowless, hairline-bordered geometry and a mono face reserved strictly for metadata and captions.
- **Stripe Press** — the paper-warm ground, huge grotesque display at negative tracking, and enormous vertical section rhythm.
- **Anthropic** — an off-white canvas with a warm cast, a single grotesque running display through body, and a restrained accent used editorially.
- **Arc Institute** — a research-page severity: full-bleed grey bands, quiet slate metadata above titles, and no decoration between sections.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #191919;
  --color-canvas: #F7F6F5;
  --color-tile: #EFEFEF;
  --color-band: #E7E7E7;
  --color-band-alt: #E8E8E8;
  --color-card: #FFFFFF;
  --color-wash: #FCFCFC;
  --color-void: #000000;
  --color-bento: #1F1F1F;
  --color-night: #141414;
  --color-shade: #171717;
  --color-mask: #252525;
  --color-electric: #2200FF;
  --color-accent: #317CFF;
  --color-slate: #818F9A;
  --color-mute: #A7A6A6;
  --color-label: #7D7D7D;
  --color-label-dim: #919191;
  --color-ink-secondary: rgba(25, 25, 25, 0.56);
  --color-ink-disabled: rgba(25, 25, 25, 0.4);
  --color-ink-muted: rgba(0, 0, 0, 0.4);
  --color-ink-faint: rgba(0, 0, 0, 0.5);
  --color-hairline: rgba(0, 0, 0, 0.1);
  --color-tint: rgba(0, 0, 0, 0.08);
  --color-tint-field: rgba(0, 0, 0, 0.04);
  --color-border-control: rgba(0, 0, 0, 0.15);
  --color-rule-inverse: rgba(255, 255, 255, 0.12);
  --color-ink-inverse-secondary: rgba(255, 255, 255, 0.56);
  --color-tint-blue: rgba(51, 125, 244, 0.1);

  /* Typography — Families */
  --font-heading: 'nbInternationalPro', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'nbInternationalPro', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'geistMono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;      --leading-caption: 16.8px;
  --text-label-mono: 12px;   --leading-label-mono: 18px;
  --text-label: 14px;        --leading-label: 19.6px;
  --text-pill: 15px;         --leading-pill: 15px;
  --text-body: 15.9997px;    --leading-body: 23.9995px;
  --text-body-compact: 16px; --leading-body-compact: 22.4px;
  --text-question: 20px;     --leading-question: 24px;
  --text-deck: 24px;         --leading-deck: 36px;
  --text-h4: 26.3992px;      --leading-h4: 33.0392px;
  --text-h3: 30px;           --leading-h3: 37.5px;
  --text-h2-alt: 32px;       --leading-h2-alt: 38.4px;
  --text-stat: 36px;         --leading-stat: 36px;
  --text-h2: 40px;           --leading-h2: 41.6px;
  --text-display-product: 64px; --leading-display-product: 64px;
  --text-display: 64px;      --leading-display: 74.4px;
  --text-hero: 70.4px;       --leading-hero: 70.4px;
  --tracking-caption: 0.36px;
  --tracking-label-mono: -0.12px;
  --tracking-h4: -0.527985px;
  --tracking-h2-alt: -0.64px;
  --tracking-stat: -0.72px;
  --tracking-h2: -1.2px;
  --tracking-display-product: -1.92px;
  --tracking-display: -2.56px;
  --tracking-hero: -2.816px;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 6px;
  --spacing-xs: 8px;
  --spacing-xs-fluid: 9.42816px;
  --spacing-sm: 10px;
  --spacing-grid-col: 19.2px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 36px;
  --spacing-2xl: 40px;
  --spacing-section-sm: 56.5718px;
  --spacing-section-md: 113.142px;
  --spacing-section-lg: 188px;
  --spacing-section-lg-fluid: 188.572px;
  --spacing-section-xl: 226.286px;
  --container-max: 1440px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-button: 2px;
  --radius-card-product: 4px;
  --radius-arrow: 9.6px;
  --radius-figure: 10px;
  --radius-card: 12px;
  --radius-fluid: 14.1421px;
  --radius-well: 15px;
  --radius-tile: 16px;
  --radius-nav-pill: 200px;
  --radius-pill: 9999px;
}
```

### Tailwind v4

```css
@theme {
  --color-ink: #191919;
  --color-canvas: #F7F6F5;
  --color-tile: #EFEFEF;
  --color-band: #E7E7E7;
  --color-band-alt: #E8E8E8;
  --color-card: #FFFFFF;
  --color-wash: #FCFCFC;
  --color-void: #000000;
  --color-bento: #1F1F1F;
  --color-night: #141414;
  --color-shade: #171717;
  --color-mask: #252525;
  --color-electric: #2200FF;
  --color-accent: #317CFF;
  --color-slate: #818F9A;
  --color-mute: #A7A6A6;
  --color-label: #7D7D7D;
  --color-label-dim: #919191;
  --color-ink-secondary: rgba(25, 25, 25, 0.56);
  --color-ink-disabled: rgba(25, 25, 25, 0.4);
  --color-ink-muted: rgba(0, 0, 0, 0.4);
  --color-ink-faint: rgba(0, 0, 0, 0.5);
  --color-hairline: rgba(0, 0, 0, 0.1);
  --color-tint: rgba(0, 0, 0, 0.08);
  --color-tint-field: rgba(0, 0, 0, 0.04);
  --color-border-control: rgba(0, 0, 0, 0.15);
  --color-rule-inverse: rgba(255, 255, 255, 0.12);
  --color-ink-inverse-secondary: rgba(255, 255, 255, 0.56);
  --color-tint-blue: rgba(51, 125, 244, 0.1);

  --font-heading: 'nbInternationalPro', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'nbInternationalPro', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'geistMono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-caption: 12px;
  --text-caption--line-height: 16.8px;
  --text-caption--letter-spacing: 0.36px;
  --text-label-mono: 12px;
  --text-label-mono--line-height: 18px;
  --text-label-mono--letter-spacing: -0.12px;
  --text-label: 14px;
  --text-label--line-height: 19.6px;
  --text-pill: 15px;
  --text-pill--line-height: 15px;
  --text-body: 15.9997px;
  --text-body--line-height: 23.9995px;
  --text-body-compact: 16px;
  --text-body-compact--line-height: 22.4px;
  --text-question: 20px;
  --text-question--line-height: 24px;
  --text-deck: 24px;
  --text-deck--line-height: 36px;
  --text-h4: 26.3992px;
  --text-h4--line-height: 33.0392px;
  --text-h4--letter-spacing: -0.527985px;
  --text-h3: 30px;
  --text-h3--line-height: 37.5px;
  --text-h2-alt: 32px;
  --text-h2-alt--line-height: 38.4px;
  --text-h2-alt--letter-spacing: -0.64px;
  --text-stat: 36px;
  --text-stat--line-height: 36px;
  --text-stat--letter-spacing: -0.72px;
  --text-h2: 40px;
  --text-h2--line-height: 41.6px;
  --text-h2--letter-spacing: -1.2px;
  --text-display-product: 64px;
  --text-display-product--line-height: 64px;
  --text-display-product--letter-spacing: -1.92px;
  --text-display: 64px;
  --text-display--line-height: 74.4px;
  --text-display--letter-spacing: -2.56px;
  --text-hero: 70.4px;
  --text-hero--line-height: 70.4px;
  --text-hero--letter-spacing: -2.816px;

  --spacing-3xs: 4px;
  --spacing-2xs: 6px;
  --spacing-xs: 8px;
  --spacing-xs-fluid: 9.42816px;
  --spacing-sm: 10px;
  --spacing-grid-col: 19.2px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 36px;
  --spacing-2xl: 40px;
  --spacing-section-sm: 56.5718px;
  --spacing-section-md: 113.142px;
  --spacing-section-lg: 188px;
  --spacing-section-lg-fluid: 188.572px;
  --spacing-section-xl: 226.286px;
  --container-max: 1440px;

  --radius-none: 0px;
  --radius-button: 2px;
  --radius-card-product: 4px;
  --radius-arrow: 9.6px;
  --radius-figure: 10px;
  --radius-card: 12px;
  --radius-fluid: 14.1421px;
  --radius-well: 15px;
  --radius-tile: 16px;
  --radius-nav-pill: 200px;
  --radius-pill: 9999px;
}
```