---
version: alpha
name: Superhuman
description: "Warm paper, one violet signal, headings that trust size over weight."
colors:
  on-surface: "#292827"
  surface: "#FFFFFF"
  outline: "rgba(115, 113, 109, 0.2)"
  primary: "#714CB6"
  paper: "#F7F5F2"
  stone: "#F2F0EB"
  clay: "#DEDBD5"
  violet-wash: "#F7F5FF"
  lavender: "#E8E0FF"
  lavender-ink: "#D4C7FF"
  midnight: "#281647"
  oxblood: "#421D24"
  deep-teal: "#0C4243"
  near-black: "#141413"
  sub-ink: "rgba(20, 20, 19, 0.65)"
  sub-ink-2: "rgba(255, 255, 255, 0.8)"
typography:
  display:
    fontFamily: Super Sans VF
    fontSize: 61px
    fontWeight: 460
    lineHeight: 67.1px
    letterSpacing: -1.6775px
  heading-l:
    fontFamily: Times
    fontSize: 49px
    fontWeight: 400
    lineHeight: 58.8px
    letterSpacing: -1.3475px
  heading-m:
    fontFamily: Times
    fontSize: 39px
    fontWeight: 400
    lineHeight: 46.8px
    letterSpacing: -1.0725px
  heading-s:
    fontFamily: Times
    fontSize: 31px
    fontWeight: 400
    lineHeight: 37.2px
    letterSpacing: -0.8525px
  footer-logo-title:
    fontFamily: Times
    fontSize: 28px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.63px
  heading-xs:
    fontFamily: Times
    fontSize: 25px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: -0.6875px
  body-l:
    fontFamily: Times
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: -0.15px
  column-heading:
    fontFamily: Times
    fontSize: 18.72px
    fontWeight: 400
    lineHeight: 28.08px
    letterSpacing: 0em
  body-m:
    fontFamily: Times
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: -0.135px
  body-s:
    fontFamily: Times
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.12px
  nav-link:
    fontFamily: Times
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  accordion-trigger:
    fontFamily: Times
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19.2px
    letterSpacing: 0em
  button-label:
    fontFamily: Times
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  compact-label:
    fontFamily: Times
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  caption:
    fontFamily: Times
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0em
rounded:
  card-media-tile-cta-button: 12px
  compact-button-link-button-sign-in-butto: 8px
  header-footer-section-banner-accordion-c: 0px
spacing:
  1x: 4px
  footer-link: 5px
  2x: 8px
  3x: 12px
  4x: 16px
  6x: 24px
  8x: 32px
  10x: 40px
  16x: 64px
  24x: 96px
  32x: 128px
---
# Superhuman — Style Reference

> Warm paper, one violet signal, headings that trust size over weight.

**Theme:** light

A warm neutral system — paper, stone and clay — with a saturated violet doing nearly all the accent work, and doing it on controls far more often than on surfaces. The captured pages carry two related systems: the marketing pages (home, the testimonials wall, the agents page) sit on white or warm paper with 12px-rounded cards and an oxblood footer, while the Go product page trades that for square-cornered cards ruled with a hairline, a monospace section counter, and a footer whose links go dark instead of white — a split that tends to fall at the page boundary rather than inside a page. One variable family carries the document, and the display setting is weight 460, barely above regular, tracked at a constant −0.0275em from the card title to the page title: scale and tracking build hierarchy here, not boldness. Elevation is mostly luminance and hairline — one warm grey pixel at low opacity draws the header, the accordion, the logo grid and the square cards. Bands run edge to edge on a 96px rhythm, so a page reads as a stack of coloured planes.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#292827` | `--color-ink` | The document ink; its row counts text 969 and fill 0. Also the label on lavender-filled buttons. |
| Canvas | `#FFFFFF` | `--color-canvas` | Header fill, the flat card on the agents page, and the label ink on violet and oxblood. |
| Paper | `#F7F5F2` | `--color-paper` | The warm off-white section ground on the home and Go pages, and the Go header; fill 34, text 0. |
| Stone | `#F2F0EB` | `--color-stone` | A step warmer than Paper. Default card fill and agents-page section ground — the workhorse surface. |
| Clay | `#DEDBD5` | `--color-clay` | The heaviest warm neutral — a card fill when the tile frames a screenshot rather than copy. |
| Violet Wash | `#F7F5FF` | `--color-violet-wash` | The faintest violet tint, a section ground on the agents page. A cool counterpart to Paper. |
| Lavender | `#E8E0FF` | `--color-lavender` | The announcement banner and the pull-quote band — a full-bleed accent plane, and once a card fill. |
| Lavender Ink | `#D4C7FF` | `--color-lavender-ink` | Link and button ink on dark, the compact button's light fill, the outline CTA's inset ring. |
| Signal Violet | `#714CB6` | `--color-violet` | The saturated hue. Fills the primary CTA and inks the link button; as a surface it reaches one card box. |
| Midnight | `#281647` | `--color-midnight` | The enterprise band and the closing CTA band — violet dark enough to read as ink; fill 5, text 0. |
| Oxblood | `#421D24` | `--color-oxblood` | Footer ground, media tile, two agents-page sections. The warmest dark in the ladder. |
| Deep Teal | `#0C4243` | `--color-teal` | The cold end of the dark ramp; fill 3 and gradient-stop 3 — atmosphere rather than a control. |
| Near Black | `#141413` | `--color-near-black` | A gradient stop — the black end of the carousel wash. Its 65% form is the body ink. |
| Hairline | `rgba(115, 113, 109, 0.2)` | `--color-hairline` | The structural line: header rule, accordion divider, logo-grid cell, square card border. |
| Sub Ink | `rgba(20, 20, 19, 0.65)` | `--color-ink-sub` | Secondary copy on light — decks, eyebrows, the mono counter. Translucent ink, not a solid grey. |
| Sub Ink (inverse) | `rgba(255, 255, 255, 0.8)` | `--color-ink-sub-inverse` | Secondary copy on dark — footer nav links, carousel descriptions. |

