# 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

Workspace Name
Default
Email Address
Focus (blue ring)
Domain
Error (orange ring)
Description

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