---
version: alpha
name: Steep
description: "Paper-white calm, an editorial serif, and dashboards drifting past like weather."
colors:
  on-surface-variant: "#ECECEC"
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "rgba(10, 23, 43, 0.1)"
  error: "#17191C"
  secondary: "#A3A6AF"
  primary: "rgba(4, 23, 43, 0.05)"
  surface-2: "#F7F7F8"
  surface-tint: "#FAFAFB"
  primary-gray: "#777B86"
  card-graphite: "#4C4C4C"
  rust: "#5D2A1A"
  peach: "#FBE1D1"
  powder-blue: "#D3E3FC"
  inverted-band: "#121212"
  hero-wash: "#F7F7F8"
typography:
  display-xl:
    fontFamily: Signifier
    fontSize: 90px
    fontWeight: 400
    lineHeight: 117px
    letterSpacing: -2.25px
  display-l:
    fontFamily: Signifier
    fontSize: 64px
    fontWeight: 400
    lineHeight: 83.2px
    letterSpacing: -0.96px
  display-l-tight:
    fontFamily: Signifier
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -1.28px
  display-m:
    fontFamily: Signifier
    fontSize: 44px
    fontWeight: 400
    lineHeight: 57.2px
    letterSpacing: -0.66px
  display-s:
    fontFamily: Signifier
    fontSize: 40px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: 0em
  heading:
    fontFamily: Sohne
    fontSize: 36px
    fontWeight: 400
    lineHeight: 38.4px
    letterSpacing: -0.64px
  section-title:
    fontFamily: Sohne
    fontSize: 28px
    fontWeight: 400
    lineHeight: 35px
    letterSpacing: 0em
  card-label:
    fontFamily: Sohne
    fontSize: 26px
    fontWeight: 400
    lineHeight: 30.68px
    letterSpacing: -0.24px
  lede:
    fontFamily: Sohne
    fontSize: 22px
    fontWeight: 400
    lineHeight: 33px
    letterSpacing: 0em
  plan-name:
    fontFamily: Sohne
    fontSize: 22px
    fontWeight: 400
    lineHeight: 27.5px
    letterSpacing: 0em
  subhead:
    fontFamily: Sohne
    fontSize: 20px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: 0em
  body-l:
    fontFamily: Sohne
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24.75px
    letterSpacing: 0em
  field-stepper-label:
    fontFamily: Sohne
    fontSize: 17px
    fontWeight: 400
    lineHeight: 23px
    letterSpacing: 0em
  ui:
    fontFamily: Sohne
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  ui-compact:
    fontFamily: Sohne
    fontSize: 16px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0em
  control:
    fontFamily: Sohne
    fontSize: 15px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: 0em
  legal:
    fontFamily: Sohne
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0em
  caption:
    fontFamily: Sohne
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
rounded:
  buttons-nav-pills-chips-avatar-wells: 9999px
  home-feature-card: 24px
  pricing-plan-card-faq-row-app-frame: 16px
  ask-bar-floating-insight-card: 20px
  story-card-image-inline-image: 12px
  form-input-textarea: 10px
  section-bands-table-cells: 0px
spacing:
  3xs: 4px
  2xs: 6px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  gutter: 80px
  section: 96px
  chapter: 120px
  chapter-lg: 160px
---
# Steep — Style Reference

> Paper-white calm, an editorial serif, and dashboards drifting past like weather.

**Theme:** light

