Design System
Inspired by Notion

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Get Notion free View Documentation
01 / Colors

Color Palette

Primary
Notion Black
rgba(0,0,0,0.95)
Primary text, headings
Pure White
#ffffff
Page background
Notion Blue
#0075de
Primary CTA, links
Warm Neutrals
Warm White
#f6f5f4
Surface tint, sections
Warm Dark
#31302e
Dark surfaces
Warm Gray 500
#615d59
Secondary text
Warm Gray 300
#a39e98
Placeholder, muted
Semantic Accents
Teal
#2a9d99
Success states
Green
#1aae39
Confirmation
Orange
#dd5b00
Warning
Pink
#ff64c8
Decorative accent
Purple
#391c57
Premium features
Brown
#523410
Earthy accent
Interactive
Active Blue
#005bab
Button active state
Focus Blue
#097fe8
Focus ring
Deep Navy
#213183
Brand secondary
Badge Bg
#f2f9ff
Pill badge surface
02 / Typography

Typography Scale

Display Hero
Display Hero -- 64px / 700 / 1.00 / -2.125px / Inter
Display Secondary
Display Secondary -- 54px / 700 / 1.04 / -1.875px / Inter
Section Heading
Section Heading -- 48px / 700 / 1.00 / -1.5px / Inter
Sub-heading Large
Sub-heading Large -- 40px / 700 / 1.50 / normal / Inter
Sub-heading
Sub-heading -- 26px / 700 / 1.23 / -0.625px / Inter
Card Title
Card Title -- 22px / 700 / 1.27 / -0.25px / Inter
Body Large -- Your workspace for docs, projects, and knowledge. All in one place.
Body Large -- 20px / 600 / 1.40 / -0.125px / Inter
Body Medium -- Navigation and emphasized text
Body Medium -- 16px / 500 / 1.50 / Inter
Body -- Standard reading text for articles and descriptions
Body -- 16px / 400 / 1.50 / Inter
Nav / Button Label
Nav / Button -- 15px / 600 / 1.33 / Inter
Caption -- Metadata and secondary labels
Caption -- 14px / 500 / 1.43 / Inter
Badge / Micro Label
Badge -- 12px / 600 / 1.33 / 0.125px / Inter
03 / Buttons

Button Variants

Get Notion free
Primary Blue
Request a demo
Secondary
New
Pill Badge
Available
Teal Badge
Warning
Orange Badge
Confirmed
Green Badge
04 / Cards

Card Examples

Workspace

Custom Agents

Build and deploy AI agents tailored to your team's workflow. Automate tasks, answer questions, and streamline processes.

Productivity

Connected Wikis

Centralize team knowledge in interconnected wikis. Keep documentation organized and always up to date with real-time collaboration.

Projects

Team Projects

Manage projects with flexible views: boards, timelines, lists, and calendars. Everything your team needs, all in one workspace.

05 / Forms

Form Elements

Default
Focus (blue ring)
Error (orange ring)
06 / Spacing

Spacing Scale

2
4
6
8
12
14
16
24
32
07 / Radius

Border Radius Scale

4px
Buttons, inputs
5px
Links, menus
8px
Small cards
12px
Cards
16px
Hero cards
9999px
Badges
50%
Avatars
08 / Elevation

Elevation & Depth

Level 0: Flat
No shadow
Level 1: Whisper
1px solid rgba(0,0,0,0.1)
Level 2: Card
4-layer stack, max 0.04
Level 3: Deep
5-layer stack, 52px blur
Focus
2px solid focus ring