---
version: alpha
name: Notion
description: Light design system extracted from www.notion.com (DOM-true values, Emblematic extractor 0.2.0, 2026-11-12).
colors:
  background: "#FFFFFF"
  surface: "#F6F5F4"
  on-surface: "#000000F2"
  on-surface-variant: "#615D59"
  primary: "#0075DE"
  outline: "#0000001A"
  tatami-color-blue-700: "#005BAB"
  tatami-color-yellow-600: "#E89D01"
  tatami-color-red-600: "#E32D14"
  tatami-color-blue-500: "#097FE8"
  tatami-color-yellow-500: "#FFB110"
  tatami-color-red-500: "#F64932"
  color-13: "#0000008C"
  tatami-color-logo-mono: "#000000BF"
  tatami-color-green-200: "#D0F4D8"
  tatami-color-blue-200: "#E6F3FE"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.042
    letterSpacing: -0.048em
  headline-md:
    fontFamily: Notion Inter
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.273
    letterSpacing: -0.011em
  title-md:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
  body-md:
    fontFamily: Lyon Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.556
  body-sm:
    fontFamily: Notion Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.429
  label-md:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 12px
  full: 9999px
spacing:
  xxs: 3px
  xs: 4px
  sm: 5px
  md: 6px
  lg: 8px
  xl: 10px
  2xl: 12px
  3xl: 15px
  4xl: 16px
  5xl: 24px
  6xl: 32px
  base: 4px
  container: 1229px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.background}"
    rounded: "{rounded.sm}"
    padding: 4px
    height: 36px
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"
    padding: 24px
---

# Notion