Steep builds on plain white and spends very little on colour: an editorial serif set large on an empty canvas, grey carrying the secondary words, a neutral near-black carrying the actions. The signature move is the floating product fragment — white cards at a 20px radius, each holding a real metric question, drifting over a soft gradient haze while the headline holds the centre. Signifier owns the display voice and buys hierarchy with size and negative tracking rather than weight; Sohne runs the interface beneath it at five closely-spaced weights, so a nav link, a plan name and a table label differ by a hair instead of a jump. The rhythm is wide and even: a deep side gutter, sections breathing in large steps, one hairline standing in for most structural lines. The home page inverts into a near-black chapter for the semantic platform, then returns to white, same typefaces throughout.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#000000` | `--color-ink` | The heaviest ink, painted overwhelmingly as text (642 of 644 observations), and the fill of the round send control on `.text-primary-text/50.bg-trans-5.focus:outline-none.transition-all`. Headings on white, not a surface. |
| Primary Text | `#17191C` | `--color-primary-text` | Working ink and filled-button colour in one: body copy, nav labels, the pill on `.group.leading-none.font-book.focus:outline-none`. A shade warmer than Ink, which is why the two coexist without reading as an error. |
| Canvas | `#FFFFFF` | `--color-canvas` | Page ground, the floating home-page cards, and the label ink inside filled buttons. |
| Surface | `#F7F7F8` | `--color-surface` | The workhorse plane, one step up: the footer band holding "Explore Overview Explore & analyze Semantic plat", the feature cards, the plan cards. |
| Surface Tint | `#FAFAFB` | `--color-surface-tint` | Half a step above Surface, for tinting — the zebra column on `.bg-secondary-background.w-[20%].py-3.flex` and the FAQ rows on `.group.rounded-2xl.bg-secondary-background.transition-all`. |
| Avatar Well | `#ECECEC` | `--color-avatar-well` | The 24×24px portrait well on `.relative.size-6.shrink-0.overflow-hidden`. A placeholder tone. |
| Primary Gray | `#777B86` | `--color-primary-gray` | The most-painted grey ink: nav and footer links, table labels, "© Steep Analytics". Text roles in all 288 observations, so do not table it as a fill. |
| Secondary Gray | `#A3A6AF` | `--color-secondary-gray` | Placeholder and metadata ink: "Ask anything..." and "By Janna Pollari·Delivery". Text roles in all 21 observations. |
| Card Graphite | `#4C4C4C` | `--color-card-graphite` | Label ink on the grey feature cards at 26px/450, as on "Powered by AI" — softer than body ink, so the title settles into its tile. |
| Rust | `#5D2A1A` | `--color-rust` | The ink on the peach card, "Built on metrics". Editorial credit: all 6 of its observations are text roles. |
| Peach | `#FBE1D1` | `--color-accent-peach` | Warm card fill, one of two measured variants of `.absolute.inset-0.p-4.5.@3xs:p-5`. The controls census carries no #FBE1D1 fill; keep it off buttons. |
| Powder Blue | `#D3E3FC` | `--color-accent-blue` | A cool band ground behind the customer-story chapter. One painted observation in the capture — the rarity is the effect. |
| Inverted Band | `#121212` | `--color-inverted` | The near-black chapter ground on `.relative.py-16.md:pt-30.lg:pb-40`, carrying 120px of vertical padding. |
| Hairline | `rgba(10, 23, 43, 0.1)` | `--color-hairline` | #0A172B at 10%, the structural line at 65 border observations: rows, dividers, inputs, the outlined toggle. |
| Active Nav Fill | `rgba(4, 23, 43, 0.05)` | `--color-nav-active` | #04172B at 5%, marking the current nav item on `.pt-1.pb-1.5.px-3.5.lg:mx-1`. Barely there by design. |
| Hero Wash | `#F7F7F8 → #FFFFFF` | `--gradient-hero-wash` | The one CSS gradient the census records, on `.bg-linear-to-b.from-[#F7F7F8].to-white.relative`. A dissolve. |

## Tokens — Typography

### Signifier — the display face, set at one painted weight from 36px to 90px, with tracking that tightens as the size grows · `--font-display`

- **Substitute:** Canela Text, Tiempos Headline, Lora *(inferred)*
- **Weights:** 400
- **Sizes:** 36px, 40px, 44px, 64px, 90px
- **Line height:** 38.4px–117px — two modes: 1.3 at 64px/83.2px and 90px/117px, and 1.0 at 40px/40px and 64px/64px
- **Letter spacing:** normal, −0.64px (36px), −0.66px (44px), −0.96px and −1.28px (64px), −2.25px (90px)
- **Role:** Every heading the page wants read first, from the 90px hero on `.text-center.text-[90px]!.leading-[1.1].tracking-tight` to the 36px story titles on `.mb-2.md:group-hover:underline.underline-offset-4.decoration-1`. The weight census paints Signifier at 400 and no other weight, so scale and tracking do the work.

### Sohne — the interface face: navigation, body, controls, tables, captions, across five weights · `--font-ui`

