DESIGN.md@.agents/tools/design/library/brands/notion git:20260404.5495944A

Immutable. This exact content is served forever at /api/v1/blob/a24e4446f6c265f1.

# Design System: Notion

Approachable minimalism on warm neutrals. Blank-canvas philosophy: quality paper, not sterile glass. NotionInter font, whisper-weight borders, multi-layer sub-0.05 shadows, single saturated accent (Notion Blue `#0075de`).

## Chapters

| # | File | Contents |
|---|------|----------|
| 1 | [01-visual-theme.md](01-visual-theme.md) | Visual theme, atmosphere, key characteristics |
| 2 | [02-color-palette.md](02-color-palette.md) | Full color palette, roles, shadows |
| 3 | [03-typography.md](03-typography.md) | Font family, hierarchy table, principles |
| 4 | [04-components.md](04-components.md) | Buttons, cards, inputs, nav, images, distinctive components |
| 5 | [05-layout.md](05-layout.md) | Spacing system, grid, whitespace, border radius scale |
| 6 | [06-depth-elevation.md](06-depth-elevation.md) | Elevation levels, shadow philosophy, decorative depth |
| 7 | [07-responsive.md](07-responsive.md) | Breakpoints, touch targets, collapsing strategy, image behavior |
| 8 | [08-accessibility.md](08-accessibility.md) | Focus system, interactive states, color contrast ratios |
| 9 | [09-agent-prompt-guide.md](09-agent-prompt-guide.md) | Quick color reference, example prompts, iteration guide |

## Quick Reference

**Colors:** `#0075de` (CTA) · `#ffffff` (bg) · `#f6f5f4` (alt bg) · `rgba(0,0,0,0.95)` (text) · `#615d59` (secondary) · `#a39e98` (muted)

**Typography:** NotionInter · -2.125px tracking at 64px → normal at 16px · weights 400/500/600/700

**Borders:** `1px solid rgba(0,0,0,0.1)` · **Shadows:** 4-5 layers, max opacity 0.05 · **Radius:** 4px buttons → 9999px pills