> Extracted from [https://www.notion.com/](https://www.notion.com/) on 2026-11-12 by Emblematic. Every value below was read from the rendered DOM (computed styles, `document.fonts`, and the fonts Chrome actually used to paint text), not estimated from pixels. When the YAML front matter and this prose disagree, the YAML wins. Copy values from this file exactly; don't transcribe them from memory. Don't copy logos, imagery, illustrations or marketing copy.

## Overview

Notion uses a light canvas (#FFFFFF) with a palette led by #0075DE. Type is set in **Notion Inter** (display + body), with 18px body text. Layout: 1229px container, top-static navigation, 8 sections. Built with next.js, contentful, vercel, cloudflare.

## Colors

Area-weighted from painted backgrounds, text and borders on the 1440px light capture. Roles are inferred from usage (largest background, most text, interactive fills). Every hex is an exact computed value; a role marked *unverified* is a best guess that has not passed review, so its canonical token (e.g. `primary`) is left out of the front matter.

| Token | Hex | OKLCH | Role | Share of paint | CSS variable |
|---|---|---|---|---|---|
| `background` | `#FFFFFF` | 1 0 0 | bg | 59.9% | `--tatami-color-background-base` |
| `surface` | `#F6F5F4` | 0.971 0.002 67.8 | surface | 16.2% | `--tatami-color-badge-mono-background` |
| `on-surface` | `#000000F2` (on bg `#0D0D0D`) | 0 0 0 | text | 7.5% | `--tatami-color-text-strong` |
| `on-surface-variant` | `#615D59` | 0.481 0.008 67.6 | muted | 0.44% | `--tatami-color-gray-600` |
| `primary` | `#0075DE` | 0.568 0.182 254.3 | accent | 0.30% | `--tatami-color-link-primary-text` |
| `outline` | `#0000001A` (on bg `#E6E6E6`) | 0 0 0 | border | 0.18% | `--tatami-color-card-border` |
| `tatami-color-blue-700` | `#005BAB` | 0.473 0.147 253.3 | other | 2.8% | `--tatami-color-blue-700` |
| `tatami-color-yellow-600` | `#E89D01` | 0.751 0.158 74.8 | other | 2.8% | `--tatami-color-yellow-600` |
| `tatami-color-red-600` | `#E32D14` | 0.593 0.219 31.1 | other | 2.8% | `--tatami-color-red-600` |
| `tatami-color-blue-500` | `#097FE8` | 0.597 0.183 253.3 | other | 1.4% | `--tatami-color-blue-500` |
| `tatami-color-yellow-500` | `#FFB110` | 0.814 0.168 76.4 | other | 1.4% | `--tatami-color-yellow-500` |
| `tatami-color-red-500` | `#F64932` | 0.651 0.213 30.9 | other | 1.4% | `--tatami-color-red-500` |
| `color-13` | `#0000008C` (on bg `#737373`) | 0 0 0 | other | 1.7% | — |
| `tatami-color-logo-mono` | `#000000BF` (on bg `#404040`) | 0 0 0 | other | 0.57% | `--tatami-color-logo-mono` |
| `tatami-color-green-200` | `#D0F4D8` | 0.934 0.053 151.9 | other | 0.45% | `--tatami-color-green-200` |
| `tatami-color-blue-200` | `#E6F3FE` | 0.958 0.02 243.4 | other | 0.11% | `--tatami-color-blue-200` |

Sparse chromatic highlights (not accents): `#005BAB` (`--tatami-color-blue-700`), `#097FE8` (`--tatami-color-blue-500`).

Declared brand/accent tokens: `--tatami-color-accent` = `#62AEF0` (declared, not painted on this page), `--tatami-color-card-accent` = `#097FE8`, `--tatami-color-accent-strong` = `#097FE8`, `--tatami-color-background-surface-accent` = `#62AEF0` (declared, not painted on this page).

Contrast: text on background 19.47:1, muted text 6.53:1, accent 4.57:1.

Gradients in use: `linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%)`.

The site does not change under `prefers-color-scheme: dark`.

## Typography

| Family | Role | Weights | Share of text | Source |
|---|---|---|---|---|
| **Notion Inter** (CSS: `NotionInter`) | display, body | 400, 500, 600, 700 | 87.9% | webfont |
| **Lyon Text** | other | 400 | 12.1% | webfont |

Declared in `@font-face` but not used to paint text on this page: iA Writer Mono, Notion Hand, Noto Sans Arabic, Noto Sans Hebrew, Permanent Marker. Don't treat these as the page's fonts.

Scale (px): 12, 14, 16, 18, 20, 22, 42, 54, 96. Effective ratio ≈ 1.398 (close to a augmented fourth). Body 18px at line-height 1.556; display 96px with tracking -0.048em. Headings are sentence case. On a 390px viewport the body is 18px and display 42px.

## Layout

Spacing follows a 4px base unit; the most used steps are 3, 4, 5, 6, 8, 10, 12, 15, 16, 24, 32px. Sections open with about 80px of space before their first line of text. Content sits in a 1229px container on a 3-column grid. Text density 0.079 (text area / page area).

Section order (desktop). Kinds below the review threshold are shown as *section*:

1. **nav** (64px, bg #FFFFFF)
2. **section** (64px, bg #FFFFFF)
3. **hero** — “Where teams and agents together.” (388px, bg #FFFFFF)
4. **section** (1093px, bg #FFFFFF)
5. **section** — “Keep work moving 24/7 with agents.” (1200px, bg #FFFFFF)
6. **testimonials** — “Trusted by teams that ship.” (868px, bg #FFFFFF)
7. **section** — “Get started today.” (678px, bg #F6F5F4)
8. **footer** (396px, bg #FFFFFF)

## Elevation & Depth

Style: layered. Most used shadows:

- `rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px`
- `rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px`

## Shapes

Dominant corner radius 12px; radii in use: 8px, 12px, pill. Borders: hairline (1px).

## Components

- **button-primary**: backgroundColor `#0075DE`, textColor `#FFFFFF`, rounded `8px`, padding `4px 14px`, height `36px`, fontFamily `Notion Inter`, fontSize `14px`, fontWeight `500` (e.g. “Get Notion free”)
- **card**: rounded `12px`, padding `24px`, backgroundColor `#FFFFFF`, border `1px solid #0000001A`

## Do's and Don'ts

- Do reserve `#0075DE` for primary actions and highlights; it covers only 0.30% of the painted page.
- Do set body copy in Notion Inter at 18px / 1.556.
- Do tighten large headlines (-0.048em at 96px).
- Don't introduce font weights beyond 400, 500, 600, 700.
- Do keep corners at 12px for most controls, and use the larger radii only for cards and media.
- Do snap spacing to multiples of 4px.
- Don't copy this site's logos, illustrations, photography or copy; use the system, not the brand assets.

## Provenance

Spec v2, extractor 0.2.0. Render quality: **ok**. Vision pass: not run. Fields below confidence 0.7 are hedged or left out above: `color.accent_strategy`, `layout.columns`, `layout.hero`, `layout.section_count`, `sections[].kind`, `space.section_padding_px`. Full per-field provenance is in `spec.json`.