- **Substitute:** Inter, Suisse Int'l, Neue Haas Grotesk *(inferred)*
- **Weights:** 400, 430, 450, 480, 500
- **Sizes:** 14px, 15px, 16px, 17px, 18px, 20px, 22px, 26px, 28px
- **Line height:** 15px–35px — 1.0 on button labels (15px/15px, 18px/18px), 1.31 on nav labels (16px/21px), 1.5 on link lists (16px/24px), 1.5 on the hero lede (22px/33px)
- **Letter spacing:** normal everywhere the census measures, except −0.24px at 26px on the feature-card labels
- **Role:** Everything that is not a display line. 430 is the control and nav weight ("Get started", "Product", "Pro"); 480 sets footer column heads ("Explore"); 500 sets section titles and table group labels ("Compare plans and features", "Data sources"); 450 appears at 26px on feature-card labels; 400 carries the body.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display XL | 90px | 117px | −2.25px | `--text-display-xl` |
| Display L | 64px | 83.2px | −0.96px | `--text-display-lg` |
| Display L Tight | 64px | 64px | −1.28px | `--text-display-lg-tight` |
| Display M | 44px | 57.2px | −0.66px | `--text-display-md` |
| Display S | 40px | 40px | normal | `--text-display-sm` |
| Heading | 36px | 38.4px | −0.64px | `--text-heading` |
| Section Title | 28px | 35px | normal | `--text-title` |
| Card Label | 26px | 30.68px | −0.24px | `--text-card-label` |
| Lede | 22px | 33px | normal | `--text-lede` |
| Plan Name | 22px | 27.5px | normal | `--text-plan` |
| Subhead | 20px | 27px | normal | `--text-subhead` |
| Body L | 18px | 24.75px | normal | `--text-body-lg` |
| Field & Stepper Label | 17px | 23px | normal | `--text-label` |
| UI | 16px | 24px | normal | `--text-ui` |
| UI Compact | 16px | 21px | normal | `--text-ui-sm` |
| Control | 15px | 15px | normal | `--text-control` |
| Legal | 15px | 22.5px | normal | `--text-legal` |
| Caption | 14px | 20px | normal | `--text-caption` |

## 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` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 20px | `--spacing-lg` |
| xl | 24px | `--spacing-xl` |
| 2xl | 32px | `--spacing-2xl` |
| 3xl | 48px | `--spacing-3xl` |
| 4xl | 64px | `--spacing-4xl` |
| gutter | 80px | `--spacing-gutter` |
| section | 96px | `--spacing-section` |
| chapter | 120px | `--spacing-chapter` |
| chapter-lg | 160px | `--spacing-chapter-lg` |

### Border Radius

