---
version: alpha
name: Notion
description: "A white page, a warm grey card, one blue that means go."
colors:
  surface: "#FFFFFF"
  outline: "rgba(0, 0, 0, 0.08)"
  neutral: "#F6F5F4"
  primary: "#0075DE"
  on-surface: "rgba(0, 0, 0, 0.95)"
  body-ink: "rgba(0, 0, 0, 0.9)"
  muted-ink: "rgba(0, 0, 0, 0.54)"
  true-black: "#000000"
  bento-grey: "#F9F9F8"
  hairline: "rgba(0, 0, 0, 0.1)"
  link-blue: "#097FE8"
  deep-blue: "#005BAB"
  blue-tint: "#E6F3FE"
  mint: "#D0F4D8"
  signal-yellow: "#FFB110"
  signal-red: "#F64932"
  warm-grey: "#615D59"
typography:
  display:
    fontFamily: NotionInter
    fontSize: 96px
    fontWeight: 400
    lineHeight: 100px
    letterSpacing: -4.6px
  display-accent:
    fontFamily: NotionInter
    fontSize: 72px
    fontWeight: 400
    lineHeight: 87.12px
    letterSpacing: -2px
  heading-xl:
    fontFamily: Lyon Text
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -2.125px
  heading-l:
    fontFamily: Lyon Text
    fontSize: 54px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -1.875px
  heading-m:
    fontFamily: Lyon Text
    fontSize: 42px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -1.5px
  heading-s:
    fontFamily: Lyon Text
    fontSize: 22px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.25px
  title:
    fontFamily: Lyon Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.125px
  card-title:
    fontFamily: Lyon Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  body-l:
    fontFamily: Lyon Text
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.125px
  body-m:
    fontFamily: Lyon Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  body-s:
    fontFamily: Lyon Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  label:
    fontFamily: Lyon Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  label-s:
    fontFamily: Lyon Text
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  caption:
    fontFamily: Lyon Text
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  overline:
    fontFamily: Lyon Text
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0.125px
  quote:
    fontFamily: Lyon Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
rounded:
  buttons-dropdown-rows-hero-product-frame: 8px
  cards-bentos-media-frames-video-containe: 12px
  nav-links-marquee-glyphs: 4px
  code-chips-inline-links-snackbar: 5px
  highlight-pill-proof-dots-pill-control: 9999px
  bento-image: 12px
  video-iframe: 1px
spacing:
  3xs: 4px
  2xs: 8px
  xs: 12px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 40px
  2xl: 64px
  3xl: 80px
  4xl: 96px
---
# Notion — Style Reference
> A white page, a warm grey card, one blue that means go.

**Theme:** light

Notion runs one light system across all four captured pages, with two modes inside it: the marketing pages assemble bento panes, duotone customer video and a scrolling logo wall; the release log drops that vocabulary for a date rail beside one reading column; the feature index sits between them as a grid of warm grey cards. The palette is ink on white, and the ink is translucent rather than solid — rgba(0, 0, 0, 0.9) for interface and body, rgba(0, 0, 0, 0.95) for headlines — so nothing is quite pure black. Colour arrives in two forms: a blue that carries the actions, and saturated dots and duotones that decorate proof rather than controls. The type is one variable sans at four weights, and the signature move is tracking that tightens as size grows, from `normal` at label sizes to −4.6px on the hero. Depth is a hairline and a three-step luminance ladder, with 12px on cards and 8px on controls holding the geometry.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#FFFFFF` | `--color-canvas` | Page ground, nav, footer, bento fill. Also the secondary button's fill, which is why that button needs a tint or a border. |
| Headline Ink | `rgba(0, 0, 0, 0.95)` | `--color-ink-strong` | Every display and section heading, the wordmark, the pill-control label. Never a fill. |
| Body Ink | `rgba(0, 0, 0, 0.9)` | `--color-ink` | The default text colour: nav labels, body copy, card copy, code. Use it wherever no other rule applies. |
| Muted Ink | `rgba(0, 0, 0, 0.54)` | `--color-ink-muted` | Eyebrows, footer column headings, the small-print line above the logo wall. |
| True Black | `#000000` | `--color-black` | Held back for feature-card and bento titles and the filled circular arrow. Not the body colour. |
| Neutral Surface | `#F6F5F4` | `--color-surface` | The card plane: feature cards, code chips, and the band that hosts the closing call to action. Its border count exceeds its fill count. |
| Bento Grey | `#F9F9F8` | `--color-surface-soft` | One step brighter than the surface, and used inside the bento card for its header and media panes. |
| Hairline | `rgba(0, 0, 0, 0.1)` | `--color-hairline` | The structural line: bordered cards, code chips, hero frame, docs-page footer. |
| Release Rule | `rgba(0, 0, 0, 0.08)` | `--color-rule` | Two points lighter than the hairline, carried by the changelog entry divider. |
| Action Blue | `#0075DE` | `--color-action` | The filled primary button and the inline text link. The colour a click is allowed to be. |
| Link Blue | `#097FE8` | `--color-link` | Ink on the white secondary button, and one of the saturated dots. |
| Deep Blue | `#005BAB` | `--color-action-deep` | Ink on the tinted secondary button; the multiply pass of the blue duotone. |
| Blue Tint | `#E6F3FE` | `--color-action-tint` | The secondary button's fill and one hero highlight pill. Never a page background. |
| Mint | `#D0F4D8` | `--color-mint` | The highlight pill behind the hero's rotating verb, and the rarest painted fill in the census. |
| Signal Yellow | `#FFB110` | `--color-signal-yellow` | A proof dot and the screen pass of the amber duotone. Editorial only. |
| Signal Red | `#F64932` | `--color-signal-red` | A proof dot and the screen pass of the coral duotone. Never a warning, never a CTA. |
| Warm Grey | `#615D59` | `--color-warm-grey` | The stats marquee text: a warm neutral, which keeps it in family with `#F6F5F4`. |