## Tokens — Typography

### Super Sans VF — carries the whole document, 61px page title to 14px caption, at four weights; the display setting is 460 · `--font-sans`
- **Substitute:** Inter, Söhne, ui-sans-serif
- **Weights:** 460, 540, 600, 700
- **Sizes:** 14px, 16px, 18px, 18.72px, 20px, 25px, 28px, 31px, 39px, 49px, 61px
- **Line height:** 16px on button labels (1.0), 19.2px on the accordion trigger, 1.2 across the heading ramp, 1.5 across body, 1.1 at 61px
- **Letter spacing:** −0.0275em on headings 25–61px; −0.0075em on 16/18/20px body; `normal` on button labels, nav links and footer column headings; −0.0225em on the 28px footer logo title
- **Role:** headings, body, labels, navigation and footer alike — one family, roles separated by size, weight and tracking.

### Super Sans Mono VF — the section counter on the Go page, uppercase, in secondary ink · `--font-mono`
- **Substitute:** IBM Plex Mono, JetBrains Mono, ui-monospace
- **Weights:** 540
- **Sizes:** 16px
- **Line height:** 24px
- **Letter spacing:** −0.12px (−0.0075em, the sans's body tracking)
- **Role:** the numbered chapter eyebrow, sampled as "01 / 05 · SUPERHUMAN GO" on `.font-family-mono`.

### Times — named in the font inventory; no census text row measures a carrier for it · `--font-serif`
- **Substitute:** Times New Roman, Georgia, serif
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** not measured. The family census names it third and no text row paints it — a UA fallback, not a brand face.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 61px | 67.1px | −1.6775px | `--text-display` |
| Heading L | 49px | 58.8px | −1.3475px | `--text-heading-lg` |
| Heading M | 39px | 46.8px | −1.0725px | `--text-heading-md` |
| Heading S | 31px | 37.2px | −0.8525px | `--text-heading-sm` |
| Footer logo title | 28px | 32px | −0.63px | `--text-footer-title` |
| Heading XS | 25px | 30px | −0.6875px | `--text-heading-xs` |
| Body L | 20px | 30px | −0.15px | `--text-body-lg` |
| Column heading | 18.72px | 28.08px | normal | `--text-column-heading` |
| Body M | 18px | 27px | −0.135px | `--text-body-md` |
| Body S | 16px | 24px | −0.12px | `--text-body-sm` |
| Nav link | 16px | 24px | normal | `--text-nav` |
| Accordion trigger | 16px | 19.2px | normal | `--text-trigger` |
| Button label | 16px | 16px | normal | `--text-label` |
| Compact label | 14px | 18px | normal | `--text-label-sm` |
| Caption | 14px | 16.8px | normal | `--text-caption` |

## Tokens — Spacing & Shapes

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

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 1x | 4px | `--spacing-1` |
| Footer link | 5px | `--spacing-footer-link` |
| 2x | 8px | `--spacing-2` |
| 3x | 12px | `--spacing-3` |
| 4x | 16px | `--spacing-4` |
| 6x | 24px | `--spacing-6` |
| 8x | 32px | `--spacing-8` |
| 10x | 40px | `--spacing-10` |
| 16x | 64px | `--spacing-16` |
| 24x | 96px | `--spacing-24` |
| 32x | 128px | `--spacing-32` |

### Border Radius

| Element | Value |
|---------|-------|
| Card, media tile, CTA button | 12px |
| Compact button, link button, sign-in button | 8px |
| Header, footer, section, banner, accordion, carousel control | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Elevation XS | `color(srgb 0.278431 0.270588 0.262745 / 0.04) 0px 0px 0px 1px, color(srgb 0.278431 0.270588 0.262745 / 0.06) 0px 4px 8px -2px, color(srgb 0.278431 0.270588 0.262745 / 0.04) 0px 2px 4px 0px, color(srgb 0.278431 0.270588 0.262745 / 0.04) 0px 1px 2px 0px, color(srgb 0.870588 0.858824 0.835294 / 0.2) 0px 0px 0px 1px` | `--shadow-xs` |
| Ring, neutral | `color(srgb 0.45098 0.443137 0.427451 / 0.2) 0px 0px 0px 1px inset` | `--ring-neutral` |
| Ring, lavender | `rgb(212, 199, 255) 0px 0px 0px 1px inset` | `--ring-lavender` |
| Ring, violet | `rgb(113, 76, 182) 0px 0px 0px 1px inset` | `--ring-violet` |

### Layout

- **Page max-width:** `.section_section___xslj`, `.header_header__ZwL1v` and `.footer_footer__yLXSJ` all measure 1920px — the viewport width — and the layout census's horizontal-inset row reads `(none)`, so bands read as full-bleed and the inner wrapper does the centring. Content maxima measured: 1280px logo grid, 818px accordion, 624px media tile, 520px, 405px and 296px cards.
- **Section gap:** 96px of vertical padding on `.content-wrapper_contentWrapper__9WGiY.page-section_pageSection__DJoCO` across all pages; 64px on tab panels and the footer content wrapper.
- **Card padding:** 32px on every side of every card row measured.
- **Element gap:** 4px dominates (icon-to-label in links and nav items), then 32px column containers, 16px CTA groups, 24px copy blocks, 8px nav lists and card content, 12px carousel controls, 40px footer nav, 128px the widest split.

## Components

### Header / Nav Bar
**Role:** The top rail: wordmark, dropdown menus, account actions.

`.header_header__ZwL1v`: a `header` at 1920×67px, `fill #FFFFFF`, `padding 0px 0px`, `radius 0px`, `border 1px rgba(115, 113, 109, 0.2)`, `shadow none`, containing "Love Contact sales". The same class paints `#F7F5F2` once — on the Go page the rail warms to paper, the clearest signal of the split. Nav links set at 16px/460/24px in `#292827` at `normal` tracking; nav list gaps 8px, CTA cluster 16px, lockup 4px. The hairline alone separates the bar from what scrolls under it.

### Primary CTA Button
**Role:** The loudest control on the page — "Try Go", "Get Superhuman", "Share your experience".

`.link_link__5Knfc.button_button__RzPSK.button_primaryFilled__I1Rv8.cta-button_ctaButton__5_uZN`: an `a` at 87–201×52px, `fill #714CB6`, label 16px/600 on a 16px line-height, `padding 6px 20px`, `radius 12px`, `border none`, `shadow none`, on all pages; label ink `#FFFFFF`. The controls census measures the same class a second way, `fill #D4C7FF` with `text #292827` at identical padding and radius — what the button becomes on dark grounds, where saturated violet would sink. A 16px line-height on a 16px label puts the height in the 6px padding, so the pill holds 52px.

### Compact Primary Button
**Role:** The rail-scale account action — "Sign up".

`.link_link__5Knfc.button_button__RzPSK.button_primaryFilled__I1Rv8.button_compact__d5yM_`: an `a` at 80×36px, `fill #714CB6`, label 14px/600/18px, `padding 6px 16px`, `radius 8px`, `border none`, `shadow none`, on the Go and agents pages. The controls census measures the same class once more with `fill #D4C7FF` and `text #292827` at the same geometry. Everything steps down together — label 16px to 14px, inset 20px to 16px, radius 12px to 8px. That pairing is the shape system: 12px at CTA scale, 8px at rail scale.

### Outline CTA Button
**Role:** The secondary action beside a filled CTA — "Get started".

`.link_link__5Knfc.button_button__RzPSK.button_primaryOutline__7NvXs.cta-button_ctaButton__5_uZN`: an `a` at 122–167×52px, `fill none`, label 16px/600/16px, `padding 6px 20px`, `radius 12px`, `border none`, and `shadow rgb(212, 199, 255) 0px 0px 0px 1px inset` on the home and agents pages. The shadows census carries the same class with `rgb(113, 76, 182) 0px 0px 0px 1px inset` on the testimonials and agents pages: lavender ring on dark, violet on light. An inset shadow keeps the ring out of the box model, so outline and filled CTAs match at 52px.

### Link Button
**Role:** The chrome-free action sitting to the right of a CTA — "Learn more", "Explore agent".

`.link_link__5Knfc.button_button__RzPSK.button_primaryLink__2iNLn.cta-button_ctaButton__5_uZN` measures two ways: an `a` at 106–203×32px on the home, Go and agents pages, containing "Learn more"; and at 124×32px on the agents page, containing "Explore agent". Both carry `fill none`, 16px/600/16px, `padding 6px 0px`, `radius 8px`, `border none`, `shadow none`. Label ink is `#714CB6` on light, `#D4C7FF` on dark. Zero horizontal padding sets the label flush to the text grid, so it reads as a sentence beside a filled button, not a box.

### Elevated Card
**Role:** The feature card in the home page's three-up row, where a surface lifts off the plane.

`.card_card___40SI.elevation-xsmall.card_card__LQmTt`: a `div` at 405×290px, `fill #F2F0EB`, `padding 32px 32px`, `radius 12px`, `border none`, on the home page, containing "Perfect your writing with Grammarly Tell Grammar". Its shadow is a five-layer stack: a 4% hairline ring, a `0 4px 8px -2px` at 6%, a `0 2px 4px` and a `0 1px 2px` at 4% each, and an outer `0 0 0 1px` at 20% in the warm light tone. Of the four box-shadows measured, only this one casts. A companion `div`, `.card_background__8udB8.card_backgroundAbsolute__Leog7`, sits at the same 405×290px with `radius 12px` and `fill none`, holding the artwork.

### Flat Card
**Role:** The default content card — title, a line of copy, sometimes an icon.

`.card_card___40SI.card_card__LQmTt`: a `div` at 296×339–347px, `fill #FFFFFF`, `padding 32px 32px`, `radius 12px`, `border none`, `shadow none`, on the agents page, containing "Grammarly Make your point clearly and confidentl". The boxes census carries the same class at four other fills, each at 32px padding and 12px radius: `#DEDBD5` at 520×295–397px on the home and agents pages, containing "Split Inbox Focus on what matters most. Your inb", plus single measurements at `#714CB6`, `#E8E0FF` and `#281647`. A fill slot: geometry invariant, colour carrying meaning. Content stacks at 8px.

### Bordered Square Card
**Role:** The Go page's content card — same padding, opposite shape.

`.card_card___40SI.card_card__LQmTt.border-sub.corner-radius-none`: a `div` at 296–624×296–373px, `fill #F2F0EB`, `padding 32px 32px`, `radius 0px`, `border 1px rgba(115, 113, 109, 0.2)`, `shadow none`, on the Go page, containing "Grammarly Go comes with a new customizable Gramm". The class name says it outright: the Go page trades the 12px corner for a hairline, so it reads as a ruled document where the marketing pages read as a deck of tiles.

### Media Object Tile
**Role:** The wide picture-and-caption panel, a product moment on a coloured ground.

`.display-row.align-items-end.gap-0x.media-object_root__HhYf6`: an `aside` at 624×260–277px, `fill #421D24`, `padding 0px 0px`, `radius 12px`, `border none`, `shadow none`, on the home and agents pages, containing "Context-aware chat Chat about what's on screen w". The painted-colour carriers list this class holding `#0C4243`, `#E8E0FF` and `#DEDBD5` too — a stage taking whichever plane the band needs. Padding is zero: the screenshot bleeds to the tile's edge. The caption gaps at 12px, an eyebrow at 14px/540/16.8px in `rgba(255, 255, 255, 0.8)` over a 25px/460/30px title in `#FFFFFF`.

### Carousel Navigation Control
**Role:** The product switcher under the home hero — stacked rows, one highlighted.

`.carousel-desktop-navigation_control__PB8EJ`: a `button` at 640×57px, `fill none`, `padding 16px 32px`, `radius 0px`, `border 1px rgba(252, 250, 247, 0.08)`, `shadow none`, on the home page, containing "Mail The most productive email app ever made". The active variant, `.carousel-desktop-navigation_control__PB8EJ.carousel-desktop-navigation_active__KFY3f`, repeats the box and border and adds a flat `rgba(255, 255, 255, 0.06) → rgba(255, 255, 255, 0.06)` wash — selection as a six-percent lift in luminance, not a colour change. Title and description both at 14px, title `#FFFFFF`, description `rgba(255, 255, 255, 0.8)`; gap 12px. A `.progress-bar_fill__SJ5qL` div at 119×2px in `rgba(252, 250, 247, 0.2)` times the rotation.

### Accordion Item
**Role:** The FAQ row — a question, a chevron, an answer that pushes the stack down.

`.accordion_item__yyWI5`: a `div` at 818×76–77px, `fill none`, `padding 0px 0px`, `radius 0px`, `border 1px rgba(115, 113, 109, 0.2)`, `shadow none`, on the Go and agents pages, containing "What is Superhuman Go? Go is the AI assistant an". The trigger is an `h3` on `.accordion_trigger__HSQ3h` at 16px/460/19.2px in `#292827` at `normal` tracking — the heading ramp's tracking switched off, because a trigger is a control. Body copy sets at 18px/460/27px/−0.135px in `#292827` on `.type-text-medium.font-weight-regular.color-text-base`; the chevron inks `#000000` on `.accordion_button__WPPuh`. The row is its hairline.

### Footer
**Role:** The closing plane — wordmark, a positioning line, four link columns.

`.footer_footer__yLXSJ`: a `footer` at 1920×819px, `fill #421D24`, `padding 0px 0px`, `radius 0px`, `border none`, `shadow none`, on the home, testimonials and agents pages, containing "Builders of Superhuman Platform apps Products Su". Its content wrapper takes 64px of vertical padding; the nav gaps 40px between columns, 5px per link. Lockup 28px/540/32px/−0.63px in `#FFFFFF`; column headings 18.72px/700/28.08px in `#FFFFFF`; links 16px/460/24px in `rgba(255, 255, 255, 0.8)`. On the Go page the same link class inks `rgba(41, 40, 39, 0.8)` — dark on a light ground, the second half of that page's inversion.

## Do's and Don'ts

### Do
- Set headings from 25px to 61px at weight 460, −0.0275em tracking, 1.2 line-height; let size build hierarchy.
- Use `#714CB6` for the filled CTA and link-button label; switch both to `#D4C7FF` when the ground goes dark.
- Draw structure with `rgba(115, 113, 109, 0.2)` at 1px — header rule, accordion divider, logo-grid cell, square card.
- Pad every card 32px on four sides and gap its content 8px, whatever the fill.
- Give bands 96px of vertical room at full viewport width; the horizontal-inset row reads `(none)`.
- Set secondary copy in `rgba(20, 20, 19, 0.65)` on light and `rgba(255, 255, 255, 0.8)` on dark — translucent ink, not grey.
- Keep body at 1.5 line-height and −0.0075em tracking, so the heading block reads as a separate voice.

### Don't
- Don't bold a heading to make it matter. The 700 weight appears as a mid-sentence emphasis span — "actually finish things", "Perfect your writing" — and on the 18.72px footer column headings.
- Don't invent a third radius. The radii census measures 12px and 8px; bands, rails and accordion rows sit at 0px.
- Don't add a drop shadow to a card. Of the four shadows measured, only `.card_card___40SI.elevation-xsmall.card_card__LQmTt` casts.
- Don't put `#714CB6` behind a section. It fills controls and, once, a card box on `.card_card___40SI.card_card__LQmTt`; the dark planes are `#281647`, `#421D24` and `#0C4243`.
- Don't draw an outline button with a `border`. The 1px inset ring keeps its height at 52px, matching the filled CTA.
- Don't mix the two shape languages in one view: rounded tiles on gapped grounds, or square hairline cards on ruled grounds.
- Don't tighten tracking on a button label, nav link or accordion trigger; all three measure `normal`.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Header, agents-page sections, the flat card |
| 1 | Paper | `#F7F5F2` | Section ground on the home and Go pages; the Go header |
| 2 | Stone | `#F2F0EB` | Card fill, agents-page sections, the square card |
| 3 | Clay | `#DEDBD5` | Heaviest neutral card fill, for screenshot frames |
| — | Violet Wash | `#F7F5FF` | Agents-page section tint |
| — | Lavender | `#E8E0FF` | Announcement banner and pull-quote band |
| — | Midnight | `#281647` | Enterprise band and closing CTA band |
| — | Oxblood | `#421D24` | Footer, media tile, agents-page bands |
| — | Deep Teal | `#0C4243` | Carousel fill and gradient stop |

## Elevation

Depth is luminance and hairline, not shadow. On light grounds the ladder climbs `#FFFFFF` → `#F7F5F2` → `#F2F0EB` → `#DEDBD5` in steps small enough that a card separates from its section only when the two differ; where they don't, the 1px `rgba(115, 113, 109, 0.2)` ring does the work. One class casts, `.card_card___40SI.elevation-xsmall.card_card__LQmTt`; the other three shadows measured are 1px inset rings standing in for borders on controls. On dark grounds elevation flips to translucency: a `rgba(252, 250, 247, 0.08)` hairline and a 6% white wash mark the active carousel row.

## Imagery

Product screenshots, almost always: hero and feature tiles hold a rendered app window — a Google Doc with an inline suggestion popover, a Slack thread, a Gmail message flagging a policy mismatch — floated over a soft gradient mesh in teal, cobalt, violet and pink. They sit inside a 12px-radius tile whose fill supplies the mood, and often overflow its edge so the panel reads as a window onto something larger. Two other modes appear: a greyscale logo wall in a ruled grid, and circular headshot avatars in the testimonial cards. Illustration and stock photography don't appear; the decorative object is a circular "WALL OF LOVE" badge. Icons are monochrome glyphs in `#421D24` in a bordered square.

## Layout

Bands read as full-bleed: `.section_section___xslj`, `.header_header__ZwL1v` and `.footer_footer__yLXSJ` each measure 1920px wide, and the horizontal-inset row reads `(none)`, so gutters belong to the inner wrapper rather than the section. Two-column splits gap at 32px and stretch to 128px when copy and media sit far apart. The nav is one rail — wordmark left, dropdown labels centre, account actions right. The Go page adds vertical rules bounding the content column and a monospace counter on each section.

## Typography Voice

Two modes, separated by tracking and leading. The heading mode holds weight 460 at −0.0275em and 1.2 line-height across every step from 25px to 61px, with adjacent steps at a ratio near 1.25 — a major third — so the ramp feels even at any size and the tracking stays optically identical because it scales with the type. The body mode runs 540 at −0.0075em and 1.5 line-height, heavier than the headings, which is the real signature: display type lighter than body type, size carrying the rest. Between them sit the labels, all at `normal` tracking. The 700 weight works as a highlighter — an emphasis span inside a heading, and the footer column headings.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF`
- text: `#292827`
- surface: `#F2F0EB`
- border: `rgba(115, 113, 109, 0.2)`
- accent: `#D4C7FF`
- primary action: `#714CB6`

## Example Component Prompts

1. **Primary CTA Button**: Anchor pill, background `#714CB6`, label `#FFFFFF` 16px/600, line-height 16px, letter-spacing normal, padding 6px 20px, radius 12px, no border, no shadow, height 52px. On dark grounds use fill `#D4C7FF`, label `#292827`, same geometry.
2. **Feature Card, elevated**: 405×290px div, background `#F2F0EB`, padding 32px, radius 12px, box-shadow `color(srgb 0.278431 0.270588 0.262745 / 0.04) 0 0 0 1px, color(srgb 0.278431 0.270588 0.262745 / 0.06) 0 4px 8px -2px, color(srgb 0.278431 0.270588 0.262745 / 0.04) 0 2px 4px 0, color(srgb 0.278431 0.270588 0.262745 / 0.04) 0 1px 2px 0, color(srgb 0.870588 0.858824 0.835294 / 0.2) 0 0 0 1px`. Title 25px/460, line-height 30px, letter-spacing −0.6875px, `#292827`; body 18px/540, line-height 27px, letter-spacing −0.135px, `rgba(20, 20, 19, 0.65)`; content gap 8px.
3. **Accordion Row**: 818px div, no fill, no padding, radius 0, border 1px solid `rgba(115, 113, 109, 0.2)`, no shadow, collapsed height 76px. Trigger h3 16px/460, line-height 19.2px, letter-spacing normal, `#292827`; chevron `#000000`; answer 18px/460, line-height 27px, letter-spacing −0.135px, `#292827`.
4. **Header Rail**: Full-width header 67px tall, background `#FFFFFF`, padding 0, radius 0, border 1px solid `rgba(115, 113, 109, 0.2)`, no shadow. Nav links 16px/460, line-height 24px, letter-spacing normal, `#292827`; nav gap 8px, action cluster 16px, lockup 4px. Product-page variant: `#F7F5F2`.
5. **Full-bleed Closing Band**: Section at viewport width, background `#281647`, 96px vertical padding, no horizontal inset, radius 0. Heading 49px/460, line-height 58.8px, letter-spacing −1.3475px, `#FFFFFF`; beside it an outline CTA, no fill, padding 6px 20px, radius 12px, no border, box-shadow `rgb(212, 199, 255) 0 0 0 1px inset`, label 16px/600 in `#D4C7FF`.

## Similar Brands

- **Linear** — a near-monochrome marketing system leaning on one saturated accent and tight display tracking, not weight.
- **Vercel** — the same discipline of full-bleed planes, hairline borders and a shadow budget near zero.
- **Stripe** — a warm-neutral canvas, product screenshots on gradient meshes, and a type ramp separated by tracking.
- **Notion** — the same warm off-white surface ladder and 12px card corner as its whole shape vocabulary.
- **Arc (The Browser Company)** — kindred in dropping violets, oxbloods and teals into a warm base as atmosphere.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #292827;
  --color-canvas: #FFFFFF;
  --color-paper: #F7F5F2;
  --color-stone: #F2F0EB;
  --color-clay: #DEDBD5;
  --color-violet-wash: #F7F5FF;
  --color-lavender: #E8E0FF;
  --color-lavender-ink: #D4C7FF;
  --color-violet: #714CB6;
  --color-midnight: #281647;
  --color-oxblood: #421D24;
  --color-teal: #0C4243;
  --color-near-black: #141413;
  --color-black: #000000;
  --color-hairline: rgba(115, 113, 109, 0.2);
  --color-ink-sub: rgba(20, 20, 19, 0.65);
  --color-ink-sub-inverse: rgba(255, 255, 255, 0.8);
  --color-ink-soft-inverse: rgba(255, 255, 255, 0.65);
  --color-ink-sub-dark: rgba(41, 40, 39, 0.8);
  --color-hairline-inverse: rgba(252, 250, 247, 0.08);
  --color-wash-inverse: rgba(255, 255, 255, 0.06);
  --color-track-inverse: rgba(252, 250, 247, 0.2);
  --color-surface-translucent: rgba(255, 255, 255, 0.9);

  /* Typography — Families */
  --font-sans: 'Super Sans VF', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Super Sans Mono VF', 'IBM Plex Mono', ui-monospace, monospace;
  --font-serif: 'Times', 'Times New Roman', Georgia, serif;

  /* Typography — Scale */
  --text-display: 61px;          --leading-display: 67.1px;        --tracking-display: -1.6775px;
  --text-heading-lg: 49px;       --leading-heading-lg: 58.8px;     --tracking-heading-lg: -1.3475px;
  --text-heading-md: 39px;       --leading-heading-md: 46.8px;     --tracking-heading-md: -1.0725px;
  --text-heading-sm: 31px;       --leading-heading-sm: 37.2px;     --tracking-heading-sm: -0.8525px;
  --text-footer-title: 28px;     --leading-footer-title: 32px;     --tracking-footer-title: -0.63px;
  --text-heading-xs: 25px;       --leading-heading-xs: 30px;       --tracking-heading-xs: -0.6875px;
  --text-body-lg: 20px;          --leading-body-lg: 30px;          --tracking-body-lg: -0.15px;
  --text-column-heading: 18.72px; --leading-column-heading: 28.08px; --tracking-column-heading: normal;
  --text-body-md: 18px;          --leading-body-md: 27px;          --tracking-body-md: -0.135px;
  --text-body-sm: 16px;          --leading-body-sm: 24px;          --tracking-body-sm: -0.12px;
  --text-nav: 16px;              --leading-nav: 24px;              --tracking-nav: normal;
  --text-trigger: 16px;          --leading-trigger: 19.2px;        --tracking-trigger: normal;
  --text-label: 16px;            --leading-label: 16px;            --tracking-label: normal;
  --text-label-sm: 14px;         --leading-label-sm: 18px;         --tracking-label-sm: normal;
  --text-caption: 14px;          --leading-caption: 16.8px;        --tracking-caption: normal;
  --weight-display: 460;
  --weight-body: 540;
  --weight-label: 600;
  --weight-bold: 700;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-footer-link: 5px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --spacing-32: 128px;

  /* Border Radius */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-band: 0px;

  /* Shadows */
  --shadow-xs: color(srgb 0.278431 0.270588 0.262745 / 0.04) 0px 0px 0px 1px,
               color(srgb 0.278431 0.270588 0.262745 / 0.06) 0px 4px 8px -2px,
               color(srgb 0.278431 0.270588 0.262745 / 0.04) 0px 2px 4px 0px,
               color(srgb 0.278431 0.270588 0.262745 / 0.04) 0px 1px 2px 0px,
               color(srgb 0.870588 0.858824 0.835294 / 0.2) 0px 0px 0px 1px;
  --ring-neutral: color(srgb 0.45098 0.443137 0.427451 / 0.2) 0px 0px 0px 1px inset;
  --ring-lavender: rgb(212, 199, 255) 0px 0px 0px 1px inset;
  --ring-violet: rgb(113, 76, 182) 0px 0px 0px 1px inset;
}
```

### Tailwind v4

```css
@theme {
  --color-ink: #292827;
  --color-canvas: #FFFFFF;
  --color-paper: #F7F5F2;
  --color-stone: #F2F0EB;
  --color-clay: #DEDBD5;
  --color-violet-wash: #F7F5FF;
  --color-lavender: #E8E0FF;
  --color-lavender-ink: #D4C7FF;
  --color-violet: #714CB6;
  --color-midnight: #281647;
  --color-oxblood: #421D24;
  --color-teal: #0C4243;
  --color-near-black: #141413;
  --color-black: #000000;
  --color-hairline: rgba(115, 113, 109, 0.2);
  --color-ink-sub: rgba(20, 20, 19, 0.65);
  --color-ink-sub-inverse: rgba(255, 255, 255, 0.8);
  --color-ink-soft-inverse: rgba(255, 255, 255, 0.65);
  --color-ink-sub-dark: rgba(41, 40, 39, 0.8);
  --color-hairline-inverse: rgba(252, 250, 247, 0.08);
  --color-wash-inverse: rgba(255, 255, 255, 0.06);
  --color-track-inverse: rgba(252, 250, 247, 0.2);
  --color-surface-translucent: rgba(255, 255, 255, 0.9);

  --font-sans: 'Super Sans VF', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Super Sans Mono VF', 'IBM Plex Mono', ui-monospace, monospace;
  --font-serif: 'Times', 'Times New Roman', Georgia, serif;

  --text-display: 61px;           --text-display--line-height: 67.1px;    --text-display--letter-spacing: -1.6775px;
  --text-heading-lg: 49px;        --text-heading-lg--line-height: 58.8px; --text-heading-lg--letter-spacing: -1.3475px;
  --text-heading-md: 39px;        --text-heading-md--line-height: 46.8px; --text-heading-md--letter-spacing: -1.0725px;
  --text-heading-sm: 31px;        --text-heading-sm--line-height: 37.2px; --text-heading-sm--letter-spacing: -0.8525px;
  --text-footer-title: 28px;      --text-footer-title--line-height: 32px; --text-footer-title--letter-spacing: -0.63px;
  --text-heading-xs: 25px;        --text-heading-xs--line-height: 30px;   --text-heading-xs--letter-spacing: -0.6875px;
  --text-body-lg: 20px;           --text-body-lg--line-height: 30px;      --text-body-lg--letter-spacing: -0.15px;
  --text-column-heading: 18.72px; --text-column-heading--line-height: 28.08px;
  --text-body-md: 18px;           --text-body-md--line-height: 27px;      --text-body-md--letter-spacing: -0.135px;
  --text-body-sm: 16px;           --text-body-sm--line-height: 24px;      --text-body-sm--letter-spacing: -0.12px;
  --text-nav: 16px;               --text-nav--line-height: 24px;
  --text-trigger: 16px;           --text-trigger--line-height: 19.2px;
  --text-label: 16px;             --text-label--line-height: 16px;
  --text-label-sm: 14px;          --text-label-sm--line-height: 18px;
  --text-caption: 14px;           --text-caption--line-height: 16.8px;
  --font-weight-display: 460;
  --font-weight-body: 540;
  --font-weight-label: 600;
  --font-weight-bold: 700;

  --spacing-1: 4px;
  --spacing-footer-link: 5px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --spacing-32: 128px;

  --radius-card: 12px;
  --radius-control: 8px;
  --radius-band: 0px;

  --shadow-xs: color(srgb 0.278431 0.270588 0.262745 / 0.04) 0px 0px 0px 1px,
               color(srgb 0.278431 0.270588 0.262745 / 0.06) 0px 4px 8px -2px,
               color(srgb 0.278431 0.270588 0.262745 / 0.04) 0px 2px 4px 0px,
               color(srgb 0.278431 0.270588 0.262745 / 0.04) 0px 1px 2px 0px,
               color(srgb 0.870588 0.858824 0.835294 / 0.2) 0px 0px 0px 1px;
  --ring-neutral: color(srgb 0.45098 0.443137 0.427451 / 0.2) 0px 0px 0px 1px inset;
  --ring-lavender: rgb(212, 199, 255) 0px 0px 0px 1px inset;
  --ring-violet: rgb(113, 76, 182) 0px 0px 0px 1px inset;
}
```