| Element | Value |
|---------|-------|
| Buttons, nav pills, chips, avatar wells | 9999px |
| Home feature card | 24px |
| Pricing plan card, FAQ row, app frame | 16px |
| Ask bar, floating insight card | 20px |
| Story-card image, inline image | 12px |
| Form input, textarea | 10px |
| Section bands, table cells | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Chip | `oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 24px 0px` | `--shadow-chip` |
| Card | `oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 40px 0px` | `--shadow-card` |
| App Frame | `rgba(4, 23, 43, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px` | `--shadow-frame` |
| Hero Image | `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | `--shadow-hero` |

### Layout

- **Page max-width:** 1200px — the footer divider `.h-px.border-t.border-trans-10.col-span-2` paints a 1200×1px box on all pages; bands behind it run the full 1920px viewport, the footer band at 1920×637px.
- **Section gap:** 96px is the most-counted vertical padding across all pages, with 160, 128, 120 and 112px steps above it and 80 and 48px below.
- **Card padding:** 48px on the plan card; 32px on `.absolute.inset-0.p-4.5.@3xs:p-5`; 16px 20px on the insight card; 10px on `.inline-flex.w-fit.items-center.gap-2`.
- **Element gap:** 4px is the most-counted at 32 (icon beside label, on `"Product" .text-2xs.flex.items-center.gap-1`), then 12px at 28 on pricing (`.flex.gap-3.mb-2.items-center`), 8px at 26 inside buttons (`.group.leading-none.font-book.focus:outline-none`), 16px at 8 on all pages (`.flex.gap-4.items-center`), 24px at 6 (`.hidden.md:flex.flex-row.gap-6`, `.flex.gap-6.overflow-x-auto.py-4`), 64px at 4 between columns (`.grid.grid-cols-1.lg:grid-cols-2.gap-8`), then 6px, 32px and 20px at three observations or fewer.

## Components

### Nav Link & Active Pill
**Role:** The top-level wayfinding row — Product, Resources, Customers, Pricing — and the quiet mark for where you are.
Built on `.pt-1.pb-1.5.px-3.5.lg:mx-1`, which measures two ways. The resting variant (13 elements, all pages) fills none, inks #17191C at Sohne 16px/430/21px, padding 4px 14px, radius 9999px, no border, no shadow, box 78–106×31px. State is a whisper: the current item differs from its neighbours by an `rgba(4, 23, 43, 0.05)` fill alone — #04172B at 5%, 3 observations on customers, pricing and contact. Hover is `not measured`.

### Primary Button
**Role:** The single filled action — "Get started", at the nav scale on every page and at the page scale on home, pricing and contact.
`.group.leading-none.font-book.focus:outline-none` fills #17191C at two measured scales. Nav scale (7 elements, all pages): label #FFFFFF at Sohne 15px/430/15px, padding 0px 12px, box 99–105×32px. Page scale (5 elements, home/pricing/contact): label #FFFFFF at Sohne 18px/430/18px, padding 0px 20px, box 98–180×44px. Both sit at radius 9999px with no border and no shadow; internal gap 8px.

### Ghost & Outlined Buttons
**Role:** The second action standing beside the first — "Book a demo" — and the small settings controls on pricing.
The same `.group.leading-none.font-book.focus:outline-none` class with `fill none` gives two ghost rows: 15px/430/15px inked #17191C, padding 0px 12px, box 111×32px (4 elements, all pages), and 18px/430/18px, padding 0px 20px, box 119–169×44px (3 elements, home), both at radius 9999px. A third variant adds `border 1px rgba(10, 23, 43, 0.1)` at 15px/430/15px, padding 0px 12px, radius 9999px, box 76–127×32px (2 elements, pricing), holding "USD". Ghost means no border; the hairline belongs to the select.

### Ask Bar
**Role:** The product's own entry point, dropped into the marketing page — a text field you could type a question into.
`.ai-button-container.relative.bg-white.rounded-[20px]` fills #FFFFFF, padding 16px 20px, radius 20px, no border and `shadow none`, box 400×100px (1 element, home). It holds the placeholder "Ask anything..." inked #A3A6AF on `.ai-button-text.text-secondary-text.text-[15px].font-book`; that label's size and weight are `not measured`. The round send control is a separate row: fill #000000, radius 9999px, padding 0px, no border, no shadow, size `not measured`. The missing shadow is the point: it sits in the page, not above it.

### Floating Insight Card
**Role:** The drifting question card that makes the hero feel like a live product surface.
The box row whose own text reads "Are subscriptions growing in line with revenue e" fills #FFFFFF, inks #17191C at Sohne 16px/400/22px, padding 16px 20px, radius 20px, box 300–380×76–98px (3 elements, home). Its shadow is the deepest card recipe in the census: `oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 40px 0px` — a 1px ring for the edge, a 40px blur for the lift. Keep the copy to one real analytical question; specifics are what make the card credible.

### Presence Chip
**Role:** The collaborator marker that rides beside a cursor — a name, a team, a face.
`.inline-flex.w-fit.items-center.gap-2` fills #FFFFFF, padding 10px 10px, radius 9999px, box 127–204×44px (3 elements, home), holding "Mary Finance". Its shadow is the lighter card recipe: `oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 24px 0px`. The portrait sits in `.relative.size-6.shrink-0.overflow-hidden` — 24×24px, radius 9999px, fill #ECECEC. The qualifying word inks `rgba(23, 25, 28, 0.45)` on `.font-normal.text-xs.text-primary-text/45`, size `not measured`.

### Home Feature Card
**Role:** The three-up proposition block under "A new kind of analytics platform", one tile warm and two tiles grey.
`.absolute.inset-0.p-4.5.@3xs:p-5` measures two ways: fill #F7F7F8 (2 elements, box 346×432px) and fill #FBE1D1 (1 element, box `not measured`). Both take padding 32px 32px, radius 24px, no border, `shadow none`. Labels run Sohne 26px/450/30.68px at −0.24px tracking — #4C4C4C on the grey tiles ("Powered by AI"), #5D2A1A on the peach one ("Built on metrics"). The peach tile leads the row and carries the heat.

### Pricing Plan Card
**Role:** The three-column plan chooser — Pro, Business, Enterprise.
The box row holding "Pro For growing teams building a data culture. $" fills #F7F7F8, padding 48px 48px, radius 16px, no border, `shadow none`, box 453×652px (3 elements, pricing). Inside: plan name at Sohne 22px/430/27.5px #000000 on `.mb-1.font-book.text-xl`; the pitch at Sohne 14px/400/20px #A3A6AF on `.mb-5.text-secondary-text.text-2xs`; the price at Signifier 40px/400/40px #000000, the serif on a numeral; "per seat/month" at Sohne 14px/400/20px #000000. No card is promoted above its neighbours.

### Comparison Table Row
**Role:** The feature matrix under "Compare plans and features" — plan on the horizontal, capability on the vertical.
Two row rhythms, both 900px wide and ruled with `border 1px rgba(10, 23, 43, 0.1)`: `.flex.items-stretch.border-b.border-trans-10` at 900×66px (10 elements) for group headers, `.flex.border-b.border-trans-10.leading-tight` at 900×45px (43 elements) for feature rows. The middle column is tinted by `.bg-secondary-background.w-[20%].py-3.flex` — fill #FAFAFB, ink #777B86 at Sohne 16px/430/20px, padding 12px 0px, radius 0px, box 180×44px. Group labels run Sohne 17px/500/23px #17191C ("Data sources").

### Story Card
**Role:** The customer-story tile — one photograph, one serif headline, one paragraph, one byline.
The image well is `.overflow-hidden.rounded-xl.relative.mb-5`: fill none, radius 12px, no border, `shadow none`, box 568×284px (7 elements, customers). The headline runs Signifier 36px/400/38.4px at −0.64px tracking, inked #000000, on `.mb-2.md:group-hover:underline.underline-offset-4.decoration-1`, underlining on hover, 1px at 4px offset. Body is Sohne 18px/400/24.75px #000000; the byline "By Janna Pollari·Delivery" is Sohne 16px/400/21px #A3A6AF. Two per row, no fill, no border.

### Contact Form Field
**Role:** The sales enquiry form — name, work email, company, message.
`.w-full.px-3.h-[52px].md:h-[48px]` is an input with `fill none`, ink #17191C at Sohne 17px/400/23px, padding 0px 12px, radius 10px, `border 1px rgba(10, 23, 43, 0.1)`, no shadow, box 577×48px (3 elements, contact). The textarea shares the 10px radius on `.w-full.px-3.py-2.5.h-[128px]`. Fields stack in a 20px gap column inside `.w-full.border.border-trans-10.rounded-3xl`, which carries 48px of padding and the same hairline. 10px is the tightest radius here, reserved for text entry.

### Footer
**Role:** The four-column site index closing every page — Explore, Resources, Company, Contact.
The band holding "Explore Overview Explore & analyze Semantic plat" fills #F7F7F8, padding 0px, radius 0px, no border, `shadow none`, box 1920×637px (4 elements, all pages). Column heads run Sohne 16px/480/21px #17191C on `.mb-2.5.sm:mb-3.md:mb-4.font-[480]`; links run Sohne 16px/400/24px #777B86 and underline on hover at a 4px offset; "© Steep Analytics" is Sohne 15px/400/22.5px #777B86. A `.h-px.border-t.border-trans-10.col-span-2` divider at 1200×1px splits index from legal row.

## Do's and Don'ts

### Do
- Set display lines in Signifier at 400 and buy hierarchy with size, 36px to 90px, tracking tightening from −0.64px to −2.25px as the type grows.
- Fill actions with `#17191C` at radius 9999px. Every control fill the layout census measures is neutral: `#17191C`, `rgba(4, 23, 43, 0.05)`, `#000000`.
- Use `rgba(10, 23, 43, 0.1)` for structure — the most-counted border at 65 observations, already on rows, dividers, inputs and the outlined select.
- Hold the side gutter at 80px on `.w-full.md:mx-auto.md:px-12!.lg:px-20!`, the most-counted horizontal inset, and let bands run full-bleed behind it.
- Pick the radius from the element: 9999px controls, 24px feature tiles, 16px plan cards, 20px floating cards, 12px imagery, 10px inputs.
- Keep photography black and white inside the 12px well on `.overflow-hidden.rounded-xl.relative.mb-5`, so a story page's colour is its type.