## Tokens — Typography

### NotionInter — the whole interface and every headline, from 12px labels to a 96px hero, at 400/500/600/700 · `--font-sans`
- **Substitute:** Inter, ui-sans-serif, system-ui
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px, 14px, 16px, 18px, 20px, 22px, 42px, 54px, 64px, 72px, 96px
- **Line height:** 16px at 12px through 100px at 96px — a ratio that falls from 1.43 at label sizes to 1.04 at display
- **Letter spacing:** 0.125px at 12px; `normal` from 14px to 16px; −0.125px at 18px and 20px; −0.25px at 22px; −1.5px at 42px; −1.875px at 54px; −2px at 72px; −2.125px at 64px; −4.6px at 96px
- **Role:** The whole interface and every headline, from 12px labels to a 96px hero, at 400/500/600/700.

### Lyon Text — the quotation voice, set at 400 and, wherever the census finds it, on a blockquote · `--font-serif`
- **Substitute:** Freight Text Pro, Tiempos Text, Georgia
- **Weights:** 400
- **Sizes:** 16px, 18px
- **Line height:** 24px at 16px, 28px at 18px
- **Letter spacing:** normal at both sizes
- **Role:** The quotation voice, set at 400 and, wherever the census finds it, on a blockquote.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 96px / 600 | 100px | −4.6px | `--text-display` |
| Display Accent | 72px / 500 | 87.12px | −2px | `--text-display-accent` |
| Heading XL | 64px / 700 | 64px | −2.125px | `--text-heading-xl` |
| Heading L | 54px / 700 | 56px | −1.875px | `--text-heading-lg` |
| Heading M | 42px / 700 | 48px | −1.5px | `--text-heading-md` |
| Heading S | 22px / 700 | 28px | −0.25px | `--text-heading-sm` |
| Title | 18px / 700 | 28px | −0.125px | `--text-title` |
| Card Title | 16px / 700 | 24px | normal | `--text-card-title` |
| Body L | 20px / 400 | 28px | −0.125px | `--text-body-lg` |
| Body M | 18px / 400 | 28px | normal | `--text-body` |
| Body S | 16px / 400 | 24px | normal | `--text-body-sm` |
| Label | 16px / 500 | 24px | normal | `--text-label` |
| Label S | 14px / 500 | 20px | normal | `--text-label-sm` |
| Caption | 14px / 400 | 20px | normal | `--text-caption` |
| Overline | 12px / 500 | 16px | 0.125px | `--text-overline` |
| Quote | 18px / 400 (Lyon Text) | 28px | normal | `--text-quote` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** compact at the control, comfortable at the page

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 4px | `--spacing-1` |
| 2xs | 8px | `--spacing-2` |
| xs | 12px | `--spacing-3` |
| sm | 16px | `--spacing-4` |
| md | 24px | `--spacing-6` |
| lg | 32px | `--spacing-8` |
| xl | 40px | `--spacing-10` |
| 2xl | 64px | `--spacing-16` |
| 3xl | 80px | `--spacing-20` |
| 4xl | 96px | `--spacing-24` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons, dropdown rows, hero product frame | 8px |
| Cards, bentos, media frames, video container | 12px |
| Nav links, marquee glyphs | 4px |
| Code chips, inline links, snackbar | 5px |
| Highlight pill, proof dots, pill control | 9999px |
| Circular arrow | 100% |
| Play/pause control | 50% |
| Bento image (top corners only) | 12px 12px 0px 0px |
| Video iframe | 1px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Media | `rgba(0,0,0,0.01) 0 0.175px 1.041px, rgba(0,0,0,0.02) 0 0.8px 2.925px, rgba(0,0,0,0.027) 0 2.025px 7.847px, rgba(0,0,0,0.04) 0 4px 18px` | `--shadow-media` |
| Float | `rgba(0,0,0,0.008) 0 0.667px 3.502px, rgba(0,0,0,0.016) 0 2.933px 7.252px, rgba(0,0,0,0.02) 0 7.2px 14.462px, rgba(0,0,0,0.024) 0 13.867px 28.348px, rgba(0,0,0,0.03) 0 23.333px 52.123px, rgba(0,0,0,0.04) 0 36px 89px` | `--shadow-float` |
| Nav (transparent, held for scroll) | `rgba(0, 0, 0, 0) 0px 1px 0px 0px` | `--shadow-nav` |

