---
title: "Notion design system"
variant: extended
source: https://www.notion.com/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/notion-so)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Notion · Design System

> A calm canvas for connected work and AI.

**Theme:** light · **Industry:** productivity · **Source:** https://www.notion.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Notion pairs a bright, open canvas with bold typography and a vivid blue action color. Product interfaces, customer proof, and generous whitespace make the homepage feel approachable while keeping the software itself central.

## North star

Keep the page quiet and spacious so bold copy, real product interfaces, and a single blue primary action do the explaining.

## Overview

The page is built on a predominantly white canvas, with warm off-white bands and cards introducing subtle shifts without competing with the content. Black, tightly tracked sans-serif headlines carry the brand voice; smaller muted copy keeps supporting detail quiet. Blue is reserved for the primary “Get Notion free” action, while the pale blue secondary demo button remains visibly subordinate. The hero centers an oversized statement above concise supporting text and paired actions, then gives a large product-interface composition room to breathe. Subsequent feature blocks use interface captures, compact task examples, and customer proof rather than decorative photography. A few vivid testimonial panels and colored illustration details add contrast, but do not define the core palette. The layout alternates broad centered moments with aligned feature grids, using generous vertical gaps and restrained borders. Rounded controls and cards soften an otherwise crisp, high-contrast system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation, and reversed text on the blue primary action. |
| Warm Paper | `#f9f9f8` | `--color-warm-paper` | surface | Soft card and section surfaces that distinguish content without strong contrast. |
| Quiet Gray | `#737373` | `--color-quiet-gray` | neutral | Muted footer and supporting text; secondary rather than headline color. |
| Rule Gray | `#e5e5e5` | `--color-rule-gray` | neutral | Fine card and button outlines that separate elements on pale backgrounds. |
| Warm Slate | `#615d59` | `--color-warm-slate` | neutral | Muted body copy and supporting descriptions. |
| Soft Ink | `#1a1a1a` | `--color-soft-ink` | neutral | Dark navigation, footer, and body text where softer black is used. |
| Notion Blue | `#0075de` | `--color-notion-blue` | brand | Primary “Get Notion free” CTA background. |
| Headline Black | `#000000` | `--color-headline-black` | neutral | High-contrast hero and section headings, and key product-card text. |
| Bright Azure | `#097fe8` | `--color-bright-azure` | accent | Supporting blue accent found on buttons and occasional product details. |
| Deep Azure | `#005bab` | `--color-deep-azure` | accent | Text and accents on the pale-blue demo action; supporting blue detail. |
| Deep Ink | `#0d0d0d` | `--color-deep-ink` | neutral | Near-black headings and footer or navigation text. |
| Illustration Amber | `#ffb110` | `--color-illustration-amber` | semantic | Illustration and product-preview detail, not a defining page-wide brand color. |
| Illustration Coral | `#f64932` | `--color-illustration-coral` | semantic | Vivid customer-proof panel and illustration accents; limited to visual content. |
| Illustration Vermilion | `#e32d14` | `--color-illustration-vermilion` | semantic | Occasional illustration and product-preview color, not a core interface accent. |
| Illustration Gold | `#e89d01` | `--color-illustration-gold` | semantic | Small illustration and mock-interface details rather than the main site palette. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f9f8` (Warm Paper) · `--color-text` → `#000000` (Headline Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#615d59` (Warm Slate) · `--color-border` → `#e5e5e5` (Rule Gray) · `--color-accent` → `#0075de` (Notion Blue) · `--color-accent-2` → `#097fe8` (Bright Azure) · `--color-accent-3` → `#005bab` (Deep Azure) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f9f9f8` | 19.93:1 | AAA |
| `#ffffff` | `#f9f9f8` | 1.05:1 | fail |
| `#615d59` | `#ffffff` | 6.53:1 | AA |
| `#615d59` | `#f9f9f8` | 6.19:1 | AA |
| `#0075de` | `#ffffff` | 4.57:1 | AA |
| `#0075de` | `#f9f9f8` | 4.33:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NotionInter | `--font-body` | webfont | 500, 400, 700, 600 | Navigation, headings, body copy, buttons, labels, and product UI. | Inter |
| Lyon Text | `--font-lyon-text` | webfont | 400 | Occasional editorial or testimonial-style serif text. | Source Serif 4 |