### Don't
- Don't shadow a table, a plan card or a footer. Every box-shadow the census measures is carried by a home-page element — `.inline-flex.w-fit.items-center.gap-2`, `.flex.bg-primary-background.overflow-hidden.rounded-2xl`, `.relative.z-0.w-full.rounded-[20px]`, and the row whose text reads "Are subscriptions growing in line with revenue e" — while `.group.rounded-2xl.bg-secondary-background.transition-all` paints `shadow none`.
- Don't bold a serif heading. Every Signifier row in the heading census paints 400, "Customer stories" and "Contact our sales team" included.
- Don't put `#FBE1D1` or `#D3E3FC` on a button. The controls census carries neither; they are tile and chapter grounds.
- Don't use `#777B86` or `#A3A6AF` as a fill — all 288 and all 21 observations are text roles, on rows such as "© Steep Analytics" and "By Janna Pollari·Delivery".
- Don't round a table cell. `.bg-secondary-background.w-[20%].py-3.flex` paints radius 0px; the pill vocabulary stops at the controls.
- Don't add a second accent. The warm tile and the cool band each appear a handful of times in the whole capture, and that scarcity is what makes them punctuation.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page ground, floating-card fill. |
| 1 | Surface | `#F7F7F8` | Footer band, feature cards, plan cards. |
| 1.5 | Surface Tint | `#FAFAFB` | Table zebra column, FAQ rows, a home band. |
| 2 | Panel Mist | `#F2F2F3` | `.flex.overflow-hidden.relative.flex-col`, `.absolute.z-0.pointer-events-none.aspect-square`. |
| 2.5 | Avatar Well | `#ECECEC` | The 24×24px portrait well. |
| — | Accent Tile | `#FBE1D1` | One warm feature card, 24px radius. |
| — | Accent Band | `#D3E3FC` | One cool customer-story ground. |
| 10 | Inverted | `#121212` | The semantic-platform chapter, 120px padding. |