### Layout
- **Page max-width:** not measured; the homepage main pads 96px vertically, 140.8px horizontally (`.homepage-module-scss-module__-Qs3Ha__main`)
- **Section gap:** 80px on footers and the features-page section, 96px on the homepage main, 64px on the grey band
- **Card padding:** 24px on the bordered white card and the bento header; 0px on the feature-card surface
- **Element gap:** 8px default, 4px in the nav link cluster, 12px on the hero CTA row, 16px in the nav container, 24px across the bento and card grids, 40px 24px on the footer grid

## Components

### Global Navigation Bar
**Role:** The persistent top bar: wordmark, four menu entries, log-in, and the filled action.

`.globalNavigation-module-scss-module__HWB10a__link` paints the menu entries as anchors with no fill, 16px/400 on a 24px line, padding 5px 10px and a 4px radius — tighter than the 8px every real button carries. The disclosure entries repeat that geometry on a `<button>` (`.globalNavigation-module-scss-module__HWB10a__link.globalNavigati`, 8 of them). The bar carries `rgba(0, 0, 0, 0) 0px 1px 0px 0px` on `.globalNavigation-module-scss-module__HWB10a__globalNavigation`: a shadow declared at zero opacity, held for the scrolled state. Container gap 16px, link cluster 4px. Dropdown rows use `.inline-full.menuList-module-scss-module__qf-KyW__menuListItemAnc` — padding 3px 8px, radius 8px, gap 0px 8px.

### Primary Button
**Role:** The one filled thing on the screen: get the product.

The homepage variant (`.semanticTypography-module-scss-module__Db2fhq__semanticTypograph`, "Get Notion free") fills `#0075DE` with `#FFFFFF` ink at 16px/500/24px, padding 6px 15px, radius 8px, no border, no shadow. The shared button class (`.button-module-scss-module__pIQ4pG__button.button-module-scss-mod`) measures two ways and both are real: padding 4px 14px across all pages, and padding 11px 20px once on the features page. Keep the radius and fill fixed across all three; vary only the padding. The label sits at 500; emphasis comes from the fill, not the weight.

### Secondary Button
**Role:** The partner action beside the primary: talk to a person instead of signing up.

Two measured variants share a geometry of 16px/500/24px, padding 6px 15px, radius 8px, no border and no shadow. The first fills `#FFFFFF` with `#097FE8` ink (`.semanticTypography-module-scss-module__Db2fhq__semanticTypograph`, "Request a demo"). The second fills `#E6F3FE` with `#005BAB` ink, darkening the ink one step as the ground tints so contrast holds. The shared button class carries the tinted variant once at padding 11px 20px ("Contact sales"). Both sit at the primary's 8px radius.

### Hero Block
**Role:** The first screen: a headline with one live word, a single supporting line, two buttons, and a framed product shot.

