designlang
Brand guidelines #0075de

May 15, 2026

notion.so

A reading of the visual language at https://notion.so. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
B 84/100
Tokens
30 colours · 15 sizes
Generated
designlang
Chapter 01

About

Page intent
landing 61% confidence
Material language
material-you
Imagery style
mixed
Component library
unknown
Stack
next
Voice tone
friendly
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 9 neutrals · 30 total

Primary #0075DE
RGB
0, 117, 222
HSL
208°, 100%, 44%
Secondary #455DD3
RGB
69, 93, 211
HSL
230°, 62%, 55%
Accent #213183
RGB
33, 49, 131
HSL
230°, 60%, 32%

Neutrals

#000000
#F6F5F4
#A39E98
#FFFFFF
#615D59
#78736F
#C0C0C0
#DDDDDD
#111111

Full palette

#000000
#F6F5F4
#A39E98
#FFFFFF
#615D59
#0075DE
#097FE8
#62AEF0
#F64932
#9C7054
#FF6D00
#78736F
#9849E8
#FFB110
#27918D
#02093A
#2A9D99
#FFC95E
#F77463
#AD6DED
#FF8A33
#FF83DD
#B18164
#FFF5E0
#455DD3
#213183
#1AAE39
#C0C0C0

WCAG 92% · 12 passing pairs · 1 failing. Full breakdown in §11.

Chapter 04

Typography

3 families · 14 sizes · 4 weights

Display
NotionInter
Body
Times
Weights
400, 500, 700, 600

Specimen

Meet the night shift.
Keep work moving 24/7.

Scale

StepSizeSample
t00 64px Meet the night shift.
t01 54px Meet the night shift.
t02 48px Meet the night shift.
t03 42px Meet the night shift.
t04 40px Meet the night shift.
t05 32px Meet the night shift.
t06 26px Meet the night shift.
t07 24px Meet the night shift.
t08 22px Meet the night shift.
t09 20px Meet the night shift.
Chapter 05

Spacing

Base 2px · 19 steps captured

Rhythm

2px
20px
24px
28px
32px
40px
44px
48px
56px
60px
Chapter 06

Shape

7 radii · 6 elevation tiers

Border radii

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

Elevation

xs
sm
md
lg
xl
2xl
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
fillDominant
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: smooth · 3 durations · 4 easings

Duration scale

50ms
100ms
200ms

Easings

Chapter 09

Components

unknown · 3 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
—
Sizes
—

card

Slots
heading, description, media, footer
Variants
—
Sizes
lg

link

Slots
—
Variants
—
Sizes
—
Chapter 10

Voice

friendly · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

92% WCAG 2.1 contrast
12 passing · 1 failing

Failing pairs

Aa 4.03:1
Foreground
#ffffff
Background
#097fe8
Rule
AA-normal

Suggested replacements

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #0075de;
  --font-display: "NotionInter";
  --space-base: 2px;
  --radius-md: 8px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#0075de' },
      fontFamily: { display: ['NotionInter', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '8px' },
    },
  },
};

Run npx designlang pack notion.so for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.