- **NotionInter:** Use a clean sans-serif; display headings are heavy with notably tight negative tracking, while controls and copy stay sentence case.
- **Lyon Text:** Restrained serif contrast against the dominant sans system; use regular weight and avoid applying it to navigation or controls.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 600 | 1.04 | -0.048em | — | NotionInter | Oversized hero statement, set in bold, tight-tracked sans. |
| h1 | 72px | 500 | 1.21 | -0.028em | — | NotionInter | Primary hero headline or major page title. |
| h2 | 54px | 700 | 1.04 | -0.035em | — | NotionInter | Major feature and proof-section headings. |
| h3 | 42px | 700 | 1.14 | -0.036em | — | NotionInter | Feature titles and prominent supporting statements. |
| h4 | 22px | 700 | 1.27 | -0.011em | — | NotionInter | Card titles and compact subsection headings. |
| body | 14px | 500 | 1.43 | 0 | — | NotionInter | Descriptions, navigation details, and supporting copy. |
| caption | 12px | 500 | 1.33 | 0.01em | — | NotionInter | Small labels, footnotes, and interface annotations. |
| button | 16px | 500 | 1.5 | 0 | — | NotionInter | Primary and secondary CTA labels. |
| nav | 14px | 500 | 1.43 | 0 | — | NotionInter | Header navigation labels. |

OpenType features in use: `"lnum", "locl" 0`, `"liga", "lnum", "locl" 0`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 3, 4, 5, 6, 8, 10, 12, 15, 16, 24, 32 px.
- Section rhythm 96px · element gap 8px · card padding 24px · max content width 1229px.