The headline is 96px/600 on a 100px line at −4.6px (`.semanticTypography-module-scss-module__Db2fhq__semanticTypograph`, "Where teams and agents Ship together."). One verb inside it swaps into a pill (`.homepageHeroTeamsAndAgents-module-scss-module__KlQGRG__productPi`): 72px/500 on 87.12px at −2px, ink rgba(0, 0, 0, 0.95), radius 9999px, filled `#D0F4D8` in one capture and `#E6F3FE` in another; a third pale yellow state appears in the tiles unnamed by the inventory, so its fill is `not measured`. Supporting line: 20px/400/28px at −0.125px in rgba(0, 0, 0, 0.9). CTA row gap 16px. The product frame (`.HeroMedia-module-scss-module__t-AqdW__productImage`) takes radius 8px, a `rgba(0, 0, 0, 0.1)` border and the Float shadow; its play/pause control fills `rgba(0, 0, 0, 0.05)` with `#FFFFFF` ink at radius 50%.

### Bento Card
**Role:** The marketing grid unit: a titled header over a media pane, the whole tile clickable.

`.bento-module-scss-module__xvimDq__bento.base-module-scss-module_` is an `<article>` filled `#FFFFFF` at radius 12px, no border, no shadow; the inner wrapper and the anchor repeat the 12px. The header (`.bento-module-scss-module__xvimDq__bentoHeader.bentos-module-scss`) fills `#F9F9F8` at padding 24px 24px, radius 0px, and the media pane below takes the same `#F9F9F8` — the tile's separation is a one-step luminance drop from its own white, not a line. The header holds an eyebrow at 14px/400/20px in rgba(0, 0, 0, 0.9) over a title at 22px/700/28px at −0.25px in `#000000`. Grid gap 24px; the image rounds top corners only, `12px 12px 0px 0px`.

### Feature Card
**Role:** The features index unit: a linked title, two lines of explanation, nothing else.

`.surface.surfaceNeutral.surface-module-scss-module__CFFfpW__surfa` is an `<article>` filled `#F6F5F4` at radius 12px with a 2px border painted in `#F6F5F4` — its own fill value, a self-coloured border that adds bleed, not a line. Its padding measures 0px 0px and the inner stack (`.block-module-scss-module__cFn49q__blockStack`) also 0px, so the visible inset is `not measured`. The title is 18px/700/28px at −0.125px in solid `#000000` with a trailing arrow (`.block-module-scss-module__YQf83G__blockTitleLink`, "Docs→"); the body is 16px/400/24px in rgba(0, 0, 0, 0.95). Content gap 4px, grid gap 24px.

### Use-case Card
**Role:** The small linked card in the "See what Notion can do" row: an icon, a two-line title, an arrow.

`.flex.flex-row.items-center.lg:items-start` fills `#FFFFFF` at padding 24px 24px, radius 12px, and a 1px `rgba(0, 0, 0, 0.1)` border with no shadow. Among the boxes census it is the card that pairs a visible hairline with real padding — separation for a card sitting on white rather than on the grey band. Titles run 16px/700/24px at `normal` tracking in `#000000` ("Triage product feedback→"); at 16px the negative display values would close the counters. The row is labelled above at 14px/400/20px in rgba(0, 0, 0, 0.54).

### Circular Arrow
**Role:** The affordance on a bento card: a filled disc that says the whole tile is a link.

`.arrow-module-scss-module__WbIAoq__arrow.arrow-module-scss-module` is a `<span>` filled solid `#000000` with `#FFFFFF` ink, radius 100%, carrying a single "→" glyph at 20px/600 on a 28px line at −0.125px, no border and no shadow. The system's inversion moment: black fill, white mark, in a palette that otherwise keeps black for type. At 600 it sits a step under the 700 of the heading beside it. Six of them, one per bento tile.

### Duotone Testimonial Card
**Role:** The customer video tile: a face under a two-pass colour treatment, a serif quote, a name and title.

`.socialProofV2-module-scss-module__Mcafya__card` is an anchor with no fill, no padding, radius 12px, no shadow — the colour is entirely in the artwork. Each portrait is a screen pass (`.socialProofV2-module-scss-module__Mcafya__screen`, painting `#097FE8`, `#F64932` or `#FFB110`) over a multiply pass (`.socialProofV2-module-scss-module__Mcafya__multiply`, painting `#005BAB`, `#E32D14` or `#E89D01`) — one hue at two depths, so the three read as a family, not three brand colours. The quote is Lyon Text 18px/400/28px in `#FFFFFF`; the attribution NotionInter 14px/400/20px in `#FFFFFF`. Figure gap 8px, grid gap 24px.

### Proof Marquees
**Role:** The two scrolling bands of social proof: customer wordmarks first, then the numbers.