## Elevation

Depth is mostly a luminance step, not a shadow: white → #F7F7F8 → #FAFAFB, with `rgba(10, 23, 43, 0.1)` drawing the edge where a step is too subtle. Where the system does lift, it lifts hard. Both card recipes open with a 1px spread ring at 5% before the blur, so the edge stays crisp while the drop goes soft: 4px/24px at 8% for the chip, 8px/40px at 10% for the insight card. The app frame stacks three layers; the hero screenshot takes the heaviest value.

## Imagery

Three registers, kept apart. Photography is black and white throughout the customer stories, shot on location and framed at 568×284px with a 12px radius, the wordmark and hand-drawn sparkle marks overlaid in white — grayscale keeps a logo wall from turning into a colour riot. Illustration is single-weight outline drawing on the home feature cards: interlocking blocks, a rocket, no fill or shading, inked to the card's label colour. Third is the product itself — app screenshots at 294–600px wide on `.rounded-xl.relative` at 12px radius, plus the framed dashboard under the app-frame shadow. Behind the hero headline the tiles show a soft chromatic haze of peach, lilac and pale blue; that wash is not named in the computed inventory, so treat it as a rendered gradient, not a token.

## Layout

Bands are full-bleed and content is contained. The outer shell measures 1920px wide and 10933px tall on the home page, while the readable column is pinned to 1200px. The gutter is 80px on `.w-full.md:mx-auto.md:px-12!.lg:px-20!`. Vertical rhythm escalates rather than repeats: 48px inside cards, 80px on three blocks — `.py-12.md:pt-20.relative.md:pb-32` and `.flex.flex-col.lg:flex-row.gap-20` among them — 96px as the standard section, then 112, 120, 128 and 160px where a chapter needs air, 180px on the pricing close. Grids stay simple — three equal plan cards at 453px, a 64px gap between the big home columns on `.grid.grid-cols-1.lg:grid-cols-2.gap-8`. The nav is a centred pill row, wordmark left and the demo/start pair right, on all four captured pages.

## Typography Voice

Two modes, kept apart. Signifier is the voice of assertion: one weight, huge sizes, tracking pulled in hard enough that 90px reads as −0.025em, sentence case, allowed to break across two lines. Its line height flips between 1.3 on long marketing headlines and 1.0 on page titles like "Customer stories" and "Contact our sales team" — the tight setting makes a two-line title read as a slab, not a paragraph. Sohne is the voice of instruction, and its move is the narrow weight ladder: 400, 430, 450, 480, 500 inside a 100-unit span. That gives a nav label (430) just enough body to separate from a footer link (400) and a section title (500) without any step reading as bold. Button labels sit at line-height 1.0 — 15px/15px and 18px/18px — and both pills print `padding 0px 12px` and `padding 0px 20px`: the vertical padding is zero, so the 32px and 44px boxes are set heights. The two scales differ by height, type size and horizontal padding, which is why they read as one button at two scales.

## Agent Prompt Guide

## Quick Color Reference
- background: #FFFFFF
- text: #000000
- surface: #F7F7F8
- border: rgba(10, 23, 43, 0.1)
- accent: #FBE1D1
- primary action: #17191C

## Example Component Prompts