The measured content max width is 1229px, with a spacious density and a centered, broad desktop composition. The header distributes the logo, central navigation, and account actions across one horizontal row. The hero centers its headline and actions before a wide product preview. Below it, feature content shifts into multi-column cards and interface examples, followed by testimonials, a full-width CTA band, and a compact multi-column footer. Section spacing is generous, while individual labels and controls remain compact.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `12px` · nav `8px` · link `12px` · xs `4px` · sm `8px` · md `12px` · pill `9999px`
- Shadow `lg` (media): `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`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0) 0px 1px 0px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.008) 0px 0.667px 3.502px 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.`
- Motion: standard transition `0.2s cubic-bezier(0.42, 0, 1, 1)` on interactive elements.

The interface is mostly flat, with white and warm off-white surfaces doing the primary separation. Fine #e5e5e5 borders define selected cards and controls. Rounded cards and media previews receive restrained layered shadows where measured, while the navigation uses a subtle hairline treatment. Keep elevation low so product captures remain the strongest visual layer.

## Imagery

Product-interface captures dominate the page: workspace screens, task boards, charts, and agent examples are framed as large, legible previews. The hero places a wide product composition beneath its centered message, with customer logos and small illustrated characters nearby. Interface imagery stays mostly pale and realistic rather than heavily stylized. Bright colored testimonial panels and occasional small illustration accents supply contrast; the visuals support product explanation, not a photography-led mood.

## Components

### Navigation

White horizontal header with the Notion mark, evenly spaced text links, login, and a blue primary CTA; navigation text is black.

### Primary CTA

“Get Notion free” uses #0075de with white text, an 8px radius, and compact padding.

### Secondary CTA

“Request a demo” uses a pale-blue #e6f3fe fill and #005bab text to sit quietly beside the primary action.

### Hero

Centered oversized black headline, concise supporting line, two actions, then a broad product preview.

### Feature cards

Warm off-white content surfaces and outlined white cards organize product examples; measured cards use #e5e5e5 borders and 12px radii.

### Customer proof

Logo strip and testimonial panels add evidence; saturated panel colors are confined to proof content rather than repeated across the page.

### Cookie notice

Floating white consent panel with explanatory text and stacked outlined choices; visually overlays the hero product preview.

### Measured component styles

- **Primary button** (“Get Notion free”): background #0075de · text #ffffff · border 1px solid · radius 8px · padding 6px 15px · 500 16px NotionInter
- **Secondary button** (“Request a demo”): background #e6f3fe · text #005bab · border 1px solid · radius 8px · padding 6px 15px · 500 16px NotionInter
- **Link** (“Using the most AI-native tools like Noti”): transparent background · text #ffffff · radius 12px · padding 0px · 400 16px NotionInter
- **Card** (“Triage product feedback→”): transparent background · text #000000 · border 1px solid #e5e5e5 · radius 12px · padding 24px · 400 16px NotionInter
- **Navigation item** (“Features”): transparent background · text #000000 · radius 8px · padding 3px 16px 3px 8px · 400 16px NotionInter

## Do

- Use white as the dominant page canvas.
- Reserve #0075de for the primary CTA.
- Center the hero statement and keep its supporting copy concise.
- Show believable product interfaces as key visual content.
- Use #f9f9f8 for quiet surface changes.
- Keep headings black, bold, and tightly tracked.
- Give major sections generous breathing room.

## Don't

- Do not turn every section into a saturated color block.
- Do not use blue for ordinary body copy.
- Do not crowd the hero with secondary information.
- Do not replace product evidence with generic stock photography.
- Do not add heavy borders around every element.
- Do not make cards or controls visually ornate.
- Do not use the illustration palette as the core brand palette.

## Agent prompt

Build a new Notion-style productivity page on a clean #ffffff Gallery White canvas, using #f9f9f8 Warm Paper for occasional section or card contrast. Set headlines in a bold, tightly tracked Inter-like sans, with black #000000 as the dominant text color and muted supporting copy in #615d59 Warm Slate. Use #0075de Notion Blue for the single primary CTA; a secondary action may use pale blue with #005bab text. Compose a restrained horizontal navigation, centered hero, generous vertical section spacing, and clear feature grids populated with believable product-interface previews. Use thin #e5e5e5 Rule Gray borders and softly rounded cards. Keep bright coral, amber, and gold accents inside visual examples only. Favor flat surfaces, subtle media shadows, concise copy, and strong product clarity over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long, white homepage led by a centered hero, followed by product features, customer proof, CTA band, and multi-column footer. | Primary and secondary CTA, Product preview, Customer proof, Cookie consent | White canvas, Bold centered headline, Blue CTA, Feature cards, Testimonial panels |

## Source CSS custom properties (selected)

```css
--tatami-border-radius-0: 0;
--tatami-border-radius-200: .25rem;
--tatami-border-radius-300: .3125rem;
--tatami-border-radius-400: .375rem;
--tatami-border-radius-500: .5rem;
--tatami-border-radius-600: .625rem;
--tatami-border-radius-700: .75rem;
--tatami-border-radius-800: .875rem;
--tatami-border-radius-900: 1rem;
--tatami-border-radius-round: 624.938rem;
--tatami-border-width-1: .0625rem;
--tatami-border-style-solid: solid;
--tatami-border-style-dashed: dashed;
--tatami-color-gray-100: #f9f9f8;
--tatami-color-gray-200: #f6f5f4;
--tatami-color-gray-300: #dfdcd9;
--tatami-color-gray-400: #a39e98;
--tatami-color-gray-500: #78736f;
--tatami-color-gray-600: #615d59;
--tatami-color-gray-700: #494744;
--tatami-color-gray-800: #31302e;
--tatami-color-gray-900: #191918;
--tatami-color-red-100: #fef3f1;
--tatami-color-red-200: #fdd3cd;
--tatami-color-red-300: #ff8b7c;
--tatami-color-red-400: #f77463;
--tatami-color-red-500: #f64932;
--tatami-color-red-600: #e32d14;
--tatami-color-red-700: #b01601;
--tatami-color-red-800: #6f0d00;
--tatami-color-red-900: #4f0900;
--tatami-color-orange-100: #fff5ed;
--tatami-color-orange-200: #ffdec4;
--tatami-color-orange-300: #ffad71;
--tatami-color-orange-400: #ff8a33;
--tatami-color-orange-500: #ff6d00;
--tatami-color-orange-600: #dd5b00;
--tatami-color-orange-700: #ab4a00;
--tatami-color-orange-800: #793400;
--tatami-color-orange-900: #532200;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/notion-so