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 02

## Logo

notion.so

Source
  inferred
Dimensions
  —
Aspect
  —
Format
  unknown

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

Step | Size | Sample
--- | --- | ---
`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

- `ease-in-out`
- `linear`
- `custom`
- `custom`

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

- Meet the night shift.
- Keep work moving 24/7.
- Automate repetitive work for your team.
- See what Custom Agents can do

### CTA verbs

- ``×3
- ``×2
- ``×2
- ``×1
- ``×1
- ``×1
- ``×1
- ``×1

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

- `#ffffff` → `` (4.03:1)

Chapter 12

## Tokens

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

CSS variables variables.css

    :root {
      --color-primary: #0075de;
      --font-display: "NotionInter";
      --space-base: 2px;
      --radius-md: 8px;
    }

Tailwind config tailwind.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.