1. **Primary Button**: Pill, background `#17191C`, label `#FFFFFF` in Sohne 18px weight 430, line-height 18px, padding 0 20px, border-radius 9999px, no border, no shadow, gap 8px, height 44px. Nav variant: Sohne 15px/430/15px, padding 0 12px, height 32px.
2. **Floating Insight Card**: Fill `#FFFFFF`, border-radius 20px, padding 16px 20px, width 300–380px, text `#17191C` in Sohne 16px/400, line-height 22px, box-shadow `oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 40px 0px`. One analytical question, one line, no icon.
3. **Pricing Plan Card**: Fill `#F7F7F8`, border-radius 16px, padding 48px, width 453px, no border, no shadow. Plan name Sohne 22px/430/27.5px `#000000`; description Sohne 14px/400/20px `#A3A6AF`; price Signifier 40px/400/40px `#000000`; unit line Sohne 14px/400/20px `#000000`. CTA scale `not measured` — the census places no button inside the card.
4. **Comparison Table**: 900px wide, rows ruled `1px rgba(10, 23, 43, 0.1)`, header rows 66px and feature rows 45px, radius 0. Label column Sohne 16px/400/20px `#777B86`; group label Sohne 17px/500/23px `#17191C`; middle plan column tinted `#FAFAFB`, 180px wide, 12px vertical padding.
5. **Home Feature Card**: Fill `#FBE1D1`, border-radius 24px, padding 32px, no border, no shadow. Label Sohne 26px/450, line-height 30.68px, letter-spacing −0.24px, colour `#5D2A1A`; body in the same rust; a single-weight outline illustration above it. Grey siblings swap fill to `#F7F7F8` and ink to `#4C4C4C`, at 346×432px.

## Similar Brands