The logo wall wrapper (`.homepageLogoWall-module-scss-module__PDRQGa__logoWallMarqueeWrap`) fills `#FFFFFF` at padding 4px 0px, radius 0px; each mark (`.customerLogo-module-scss-module__gQ6u1q__artworkImage`) is an `<img>` painted `rgba(0, 0, 0, 0.75)` at radius 0px, so thirty-four brand logos arrive as one translucent ink. Marquee gap 8px. The stats band sets its lines at 14px/500/20px in `#615D59` (`.typography-module-scss-module__s4Stoa__typography.statsMarquee-m`, "G2's #1 knowledge base for 3 consecutive years") with a 24px/500 glyph at radius 4px in `#A39E98`. The eyebrow above the wall is 14px/400/20px in rgba(0, 0, 0, 0.54).

### Release Entry
**Role:** One item in the changelog: a date in the left rail, a headline, media and prose in the right column.

`.release-module-scss-module__Ht_S5q__release` is an `<article>` with no fill, padding 40px 0px, radius 0px, and a 1px `rgba(0, 0, 0, 0.08)` border — the lightest rule in the system; on stacked entries a heavier line would build a table. The date (`.release-module-scss-module__Ht_S5q__date`) is a `<time>` at 16px/400/24px in rgba(0, 0, 0, 0.6). Body copy runs 18px/400/28px in rgba(0, 0, 0, 0.9), `<strong>` at 18px/700/28px; entry headline size is `not measured` for this class. Embedded video (`.videoPlayer-module-scss-module__ZFVVSq__videoContainer`) takes radius 12px over an iframe at radius 1px.

### Inline Code Chip
**Role:** A UI path or setting name quoted inside changelog prose.

`.contentfulRichText-module-scss-module__GleVCa__code` fills `#F6F5F4` with `rgba(0, 0, 0, 0.9)` ink at 14px/500 on a 28px line, padding 1px 5px, radius 5px, and a 1px `rgba(0, 0, 0, 0.1)` border. It keeps NotionInter rather than a mono face, drops below the prose around it, and inherits that prose's 28px line. Its 5px radius is shared with the inline link and the snackbar ("Settings").

## Do's and Don'ts

### Do
- Ink text with `rgba(0, 0, 0, 0.9)` for interface and body and `rgba(0, 0, 0, 0.95)` for headlines; keep solid `#000000` for the feature-card title (`.block-module-scss-module__YQf83G__blockTitleLink`, "Docs→"), the bento title and the filled arrow.
- Hold every control at 8px and every card at 12px. Those two radii carry the geometry, at 145 and 123 painted elements.
- Let tracking follow size: 0.125px at 12px, `normal` through 16px, −1.5px at 42px, −4.6px at 96px. Scale is the hierarchy; weight confirms it.
- Stack the surfaces `#FFFFFF` → `#F9F9F8` → `#F6F5F4` and let a one-step luminance drop do what a border would.
- Pair one `#0075DE` fill with one white-or-tinted secondary, at identical padding and radius.

### Don't
- Don't reach for a shadow to separate a card. The shadows census paints three stacks, all on product imagery, the hero frame and the snackbar, none with a layer darker than `rgba(0, 0, 0, 0.04)`.
- Don't fill a control with a signal colour. Every fill in the controls census is `#0075DE`, `#FFFFFF`, `#E6F3FE` or `rgba(0, 0, 0, 0.05)`; `#F64932`, `#FFB110`, `#1AAE39` and `#1313BA` sit on `.graphic-module-scss-module__pohIQa__graphic` spans and the socialProof duotone.
- Don't set Lyon Text at anything but 400: the census's weights row for the family reads `Lyon Text: 400`, and both its carriers — blockquote ×6 at 18px and blockquote ×4 at 16px ("We shape our tools, and thereafter our tools sha") — paint that one weight.
- Don't give the feature card a contrasting border: `.surface.surfaceNeutral.surface-module-scss-module__CFFfpW__surfa` paints its 2px border in its own fill value.
- Don't add a hover shadow to a button. Every control row in the layout census reads `shadow none`.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page, nav, footer, bento card, logo-wall band |
| 1 | Bento Grey | `#F9F9F8` | Bento header and media panes, inside the white card |
| 2 | Neutral Surface | `#F6F5F4` | Feature cards, code chips, the full-width closing band |
| 3 | Hairline | `rgba(0, 0, 0, 0.1)` | The border plane: bordered cards, code chips, hero frame, docs footer |
| 4 | Inverted | `#111111` | Snackbar fill, the panel that flips the scheme |

