# Notion — Design Reference

> Black ink, warm paper and a highlighter pen

**Theme:** light · **Measured from:** notion.com (English, 1440 px)

Notion looks like a well-kept notebook. The page is white with warm off-white bands (`#f9f9f8`, `#f6f5f4`), and the type is pure black Inter, set huge and very tightly tracked in the hero (96px at `-4.6px`). One word in the headline gets a yellow highlighter pill (`#ffe4af`) with an orange dot, the way you would mark a page by hand. Black line-drawn doodles (a face, a person) peek out from behind product windows. The product itself appears as clean white windows with an almost invisible layered shadow. There is one blue for the main action (`#0075de`) and a pale blue wash for the second. Saturated color appears only in duotone customer photos and tiny icons.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Notion Blue | `#0075de` | Primary button fill |
| Ink | `#000000` | Headlines and card titles (body at rgba(0,0,0,0.9)) |
| Warm Gray | `#615d59` | Secondary text, eyebrows, stats (faint labels at rgba(0,0,0,0.54)) |
| Deep Blue | `#005bab` | Text on the tinted secondary button |
| Link Blue | `#097fe8` | Text links, ghost "Request a demo" |
| Blue Wash | `#e6f3fe` | Secondary button fill |
| White | `#ffffff` | Canvas, small cards, product windows |
| Paper | `#f9f9f8` | Large bento feature cards |
| Sand | `#f6f5f4` | Closing CTA band |
| Hairline | `#dfdcd9` | Solid border equivalent (site uses rgba(0,0,0,0.1)) |
| Highlight | `#ffe4af` | Pill behind the one highlighted hero word |
| Marigold | `#ffb110` | Dot in the highlight pill; duotone photo color |
| Tomato | `#f64932` | Duotone photo color, small icon accents |

**Duotone testimonials:** customer portraits are tinted in one flat brand hue each — Tomato/`#e32d14`, Link Blue/`#005bab`, Marigold/`#e89d01` — with a dark bottom fade (`linear-gradient(rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%)`) under white serif quote text.

## Typography

