Notion

Notion sets oversized NotionInter headlines in a heavy weight with tight tracking on a light bone white canvas. Cobalt (#0075de) is reserved for actions, on buttons with 8px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 12px and 4px on smaller elements.

notion.com ↗

Colors

Cobalt

#0075de

Primary actions and links

Soft Cobalt

#097fe8

Secondary accent and highlights

Bone White

#ffffff

Page canvas

Void

#000000

Headlines and body copy

Deep Bone White

#f9f9f8

Surface or divider

Bone White 2

#f6f5f4

Surface or divider

Deep Cobalt

#005bab

Supporting colour

Citrine

#ffb110

Supporting colour

Signal Red

#f64932

Supporting colour

Type scale

DisplayWhere teams and agents Create together.NotionInter · 96px · 600

HeadingAI where your team works.NotionInter · 54px · 700

SubheadingSee what Notion can doNotionInter · 14px · 400

BodyCapture context, find answers, and automate tasks with AI built for your team.NotionInter · 20px · 400

NavPricingNotionInter · 16px · 400

Buttons

Get Notion freeGet Notion freeRequest a demoGet Notion free

Style reference measured from the public page at notion.com on 2026-10-12 for design education. Notion and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Notion — Style Reference
> Notion sets oversized NotionInter headlines in a heavy weight with tight tracking on a light bone white canvas. Cobalt (#0075de) is reserved for actions, on buttons with 8px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 12px and 4px on smaller elements.

**Theme:** light · **Source:** https://www.notion.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cobalt | `#0075de` | `--color-accent` | Primary actions and links |
| Soft Cobalt | `#097fe8` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#ffffff` | `--color-canvas` | Page canvas |
| Void | `#000000` | `--color-ink` | Headlines and body copy |
| Deep Bone White | `#f9f9f8` | `--color-surface-1` | Surface or divider |
| Bone White 2 | `#f6f5f4` | `--color-surface-2` | Surface or divider |
| Deep Cobalt | `#005bab` | `--color-surface-3` | Supporting colour |
| Citrine | `#ffb110` | `--color-surface-4` | Supporting colour |
| Signal Red | `#f64932` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | NotionInter | 96px | 600 | 1.04 | -0.048em |
| Heading | NotionInter | 54px | 700 | 1.04 | -0.035em |
| Subheading | NotionInter | 14px | 400 | 1.43 | 0 |
| Body | NotionInter | 20px | 400 | 1.40 | -0.006em |
| Nav | NotionInter | 16px | 400 | 1.50 | 0 |

Font families on the page: NotionInter, Lyon Text. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 8px, 12px, 4px, 9999.01px, 100%
- Primary button: background `#0075de`, text `#ffffff`, radius 8px, padding 4px 14px, 16px / 500

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Figma

Framer

Spotify