## Elevation

Near-flat by policy. Depth is a luminance step and a hairline: `#FFFFFF` to `#F9F9F8` to `#F6F5F4` is a three-rung ladder, and `rgba(0, 0, 0, 0.1)` draws the line when two surfaces share a value. Shadow is reserved for product screenshots and the snackbar, and even there the darkest layer is `rgba(0, 0, 0, 0.04)`: the Media stack ends at `0 4px 18px`, the Float stack at `0 36px 89px`. The nav declares a shadow at zero opacity and paints nothing. Cards, buttons, bentos and the feature grid read `shadow none`.

## Imagery

Three registers, all on white. First, product screenshots in rounded frames at 8px or 12px, angled or bleeding off the tile, carrying the Media or Float shadow. Second, hand-drawn ink illustration: single-weight contour faces with no fill, set beside headlines at small scale, which keeps a dense enterprise page from reading as enterprise. Third, duotone portraits from screen and multiply passes in blue, coral and amber, in the testimonial row. Customer wordmarks flatten to `rgba(0, 0, 0, 0.75)` so the logo wall stays typographic. Colour texture panels sit behind the feature-page product shots; those grounds are not in the inventory.

## Layout

Full-bleed sections on a centred column. The homepage main pads 96px vertically and 140.8px horizontally; the closing band pads 64px 32px and fills `#F6F5F4`; footers and the features-page section pad 80px 0px. Card grids run three across at 24px gaps on the features page, two for bentos, three for testimonials, and the footer four link columns on a `40px 24px` grid. The nav persists across all four pages at a 16px container gap with a 4px link cluster. The changelog changes the model: a date in the left rail at `rgba(0, 0, 0, 0.6)` against one prose column, entries separated by a `rgba(0, 0, 0, 0.08)` rule and 40px of padding, the footer picking up a `rgba(0, 0, 0, 0.1)` border it does not carry on the marketing pages.

## Typography Voice

Two modes, one family. In display mode NotionInter runs 600 at 96px on a 100px line at −4.6px — a ratio just over 1.0, so the hero closes into a block. In interface mode the same face runs 400 and 500 at 14px and 16px on 20px and 24px lines, tracking at `normal`, spaced for scanning. The scale between them is empty: 22px → 42px → 54px → 64px → 72px → 96px, nothing in the thirties, which is why the page reads as headline-then-text with no middle voice. Lyon Text is the break, at 400, reserved for quotation — a serif appears when a human is speaking.

## Agent Prompt Guide

Build on `#FFFFFF`, ink in translucent black, spend colour on the action and the proof.

## Quick Color Reference
- background: `#FFFFFF`
- text: `rgba(0, 0, 0, 0.9)`
- surface: `#F6F5F4`
- border: `rgba(0, 0, 0, 0.1)`
- accent: `#F64932`
- primary action: `#0075DE`

## Example Component Prompts

1. **CTA pair**: Two anchors, 12px apart. Primary: fill `#0075DE`, ink `#FFFFFF`, NotionInter 16px/500 on 24px, padding 6px 15px, radius 8px, no border, no shadow. Secondary: fill `#E6F3FE`, ink `#005BAB`, identical type, padding, radius.
2. **Feature card grid**: Three columns, 24px gap. Each card `#F6F5F4` at radius 12px with a 2px `#F6F5F4` border. Title NotionInter 18px/700 on 28px at −0.125px in `#000000` with a trailing "→"; body 16px/400 on 24px in `rgba(0, 0, 0, 0.95)`; 4px between.
3. **Bento tile**: `#FFFFFF` article at radius 12px, no border, no shadow. Header pane `#F9F9F8`, padding 24px, with an eyebrow at 14px/400/20px in `rgba(0, 0, 0, 0.9)`, a title at 22px/700/28px at −0.25px in `#000000`, and a `#000000` disc at radius 100% holding a white "→" at 20px/600. Media pane `#F9F9F8`; image rounded `12px 12px 0px 0px`.
4. **Hero**: Centred headline, NotionInter 96px/600 on 100px at −4.6px in `rgba(0, 0, 0, 0.95)`, one word inside a 9999px pill filled `#D0F4D8` at 72px/500 on 87.12px at −2px. Sub-line 20px/400/28px at −0.125px in `rgba(0, 0, 0, 0.9)`. Below, a screenshot at radius 8px with a 1px `rgba(0, 0, 0, 0.1)` border and the Float shadow.
5. **Changelog entry**: Left rail date at 16px/400/24px in `rgba(0, 0, 0, 0.6)`; right column prose at 18px/400/28px in `rgba(0, 0, 0, 0.9)`, inline chips filled `#F6F5F4` at 14px/500/28px, padding 1px 5px, radius 5px, 1px `rgba(0, 0, 0, 0.1)` border. Separate entries with a 1px `rgba(0, 0, 0, 0.08)` rule and 40px of padding.

