Notion design system

Notion's website (notion.so) uses a light interface with #455dd3 as its primary color and NotionInter as the main typeface, with Lyon Text alongside it. designlang measured 14 font sizes from 12px to 64px, 19 spacing values, 7 corner radii.

Captured 21 May 2026Light UI1,572 elements read

Download tokens Read it yourself

Notion colors

The brand roles and neutrals notion.so renders, with how many elements use each one.

Brand colors

Primary#455dd32 uses
Secondary#0075de31 uses
Accent#2131831 uses

Neutrals

#0000002,143 uses
#f6f5f4388 uses
#a39e98202 uses
#ffffff171 uses
#615d5948 uses
#78736f14 uses
#1919182 uses
#c0c0c01 uses
#dddddd1 uses

Backgrounds

#ffffff
#191918
#f6f5f4
#02093a
#ffc95e
#f77463
#62aef0
#2a9d99

Text colors

#00000021:1 on #ffffff
#f6f5f41.09:1 on #ffffff
#ffffff1:1 on #ffffff
#0075de4.57:1 on #ffffff
#a39e982.66:1 on #ffffff
#9c70544.32:1 on #ffffff
#ff6d002.82:1 on #ffffff
#f649323.55:1 on #ffffff

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 92% of them pass.

Text	Background	Ratio	Result
`#ffffff`	`#097fe8`	4.03:1	Fails AA
`#ffffff`	`#000000`	21:1	AAA
`#000000`	`#ffffff`	21:1	AAA
`#ffffff`	`#455dd3`	5.59:1	AA
`#ffffff`	`#213183`	11.46:1	AAA
`#ffffff`	`#0075de`	4.57:1	AA

Notion fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

NotionInter: sans, most text (1,565 elements)
Lyon Text: serif, body (2 elements)

Body text: 14px at weight 400, line height 20px.

Weights in use: 400, 500, 700, 600.

Type scale

Size	Weight	Line height	Tracking	Used on
64px	700	64px	-2.125px	h1
54px	700	56px	-1.875px	h2
48px	400	72px	normal	span, svg, path, img
42px	700	48px	-1.5px	input, output
40px	400	60px	normal	span, img
32px	400	40px	normal	blockquote
26px	700	32px	-0.625px	h3
24px	500	20px	normal	span, svg, path
22px	700	28px	-0.25px	span, h2, div, svg
20px	400	20px	normal	button, span, svg, path
16px	400	24px	normal	html, head, meta, script
15px	400	20px	normal	span, svg, path

Spacing and radii

Spacing scale

2px
20px
24px
28px
32px
40px
44px
48px
56px
60px
64px
78px
93px
125px

Corner radii

4px
8px
12px
16px
50px
100px
pill

Medium radii lead, with a few larger ones. 7 distinct box shadows.

Motion

The motion reads as smooth.

Durations

instant: 75ms
xs: 100ms
sm: 200ms

Easing

ease-in-out (142 uses): ease
linear (1 uses): linear
custom (17 uses): cubic-bezier(0.45, 0, 0.55, 1)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

84/100, grade B

Components found: buttons (41), cards (42), inputs (13), links (135), navigation (230), footer (25).

By category

Color Discipline	80/100
Typography Consistency	80/100
Spacing System	85/100
Shadow Consistency	90/100
Border Radius Consistency	90/100
Accessibility	92/100
CSS Tokenization	100/100

1 WCAG contrast failures
9 !important rules — prefer specificity over overrides
7410 duplicate CSS declarations

Download the tokens

The files designlang wrote for notion.so. Run it yourself for a fresh read: npx designlang notion.so.

The core values as CSS variables

:root {
  --color-primary: #455dd3;
  --color-secondary: #0075de;
  --color-accent: #213183;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #f6f5f4;
  --color-neutral-3: #a39e98;
  --color-neutral-4: #ffffff;
  --font-primary: "NotionInter", sans-serif;
  --font-secondary: "Lyon Text", serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Read notion.so yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Cal.com design system

Light UI, Inter, #0000ee

Webflow design system

Light UI, WF Visual Sans Variable, #146ef5

Loom design system

Light UI, Charlie Text, #1868db

Stripe design system

Light UI, sohne-var, #533afd

Quick answers

What font does Notion use?

notion.so sets most of its text in NotionInter (1,565 elements), with Lyon Text alongside it. designlang read this from the computed styles of the live page on 21 May 2026.

What are Notion's brand colors?

The brand roles on notion.so are primary #455dd3, secondary #0075de and accent #213183, on a #ffffff background. The neutrals used most are #000000, #f6f5f4 and #a39e98.

How do I use the Notion design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang notion.so for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from notion.so's public pages on 21 May 2026, so it shows what the site renders, not Notion's internal source files. Notion is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of notion.so on 21 May 2026. Notion is a trademark of its owner; designlang is not affiliated with it. More: the full Notion brand kit, the token extraction guide and the markdown version of this page.