- **Klim Type Foundry** — a paper-white editorial system pairing a high-contrast serif with a low-contrast grotesk, scale carrying hierarchy.
- **Mercury** — near-white canvas, serif display over a neutral UI face, surfaces floated on wide soft shadows instead of borders.
- **Notion** — the same restraint in the neutral ramp, the same pill controls and single-weight line illustration used as warmth.
- **Stripe Press** — display serif set very large with tight negative tracking, one warm accent per spread, black-and-white photography.
- **The Browser Company** — soft pastel tiles in a white page, product fragments over a gradient haze.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #000000;
  --color-primary-text: #17191C;
  --color-canvas: #FFFFFF;
  --color-surface: #F7F7F8;
  --color-surface-tint: #FAFAFB;
  --color-mist: #F2F2F3;
  --color-avatar-well: #ECECEC;
  --color-primary-gray: #777B86;
  --color-secondary-gray: #A3A6AF;
  --color-card-graphite: #4C4C4C;
  --color-rust: #5D2A1A;
  --color-accent-peach: #FBE1D1;
  --color-accent-blue: #D3E3FC;
  --color-inverted: #121212;
  --color-hairline: rgba(10, 23, 43, 0.1);
  --color-nav-active: rgba(4, 23, 43, 0.05);
  --color-muted-anchor: rgba(23, 25, 28, 0.5);
  --color-muted-label: rgba(23, 25, 28, 0.45);
  --color-muted-lede: rgba(23, 25, 28, 0.6);
  --color-inverted-heading: rgba(255, 255, 255, 0.8);
  --color-scrim-dark: rgba(0, 0, 0, 0.1);
  --color-scrim-light: rgba(255, 255, 255, 0.1);
  --color-focus-ring: rgba(47, 111, 229, 0.11);
  --gradient-hero-wash: linear-gradient(to bottom, #F7F7F8, #FFFFFF);

  /* Typography — Families */
  --font-display: 'Signifier', 'Canela Text', 'Tiempos Headline', Georgia, serif;
  --font-ui: 'Sohne', 'Inter', 'Suisse Int\'l', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-display-xl: 90px;         --leading-display-xl: 117px;
  --text-display-lg: 64px;         --leading-display-lg: 83.2px;
  --text-display-lg-tight: 64px;   --leading-display-lg-tight: 64px;
  --text-display-md: 44px;         --leading-display-md: 57.2px;
  --text-display-sm: 40px;         --leading-display-sm: 40px;
  --text-heading: 36px;            --leading-heading: 38.4px;
  --text-title: 28px;              --leading-title: 35px;
  --text-card-label: 26px;         --leading-card-label: 30.68px;
  --text-lede: 22px;               --leading-lede: 33px;
  --text-plan: 22px;               --leading-plan: 27.5px;
  --text-subhead: 20px;            --leading-subhead: 27px;
  --text-body-lg: 18px;            --leading-body-lg: 24.75px;
  --text-label: 17px;              --leading-label: 23px;
  --text-ui: 16px;                 --leading-ui: 24px;
  --text-ui-sm: 16px;              --leading-ui-sm: 21px;
  --text-control: 15px;            --leading-control: 15px;
  --text-legal: 15px;              --leading-legal: 22.5px;
  --text-caption: 14px;            --leading-caption: 20px;
  --tracking-display-xl: -2.25px;
  --tracking-display-lg: -0.96px;
  --tracking-display-lg-tight: -1.28px;
  --tracking-display-md: -0.66px;
  --tracking-heading: -0.64px;
  --tracking-card-label: -0.24px;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 6px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-gutter: 80px;
  --spacing-section: 96px;
  --spacing-chapter: 120px;
  --spacing-chapter-lg: 160px;

  /* Border Radius */
  --radius-input: 10px;
  --radius-image: 12px;
  --radius-card: 16px;
  --radius-float: 20px;
  --radius-tile: 24px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-chip: oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 24px 0px;
  --shadow-card: oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 40px 0px;
  --shadow-frame: rgba(4, 23, 43, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --shadow-hero: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
```

### Tailwind v4

```css
@theme {
  --color-ink: #000000;
  --color-primary-text: #17191C;
  --color-canvas: #FFFFFF;
  --color-surface: #F7F7F8;
  --color-surface-tint: #FAFAFB;
  --color-mist: #F2F2F3;
  --color-avatar-well: #ECECEC;
  --color-primary-gray: #777B86;
  --color-secondary-gray: #A3A6AF;
  --color-card-graphite: #4C4C4C;
  --color-rust: #5D2A1A;
  --color-accent-peach: #FBE1D1;
  --color-accent-blue: #D3E3FC;
  --color-inverted: #121212;
  --color-hairline: rgba(10, 23, 43, 0.1);
  --color-nav-active: rgba(4, 23, 43, 0.05);
  --color-muted-anchor: rgba(23, 25, 28, 0.5);
  --color-muted-label: rgba(23, 25, 28, 0.45);
  --color-muted-lede: rgba(23, 25, 28, 0.6);
  --color-inverted-heading: rgba(255, 255, 255, 0.8);
  --color-scrim-dark: rgba(0, 0, 0, 0.1);
  --color-scrim-light: rgba(255, 255, 255, 0.1);
  --color-focus-ring: rgba(47, 111, 229, 0.11);

  --font-display: 'Signifier', 'Canela Text', 'Tiempos Headline', Georgia, serif;
  --font-ui: 'Sohne', 'Inter', 'Suisse Int\'l', ui-sans-serif, system-ui, sans-serif;

  --text-display-xl: 90px;
  --text-display-xl--line-height: 117px;
  --text-display-xl--letter-spacing: -2.25px;
  --text-display-lg: 64px;
  --text-display-lg--line-height: 83.2px;
  --text-display-lg--letter-spacing: -0.96px;
  --text-display-lg-tight: 64px;
  --text-display-lg-tight--line-height: 64px;
  --text-display-lg-tight--letter-spacing: -1.28px;
  --text-display-md: 44px;
  --text-display-md--line-height: 57.2px;
  --text-display-md--letter-spacing: -0.66px;
  --text-display-sm: 40px;
  --text-display-sm--line-height: 40px;
  --text-heading: 36px;
  --text-heading--line-height: 38.4px;
  --text-heading--letter-spacing: -0.64px;
  --text-title: 28px;
  --text-title--line-height: 35px;
  --text-card-label: 26px;
  --text-card-label--line-height: 30.68px;
  --text-card-label--letter-spacing: -0.24px;
  --text-lede: 22px;
  --text-lede--line-height: 33px;
  --text-plan: 22px;
  --text-plan--line-height: 27.5px;
  --text-subhead: 20px;
  --text-subhead--line-height: 27px;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 24.75px;
  --text-label: 17px;
  --text-label--line-height: 23px;
  --text-ui: 16px;
  --text-ui--line-height: 24px;
  --text-ui-sm: 16px;
  --text-ui-sm--line-height: 21px;
  --text-control: 15px;
  --text-control--line-height: 15px;
  --text-legal: 15px;
  --text-legal--line-height: 22.5px;
  --text-caption: 14px;
  --text-caption--line-height: 20px;

  --spacing-3xs: 4px;
  --spacing-2xs: 6px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-gutter: 80px;
  --spacing-section: 96px;
  --spacing-chapter: 120px;
  --spacing-chapter-lg: 160px;

  --radius-input: 10px;
  --radius-image: 12px;
  --radius-card: 16px;
  --radius-float: 20px;
  --radius-tile: 24px;
  --radius-pill: 9999px;

  --shadow-chip: oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 24px 0px;
  --shadow-card: oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 40px 0px;
  --shadow-frame: rgba(4, 23, 43, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --shadow-hero: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
```