Color Palette
Core Surface Colors (High Usage)
Black (page bg)
#000000 · ×2359
White (warm off-white)
#F6F5F4 · ×441
White 2 (pure white)
#FFFFFF · ×176
Mid Gray (muted text)
#A39E98 · ×180
Dark Gray (body text)
#31302E · ×168
Brand Blue Spectrum
Dark Blue (hero bg)
#02093A · ×7
Blue (brand fill)
#2537B1 · ×35
Blue 3 (CTA)
#097FE8 · ×30
Blue 4 (light)
#62AEF0 · ×26
Semantic Colors — Red, Orange, Yellow, Teal, Purple, Green, Pink, Brown
Green (success)
#1AAE39 · ×1
Orange (brown)
#9C7054 · ×22
Semantic Tint Surfaces (block backgrounds per category)
Typography
--font-family-base · NotionInter
NotionInter
The AI workspace that works for you — for notes, tasks, wikis, and projects.
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
--font-family-2 · Lyon Text (serif)
Lyon Text
Editorial content. Long-form documents. Notion's serif typeface for writing-focused contexts.
Sans: NotionInter
Serif: Lyon Text
Mono: iA Writer Mono
AI workspace
Display 64px · Bold · line-height: 64px · letter-spacing: −2.125px (most negative in series)
Build your workflow
Heading XL · 42px · Bold · line-height: 48px · letter-spacing: −2.125px
One tool for everything
Heading LG · 32px · Semibold · line-height: 40px · letter-spacing: −1.5px
Pages · Databases · AI
Heading · 26px · Semibold · line-height: 32px · letter-spacing: −0.625px
Connect your notes, tasks, wikis, and databases in one place. With Notion AI, work gets done faster.
Body 16px · Regular · line-height: 24px · letter-spacing: −0.25px
Last edited 2 minutes ago · Shared with 5 people · Free plan
Body Small 14px · Regular · line-height: 20px · letter-spacing: −0.125px
PAGES · DATABASES · WORKSPACE
Label · 12px · Medium · line-height: 16px · letter-spacing: +0.125px (sole positive token)
Write, plan, and organize in one workspace. Lyon Text for editorial richness.
Serif · Lyon Text · 16px · Regular · zero letter-spacing
Letter Spacing — 5 negative + 1 positive (most extreme at −2.125px)
Display
--letter-spacing-tight
−2.125px · 64px+ display · most negative in series
Heading
--letter-spacing-normal
−1.5px · large headings
Section
--letter-spacing-wide
−0.625px · medium headings
Body copy
--letter-spacing-widest
−0.125px · small body text
LABELS
--letter-spacing-ls-6
+0.125px · only positive token · uppercase labels
Spacing
Spacing Scale
36 steps — 2px → 490.766px (sub-pixel fractional values and large layout tokens up to 490px)
Borders
Border Radii — 11 tokens (richest radius vocabulary in series)
2xl (corner)
12/0/0px · ×9
full (tab)
12/12/0/0px · ×3
Border Widths
--border-width-hairline
1px · ×162 — default dividers, cards, inputs
--border-width-thin
2px · ×8 — focus rings, selected states
Shadows / Elevation
Shadow Tokens
6 tokens — multi-stop fractional shadows at sub-pixel blur precision
sm — Card default
×15
4-stop: 4%→2.7%→2%→1% at 4/2/0.8/0.175px — sub-pixel fractional blur for perceptual softness
md — Depth stack
×3
5-stop: 1%→2%→2%→4%→5% at 1/3/7/14/23px — layered depth for dialogs and panels
lg — Floating
×2
8% black 20px 50px + 4% 6px 16px — large overlay panels and command palette
xl — Zero shadow
×1
Fully transparent 1px — semantic placeholder, relies on border
White glow
×1
rgba(255,255,255,0.2) 20px 5px spread — used on dark/hero campaign sections
subtle — Hairline
×1
3% 3px 9px + 1.6% 0.7px 1.46px — sub-px precision for inline cards
Z-Index
8 layers — starts at −1 (background) and ends at INT_MAX (2,147,483,647). Clean lower layers (1→2→3→90→100→1000) then jumps directly to INT_MAX for the topmost layer. The `:root` semantic layer also defines --z-index-header: 100, --z-index-mobile-nav: 200, --z-index-popup: 500.
| Layer | Value | Usage |
|---|
| --z-1 (Background) | -1 | Below-content decorations, background imagery |
| --z-2 (Base) | 1 | Inline content, cards in flow |
| --z-3 (Raised) | 2 | Slightly elevated inline surfaces |
| --z-4 (Stack) | 3 | Multi-card stacks, hover elevations |
| --z-5 (Banner) | 90 | Announcement banners, announcement bar |
| --z-6 (Header) | 100 | Site navigation header (--z-index-header) |
| --z-7 (Popup) | 1000 | Modals, command palette, lightbox (--z-index-popup) |
| --z-8 (Absolute) | 2,147,483,647 | INT_MAX — critical overlays, nothing above |
Breakpoints
21 breakpoints — 374px → 1900px. Starts with a 1px straddle pair at 374/375px (iPhone SE targeting), includes content-width milestones at 908px, 942px, 1032px, and extends to 1800/1900px for ultra-wide editorial layouts. The CSS custom properties layer adds semantic names: --global-navigation-height: 64px, --header-height: 60px, --grid-columns: 12, --grid-gutter: 28px.
Opacity
Opacity Tokens
1 token — 0.6 only (alongside Nike's 0.85 and adidas's 0.9, the most minimal in the series)
Used for secondary UI elements and dimmed interactive states. The :root layer provides a more comprehensive alpha system via --color-alpha-black-* and --color-alpha-white-* tokens at 10–90% increments, covering rgba overlays that don't use the opacity property directly.
Accessibility
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| #A39E98 (Mid Gray) | #000000 (Black) | 7.9:1 | AAA |
| #A39E98 (Mid Gray) | #F6F5F4 (White) | 2.44:1 | Fail |
| #A39E98 (Mid Gray) | #FFFFFF (White 2) | 2.66:1 | Fail |
| #A39E98 (Mid Gray) | #0075DE (Blue 2) | 1.72:1 | Fail |
| #31302E (Dark Gray) | #000000 (Black) | 1.59:1 | Fail |
| #31302E (Dark Gray) | #F6F5F4 (White) | 12.11:1 | AAA |
| #31302E (Dark Gray) | #FFFFFF (White 2) | 13.18:1 | AAA |
| #31302E (Dark Gray) | #097FE8 (Blue 3) | 3.27:1 | AA Large |
| #615D59 (Dark Gray 2) | #F6F5F4 (White) | 5.99:1 | AA |
| #615D59 (Dark Gray 2) | #FFFFFF (White 2) | 6.53:1 | AA |
| #615D59 (Dark Gray 2) | #000000 (Black) | 3.22:1 | AA Large |
| #9C7054 (Orange) | #000000 (Black) | 4.86:1 | AA |
| #9C7054 (Orange) | #F6F5F4 (White) | 3.97:1 | AA Large |
| #FF6D00 (Orange 2) | #000000 (Black) | 7.44:1 | AAA |
| #FF6D00 (Orange 2) | #F6F5F4 (White) | 2.59:1 | Fail |
CSS Variables Reference
Black (page bg)--color-black#000000 · ×2359
White (warm off-white)--color-white#F6F5F4 · ×441
White 2 (pure white)--color-white-2#FFFFFF · ×176
Dark Blue (hero bg)--color-dark-blue#02093A · ×7
Blue 2 (brand bg)--color-blue-2#0075DE · ×31
Blue 3 (CTA)--color-blue-3#097FE8 · ×30
White 4 (gray tint)--color-white-4#F9F9F8 · ×3
White 3 (blue tint)--color-white-3#F2F9FF · ×4
White 9 (purple tint)--color-white-9#F8F5FC · ×2
White 7 (orange tint)--color-white-7#FFF5ED · ×2
Dark Gray (body text)--color-dark-gray#31302E · ×168
Mid Gray (muted)--color-mid-gray#A39E98 · ×180
Dark Gray 2--color-dark-gray-2#615D59 · ×50
Blue (brand fill)--color-blue#2537B1 · ×35
Red (error)--color-red#F64932 · ×24
Purple--color-purple#9849E8 · ×16
Orange 2--color-orange-2#FF6D00 · ×22
Cyan (teal)--color-cyan#27918D · ×11
Orange 3 (yellow)--color-orange-3#FFB110 · ×16
Light Pink--color-light-pink#FF83DD · ×2
NotionInter (sans UI)--font-family-baseNotionInter
Lyon Text (serif)--font-family-2Lyon Text
Regular / Medium / Semibold / Boldweights400/500/600/700
Also: variable weight tokensvariable420/520/620/680
0px (hidden) → 64px (hero)2xs → 64px12 sizes
Display (tightest ever)--letter-spacing-tight−2.125px
Heading--letter-spacing-normal−1.5px
Sub-heading--letter-spacing-wide−0.625px
Body--letter-spacing-wider−0.25px
Small text--letter-spacing-widest−0.125px
Labels (sole positive)--letter-spacing-ls-6+0.125px
Instant (75ms)--duration-instant0.075s · ×1
Fast (100ms)--duration-fast0.1s · ×1
Normal (150ms) · ×32--duration-normal0.15s
Slow (200ms) · ×234 (dominant)--duration-slow0.2s
Ease-In (dominant · ×218)--easing-ease-inease-in
Ease In-Out · ×4--easing-ease-in-outease-in-out
Dim (only token)--opacity-600.6 · ×2
Background--z-1-1
Base / Raised / Stack--z-2/3/41/2/3
Banner / Header--z-5/690/100
Popup / Modal--z-71000
INT_MAX (absolute top)--z-82,147,483,647
8px (×195 most used)--space-128px
24px (×155)--space-8024px
Notion Design System · Generated 17/04/2026 · 42 color tokens · 2 font families + 10 locale variants · 4 font weights + 4 variable · 12 font sizes · 10 line heights · 6 letter-spacing (5 negative, 1 positive) · 36 spacing steps · 11 radius · 2 border widths · 6 shadows · 4 durations · 3 easings · 8 z-index layers (INT_MAX) · 21 breakpoints · 1 opacity · 170+ CSS custom properties in :root