**NotionInter** (Notion's cut of Inter). Substitute: **Inter** from Google Fonts (400/500/600/700). **Lyon Text** serif for quotes only. Substitute: **Source Serif 4** 400.

- Headlines are heavy (600–700) and very tight: about `-0.048em` at 96px, `-0.035em` at 54px.
- UI, buttons and most body text are **500**, not 400 — this gives Notion its slightly solid, friendly feel.
- Serif appears only inside quotes, never in headings or UI.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 96px | 600 | 1.04 | -4.6px |
| Heading | 54px | 700 | 1.04 | -1.875px |
| Heading small | 42px | 700 | 1.14 | -1.5px |
| Card title | 22px | 700 | 1.27 | -0.25px |
| Lead | 20px | 400 | 1.4 | -0.125px |
| Quote (serif) | 18px | 400 | 1.56 | 0 |
| Body | 16px | 500 | 1.5 | 0 |
| Button | 16px | 500 | 1.5 | 0 |
| UI | 14px | 500 | 1.43 | 0 |
| Caption | 12px | 500 | 1.33 | 0.125px |

## Shape and spacing

- **Buttons:** 8px radius. Language selector and highlight word: full pill.
- **Cards:** 12px radius with a 1px rgba(0,0,0,0.1) border.
- **Tags inside product shots:** 4px radius, tinted fills.
- **Base unit:** 8px. Scale: 4, 8, 16, 24, 32, 48, 64, 120.
- **Content width:** 1184px, centered.
- **Section gap:** about 120px.

## Components

### Primary button
Notion Blue `#0075de` fill, white text, 8px radius, padding `4px 14px`, 36px tall, Inter 500 at 16px. No border, no shadow. Label: "Get Notion free".

### Secondary button
Blue Wash `#e6f3fe` fill, Deep Blue `#005bab` text, 8px radius, padding `6px 15px`, 38px tall, same font. Label: "Request a demo". On the Sand CTA band it becomes white with Link Blue text.

### Navigation
White bar, no border. Black Notion "N" mark at far left; centered links (Product ⌄, Resources ⌄, Pricing, Request a demo) in black Inter 500 at 15–16px; right side "Log in" as plain text and a compact "Get Notion free" primary button.

### Bento feature card
Paper `#f9f9f8` card, 12px radius, no border. Top-left: a 12px Warm Gray eyebrow ("Capture knowledge") and a 16px 700 black title; top-right: a black circular arrow button. A white product window bleeds off the bottom edge.

### Highlighted word
One word in the hero sits in a Highlight `#ffe4af` pill with a Marigold dot before it, same size and color as the headline but weight 500. Use once per page.

### Use-case card
White, 12px radius, 1px rgba(0,0,0,0.1) border, 24px padding, ~240×160. A small colored circular icon at top, then a 16px 700 title ending in "→". Five in a row.

### Testimonial card
Tall duotone portrait card, customer logo in white top-left, Lyon Text quote in white at the bottom with name and title in small sans.

## Do

- Set headlines in black Inter 600–700 with strong negative tracking.
- Highlight exactly one word in the hero with the yellow pill.
- Use 500 weight for UI and buttons.
- Show the product in white windows with a barely-there layered shadow.
- Add black hand-drawn doodles at the edges of product shots.
- Use warm off-whites (`#f9f9f8`, `#f6f5f4`) for bands and cards, never cool grays.

## Don't

- Don't use more than one saturated blue for actions.
- Don't use pill-shaped primary buttons; they are 8px.
- Don't use serif for headings or UI.
- Don't use heavy or dark shadows.
- Don't fill large areas with saturated color except duotone photos.
- Don't loosen headline tracking; tight is the look.

## Layout

Centered hero: two-line 96px headline with the highlighted word, a 20px lead, the blue button pair, then a wide product window flanked by doodles. A small "The most ambitious companies run on Notion." caption, then a left-aligned 54px section heading over a 2+1 bento of Paper cards, a row of five use-case cards, a 3-up duotone testimonial row, a scrolling stats strip, and a Sand CTA band with a centered "Get started today." Footer has the logo, a serif epigraph and four link columns.

## Agent prompt guide

- Text: `#000000` · Secondary: `#615d59` · Borders: rgba(0,0,0,0.1)
- Canvas: `#ffffff` · Cards: `#f9f9f8` · Bands: `#f6f5f4`
- Action: `#0075de` · Secondary fill: `#e6f3fe` with `#005bab` text · Highlight: `#ffe4af`

Example prompts:

1. "Primary button: background #0075de, white text, 8px radius, padding 4px 14px, height 36px, Inter 500 16px, no border, no shadow. Next to it a secondary: background #e6f3fe, text #005bab, same shape."
2. "Hero headline: centered, Inter 600 96px, line-height 1.04, letter-spacing -4.6px, color #000000; wrap one word in a #ffe4af pill with a #ffb110 dot before it."
3. "Bento feature card: background #f9f9f8, 12px radius, no border; 12px #615d59 eyebrow, 16px Inter 700 black title, black circular arrow button top-right; white product window with a very soft layered shadow bleeding off the bottom."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-notion-blue: #0075de;
  --color-ink: #000000;
  --color-warm-gray: #615d59;
  --color-deep-blue: #005bab;
  --color-link-blue: #097fe8;
  --color-blue-wash: #e6f3fe;
  --color-white: #ffffff;
  --color-paper: #f9f9f8;
  --color-sand: #f6f5f4;
  --color-hairline: #dfdcd9;
  --color-highlight: #ffe4af;
  --color-marigold: #ffb110;
  --color-tomato: #f64932;

  /* Fonts */
  --font-sans: 'NotionInter', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Lyon Text', 'Source Serif', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 96px;
  --text-display--line-height: 1.04;
  --text-display--letter-spacing: -4.6px;
  --text-display--font-weight: 600;
  --text-heading: 54px;
  --text-heading--line-height: 1.04;
  --text-heading--letter-spacing: -1.875px;
  --text-heading--font-weight: 700;
  --text-heading-sm: 42px;
  --text-heading-sm--line-height: 1.14;
  --text-heading-sm--letter-spacing: -1.5px;
  --text-heading-sm--font-weight: 700;
  --text-card-title: 22px;
  --text-card-title--line-height: 1.27;
  --text-card-title--letter-spacing: -0.25px;
  --text-card-title--font-weight: 700;
  --text-lead: 20px;
  --text-lead--line-height: 1.4;
  --text-lead--letter-spacing: -0.125px;
  --text-lead--font-weight: 400;
  --text-quote: 18px;
  --text-quote--line-height: 1.56;
  --text-quote--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 500;
  --text-button: 16px;
  --text-button--line-height: 1.5;
  --text-button--font-weight: 500;
  --text-ui: 14px;
  --text-ui--line-height: 1.43;
  --text-ui--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: 0.125px;
  --text-caption--font-weight: 500;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 12px;
  --radius-tags: 4px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-window: 0 0.175px 1.041px rgba(0, 0, 0, 0.01), 0 0.8px 2.925px rgba(0, 0, 0, 0.02), 0 2.025px 7.847px rgba(0, 0, 0, 0.027);
  --shadow-float: 0 0.667px 3.502px rgba(0, 0, 0, 0.008), 0 2.933px 7.252px rgba(0, 0, 0, 0.016), 0 7.2px 14.462px rgba(0, 0, 0, 0.02);

  /* Layout */
  --container-page: 1184px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-notion-blue: #0075de;
  --color-ink: #000000;
  --color-warm-gray: #615d59;
  --color-deep-blue: #005bab;
  --color-link-blue: #097fe8;
  --color-blue-wash: #e6f3fe;
  --color-white: #ffffff;
  --color-paper: #f9f9f8;
  --color-sand: #f6f5f4;
  --color-hairline: #dfdcd9;
  --color-highlight: #ffe4af;
  --color-marigold: #ffb110;
  --color-tomato: #f64932;

  /* Fonts */
  --font-sans: 'NotionInter', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Lyon Text', 'Source Serif', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 96px;
  --text-display--line-height: 1.04;
  --text-display--letter-spacing: -4.6px;
  --text-display--font-weight: 600;
  --text-heading: 54px;
  --text-heading--line-height: 1.04;
  --text-heading--letter-spacing: -1.875px;
  --text-heading--font-weight: 700;
  --text-heading-sm: 42px;
  --text-heading-sm--line-height: 1.14;
  --text-heading-sm--letter-spacing: -1.5px;
  --text-heading-sm--font-weight: 700;
  --text-card-title: 22px;
  --text-card-title--line-height: 1.27;
  --text-card-title--letter-spacing: -0.25px;
  --text-card-title--font-weight: 700;
  --text-lead: 20px;
  --text-lead--line-height: 1.4;
  --text-lead--letter-spacing: -0.125px;
  --text-lead--font-weight: 400;
  --text-quote: 18px;
  --text-quote--line-height: 1.56;
  --text-quote--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 500;
  --text-button: 16px;
  --text-button--line-height: 1.5;
  --text-button--font-weight: 500;
  --text-ui: 14px;
  --text-ui--line-height: 1.43;
  --text-ui--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: 0.125px;
  --text-caption--font-weight: 500;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 12px;
  --radius-tags: 4px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-window: 0 0.175px 1.041px rgba(0, 0, 0, 0.01), 0 0.8px 2.925px rgba(0, 0, 0, 0.02), 0 2.025px 7.847px rgba(0, 0, 0, 0.027);
  --shadow-float: 0 0.667px 3.502px rgba(0, 0, 0, 0.008), 0 2.933px 7.252px rgba(0, 0, 0, 0.016), 0 7.2px 14.462px rgba(0, 0, 0, 0.02);

  /* Layout */
  --container-page: 1184px;
}
```

---

*Measured from https://www.notion.com/ on 2026-10-28 by Faundr. Inspired by Notion; not its official design system and not affiliated with Notion.*