## Similar Brands

- **Stripe** — the same near-white canvas, one saturated blue for every action, and tightly tracked large sans doing the persuading.
- **Figma** — a white ground with saturated accents that live in illustration and proof rather than in controls.
- **Mailchimp** — the closest match on hand-drawn single-weight ink illustration warming a systematic layout.
- **Basecamp** — kindred in its plain white pages, warm neutral cards and refusal to decorate structure.
- **Airtable** — a similar vocabulary of coloured chips and dots as data language, kept off the buttons.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-black: #000000;
  --color-ink: rgba(0, 0, 0, 0.9);
  --color-ink-strong: rgba(0, 0, 0, 0.95);
  --color-ink-muted: rgba(0, 0, 0, 0.54);
  --color-ink-date: rgba(0, 0, 0, 0.6);
  --color-ink-arrow: rgba(0, 0, 0, 0.59);
  --color-logo: rgba(0, 0, 0, 0.75);
  --color-hairline: rgba(0, 0, 0, 0.1);
  --color-rule: rgba(0, 0, 0, 0.08);
  --color-scrim: rgba(0, 0, 0, 0.05);
  --color-surface: #F6F5F4;
  --color-surface-soft: #F9F9F8;
  --color-inverted: #111111;
  --color-warm-grey: #615D59;
  --color-warm-grey-light: #A39E98;
  --color-action: #0075DE;
  --color-link: #097FE8;
  --color-action-deep: #005BAB;
  --color-action-tint: #E6F3FE;
  --color-mint: #D0F4D8;
  --color-signal-yellow: #FFB110;
  --color-signal-yellow-deep: #E89D01;
  --color-signal-red: #F64932;
  --color-signal-red-deep: #E32D14;
  --color-signal-green: #1AAE39;
  --color-signal-violet: #1313BA;

  /* Typography — Families */
  --font-sans: 'NotionInter', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Lyon Text', 'Tiempos Text', Georgia, serif;

  /* Typography — Scale */
  --text-display: 96px;      --leading-display: 100px;      --tracking-display: -4.6px;
  --text-display-accent: 72px; --leading-display-accent: 87.12px; --tracking-display-accent: -2px;
  --text-heading-xl: 64px;   --leading-heading-xl: 64px;    --tracking-heading-xl: -2.125px;
  --text-heading-lg: 54px;   --leading-heading-lg: 56px;    --tracking-heading-lg: -1.875px;
  --text-heading-md: 42px;   --leading-heading-md: 48px;    --tracking-heading-md: -1.5px;
  --text-heading-sm: 22px;   --leading-heading-sm: 28px;    --tracking-heading-sm: -0.25px;
  --text-title: 18px;        --leading-title: 28px;         --tracking-title: -0.125px;
  --text-card-title: 16px;   --leading-card-title: 24px;
  --text-body-lg: 20px;      --leading-body-lg: 28px;       --tracking-body-lg: -0.125px;
  --text-body: 18px;         --leading-body: 28px;
  --text-body-sm: 16px;      --leading-body-sm: 24px;
  --text-label: 16px;        --leading-label: 24px;
  --text-label-sm: 14px;     --leading-label-sm: 20px;
  --text-caption: 14px;      --leading-caption: 20px;
  --text-overline: 12px;     --leading-overline: 16px;      --tracking-overline: 0.125px;
  --text-quote: 18px;        --leading-quote: 28px;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* Border Radius */
  --radius-nav: 4px;
  --radius-chip: 5px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-pill: 9999px;
  --radius-circle: 100%;

  /* Shadows */
  --shadow-media: rgba(0,0,0,0.01) 0 0.175px 1.041px 0, rgba(0,0,0,0.02) 0 0.8px 2.925px 0, rgba(0,0,0,0.027) 0 2.025px 7.847px 0, rgba(0,0,0,0.04) 0 4px 18px 0;
  --shadow-float: rgba(0,0,0,0.008) 0 0.667px 3.502px 0, rgba(0,0,0,0.016) 0 2.933px 7.252px 0, rgba(0,0,0,0.02) 0 7.2px 14.462px 0, rgba(0,0,0,0.024) 0 13.867px 28.348px 0, rgba(0,0,0,0.03) 0 23.333px 52.123px 0, rgba(0,0,0,0.04) 0 36px 89px 0;
  --shadow-nav: rgba(0, 0, 0, 0) 0px 1px 0px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FFFFFF;
  --color-black: #000000;
  --color-ink: rgba(0, 0, 0, 0.9);
  --color-ink-strong: rgba(0, 0, 0, 0.95);
  --color-ink-muted: rgba(0, 0, 0, 0.54);
  --color-ink-date: rgba(0, 0, 0, 0.6);
  --color-ink-arrow: rgba(0, 0, 0, 0.59);
  --color-logo: rgba(0, 0, 0, 0.75);
  --color-hairline: rgba(0, 0, 0, 0.1);
  --color-rule: rgba(0, 0, 0, 0.08);
  --color-scrim: rgba(0, 0, 0, 0.05);
  --color-surface: #F6F5F4;
  --color-surface-soft: #F9F9F8;
  --color-inverted: #111111;
  --color-warm-grey: #615D59;
  --color-warm-grey-light: #A39E98;
  --color-action: #0075DE;
  --color-link: #097FE8;
  --color-action-deep: #005BAB;
  --color-action-tint: #E6F3FE;
  --color-mint: #D0F4D8;
  --color-signal-yellow: #FFB110;
  --color-signal-yellow-deep: #E89D01;
  --color-signal-red: #F64932;
  --color-signal-red-deep: #E32D14;
  --color-signal-green: #1AAE39;
  --color-signal-violet: #1313BA;

  --font-sans: 'NotionInter', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Lyon Text', 'Tiempos Text', Georgia, serif;

  --text-display: 96px;
  --text-display--line-height: 100px;
  --text-display--letter-spacing: -4.6px;
  --text-display-accent: 72px;
  --text-display-accent--line-height: 87.12px;
  --text-display-accent--letter-spacing: -2px;
  --text-heading-xl: 64px;
  --text-heading-xl--line-height: 64px;
  --text-heading-xl--letter-spacing: -2.125px;
  --text-heading-lg: 54px;
  --text-heading-lg--line-height: 56px;
  --text-heading-lg--letter-spacing: -1.875px;
  --text-heading-md: 42px;
  --text-heading-md--line-height: 48px;
  --text-heading-md--letter-spacing: -1.5px;
  --text-heading-sm: 22px;
  --text-heading-sm--line-height: 28px;
  --text-heading-sm--letter-spacing: -0.25px;
  --text-title: 18px;
  --text-title--line-height: 28px;
  --text-title--letter-spacing: -0.125px;
  --text-card-title: 16px;
  --text-card-title--line-height: 24px;
  --text-body-lg: 20px;
  --text-body-lg--line-height: 28px;
  --text-body-lg--letter-spacing: -0.125px;
  --text-body: 18px;
  --text-body--line-height: 28px;
  --text-body-sm: 16px;
  --text-body-sm--line-height: 24px;
  --text-label: 16px;
  --text-label--line-height: 24px;
  --text-label-sm: 14px;
  --text-label-sm--line-height: 20px;
  --text-caption: 14px;
  --text-caption--line-height: 20px;
  --text-overline: 12px;
  --text-overline--line-height: 16px;
  --text-overline--letter-spacing: 0.125px;
  --text-quote: 18px;
  --text-quote--line-height: 28px;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  --radius-nav: 4px;
  --radius-chip: 5px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-pill: 9999px;
  --radius-circle: 100%;

  --shadow-media: rgba(0,0,0,0.01) 0 0.175px 1.041px 0, rgba(0,0,0,0.02) 0 0.8px 2.925px 0, rgba(0,0,0,0.027) 0 2.025px 7.847px 0, rgba(0,0,0,0.04) 0 4px 18px 0;
  --shadow-float: rgba(0,0,0,0.008) 0 0.667px 3.502px 0, rgba(0,0,0,0.016) 0 2.933px 7.252px 0, rgba(0,0,0,0.02) 0 7.2px 14.462px 0, rgba(0,0,0,0.024) 0 13.867px 28.348px 0, rgba(0,0,0,0.03) 0 23.333px 52.123px 0, rgba(0,0,0,0.04) 0 36px 89px 0;
  --shadow-nav: rgba(0, 0, 0, 0) 0px 1px 0px 0px;
}
```