# Design System: notion.com

> Generated by UIDrop on 2026-06-01 — uidrop.site

---

## 1. Design Language Overview

**Vibe:** light · vibrant · soft · Light theme

**Design rhythm:** 4px grid · soft corners · flat (no shadows)

## 2. Color System

| Role     | Hex      | Usage |
|----------|----------|-------|
| Primary  | `#455DD3` | CTAs, primary actions, links |
| Accent   | `#374AA9` | Highlights, success states, decorative |
| Surface  | `#FFFFFF` | Main page background |
| Elevated | `#F6F5F4` | Cards, raised containers |
| Text     | `#000000` | Body and heading text |
| Muted    | `#A39E98` | Secondary text, captions |
| Border   | `#DDDDDD` | Dividers, borders |

### Named color tokens (from CSS custom properties)

- `--border-color-regular` → `#00000014`
- `--text-color-extra-light` → `#0003`
- `--text-color-light` → `#0006`
- `--text-color-medium` → `#0009`
- `--text-color-dark` → `#111`
- `--text-color-regular` → `#040404`
- `--border-radius-0` → `0`
- `--border-radius-200` → `0.25rem`
- `--border-radius-300` → `0.3125rem`
- `--border-radius-400` → `0.375rem`
- `--border-radius-500` → `0.5rem`
- `--border-radius-600` → `0.625rem`
- `--border-radius-700` → `0.75rem`
- `--border-radius-800` → `0.875rem`
- `--border-radius-900` → `1rem`
- `--border-radius-round` → `624.9375rem`

## 3. Typography

- **H1** — NotionInter 64px / weight 700, line-height 1, tracking -2.125px
- **H2** — NotionInter 54px / weight 700, line-height 1.04, tracking -1.875px
- **H3** — NotionInter 14px / weight 400, line-height 1.43
- **Body** — NotionInter 16px / weight 400, line-height 1.5
- **Caption** — NotionInter 14px / weight 400, line-height 1.43
- **Scale:** 64px / 24px / 16px

## 4. Spacing & Layout

- **Spacing scale:** 4,8,12,16,24,28,32,36,64,80
- **Border radius:** 8px buttons, 12px cards, 5px inputs
- **Radius vocabulary:** button → 4px, card → 12px, chip → pill
- **Spacing tokens:** `--spacing-block-s: 20px`, `--spacing-block-m: 24px`, `--spacing-block-l: 32px`, `--size-block-header-icon: 26px`, `--base-padding: 60px`, `--spacing-xs: 20px`

## 6. Component Specs

### Button
- #213183 bg
- #FFFFFF text
- 8px radius
- 6px 15px padding
- 500 weight

### Card
- #FFFFFF bg
- 12px radius

### Input
- 1px solid rgba(0
- 0
- 0
- 0.08)
- 5px radius
- 7px 10px 7px 30px padding

### Link
- #000000

## 7. Implementation Rules

**DO:**
- Use `#455DD3` for all primary CTAs and interactive accents
- Reserve `#374AA9` for accent moments — don't overuse
- Stick to the spacing scale (4,8,12,16,24,28,32,36,64,80) — don't introduce arbitrary values
- Match the radius vocabulary: 8px buttons, 12px cards, 5px inputs
- Pair NotionInter 700 headings with NotionInter 16px 400, 1.5 line-height
- Honour the visual hierarchy: bold colour on primary actions, muted tones on secondary

**DON'T:**
- Copy this design verbatim — use the tokens as a system to build something original
- Mix in colours outside this palette (especially competing primary colours)
- Break the radius scale by introducing one-off values
- Use the same shadow tier for everything — match elevation to importance

---

*Source: notion.com · Snapped via UIDrop on 2026-06-01*
*Do not copy the design. Use these tokens to build similar UI with the same feel.*