Switch between the rendered Visual preview and the Raw DESIGN.md.
Notion's design system embodies a sophisticated, productivity-focused aesthetic that balances minimalist clarity with intelligent depth. The visual language is clean and purposeful, featuring a light, neutral foundation punctuated by vibrant accent colors that signal interactivity and status. The typography is precise and hierarchical, guiding users through complex workspaces with calm confidence. Dark navy backgrounds anchor hero sections and hero copywriting, creating dramatic contrast with clean white typography. The overall mood is professional yet approachable—designed for teams who demand both power and elegance in their workspace.
Key Characteristics
#62AEF0): Primary interactive elements, links, call-to-action buttons, and primary UI accents; used most frequently across the system#0075DE): Higher-emphasis primary actions and stronger interactive states#097FE8): Secondary interactive elements and visual emphasis#9849E8): Agent type badge—task routing and custom agents#27918D): Agent type badge—reporting agents and data visualization#FF6D00): Agent type badge—Q&A agents and knowledge systems#9C7054): Supporting accent color for secondary visual hierarchy#62AEF0): Main button actions like "Get Notion free," primary form submissions#0075DE): Alternative CTAs like "Request a demo," secondary form actions#FFFFFF): Transparent buttons and ghost states on dark backgrounds#000000): Primary text, headings, and high-contrast UI elements (used 485 times)#78736F): Secondary text, captions, and de-emphasized content#F6F5F4): Background fill for cards, sections, and secondary surfaces (used 357 times)#FFFFFF): Primary background, card surfaces, and contrast layers#F6F5F4): Default page and card backgrounds for content sections#F2F9FF): Light tinted surface for blue-themed content areas#FCF8F5): Subtle warm-tinted surface option#FFF5ED): Warm accent surface for promotional or highlighted content#FEF3F1): Soft surface variant for status or alternative content zones#F64932): Error states, destructive actions, and validation failures#FFB110): Warning messages, caution indicators, and attention flagsPrimary: NotionInter, Inter, system-ui, -apple-system, sans-serif Secondary: NotionInter, system-ui, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display 1 / H1 | NotionInter | 64px | 700 | 64px | 0px | Hero headlines and major section titles |
| Display 2 / H2 | NotionInter | 48px | 700 | 56px | 0px | Large section headings |
| Heading 1 / H3 | NotionInter | 32px | 700 | 40px | 0px | Primary content headings |
| Heading 2 / H4 | NotionInter | 24px | 700 | 32px | 0px | Secondary content headings and card titles |
| Heading 3 / H5 | NotionInter | 18px | 600 | 28px | 0px | Tertiary headings and emphasis text |
| Subheading | NotionInter | 16px | 600 | 24px | 0px | Subheadings and label text |
| Body | NotionInter | 16px | 400 | 24px | 0px | Primary body text and descriptions |
| Body Small | NotionInter | 14px | 400 | 20px | 0px | Secondary body text and metadata |
| Button | NotionInter | 16px | 500 | 24px | 0px | Interactive button labels |
| Caption | NotionInter | 12px | 500 | 16px | 0px | Captions, hints, and secondary labels |
| Code | NotionInter | 14px | 400 | 20px | 0px | Monospace code snippets and terminal text |
#62AEF0#FFFFFF12px 24px8px0px solid transparent16px50024pxauto (min 44px)#0075DE, text #FFFFFF#097FE8, text #FFFFFF#F6F5F4, text #78736F#FFFFFF#00000012px 24px8px1px solid #78736F16px50024pxauto (min 44px)#F6F5F4, text #000000#78736F, text #FFFFFFrgba(255, 255, 255, 0)#F6F5F412px 24px8px1px solid #F6F5F416px50024pxauto (min 44px)rgba(246, 245, 244, 0.1), text #FFFFFFrgba(246, 245, 244, 0.2), text #FFFFFFrgba(0, 0, 0, 0)#00000011px8px0px solid transparent16px40024px44px44px#F6F5F4, text #000000#FFFFFF12px0px solid transparent24pxrgba(0, 0, 0, 0.01) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px#000000#F6F5F48px0px solid transparent16pxnone#000000#F2F9FF8px1px solid #62AEF020pxnone#000000#FFFFFF1px solid #78736F8px12px 16px16px40024px#000000rgba(0, 0, 0, 0.4)44px1px solid #62AEF0, box-shadow 0px 0px 0px 3px rgba(98, 174, 240, 0.1)1px solid #F64932#F6F5F4, text #78736F#FFFFFF1px solid #78736F8px12px 16px14px40020px#000000120px1px solid #62AEF0, box-shadow 0px 0px 0px 3px rgba(98, 174, 240, 0.1)20px × 20px#FFFFFF2px solid #78736F4px#62AEF0#FFFFFF2pxrgba(0, 0, 0, 0) (transparent on dark backgrounds) or #FFFFFF (on light backgrounds)64px0px 32px1px solid rgba(0, 0, 0, 0.1)rgba(0, 0, 0, 0.1) 0px 1px 0px 0pxrgba(0, 0, 0, 0.9) or #F6F5F4 (on dark)8px 16px8px16px40024pxrgba(0, 0, 0, 0.95)#F6F5F4, text #000000#62AEF0, text #FFFFFF#FFFFFF8px8px 0px0px solid transparentrgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px8px 16px14px40020px#000000#F6F5F4, text #000000#F6F5F4#0000004px 12px1000px12px50016px0px solid transparent#F2F9FF#0075DE4px 12px1000px12px50016pxrgba(152, 73, 232, 0.15)#9849E84px 12px1000px12px50016pxrgba(39, 145, 141, 0.15)#27918D4px 12px1000px12px50016pxrgba(255, 109, 0, 0.15)#FF6D004px 12px1000px12px50016pxrgba(246, 73, 50, 0.15)#F649324px 12px1000px12px50016pxrgba(255, 177, 16, 0.15)#FFB1104px 12px1000px12px50016px#FFFFFF0px1px solid #F6F5F448px12px 16px14px50020px#78736F0px solid transparent#000000, border 1px solid #F6F5F412px 16px14px60020px#0000002px solid #62AEF0Base Unit: 4px
Spacing Scale:
4px — Extra tight gaps, icon spacing, minimal separators8px — Tight spacing, component internal gaps12px — Small padding, list item gaps16px — Standard padding, component spacing20px — Medium gaps between content sections24px — Standard section padding, card internal spacing28px — Large gaps, content block separation32px — Extra-large padding, hero sections36px — Spacious padding, prominent sections40px — Large vertical gaps, major section breaks56px — Extra-large spacing, modular content zones60px — Heroic spacing, page-level separationUsage Context:
16px to 32px for components20px to 40px for section separation8px to 16px for items in rows/columns8px gapMax Width: 1440px (full bleed at breakpoint)
Columns: 12-column grid with 16px gutters
Container Padding:
32px left/right24px left/right16px left/rightSection Patterns:
1200px, centered, with 32px vertical padding50% or 60/40 depending on hierarchy24px gapNotion's design embraces generous whitespace to create clarity and breathing room. Content sections are separated by at least 40px of vertical space, with critical sections receiving 60px or more. Horizontal whitespace uses symmetric padding to create visual balance. Cards and containers maintain internal padding of at least 24px to prevent cramping. This approach reduces cognitive load and draws focus to primary content.
0px — Hard edges for no rounding (legacy/minimal UI elements)4px — Minimal rounding for buttons and tight components8px — Standard rounding for buttons, inputs, and general components12px — Prominent rounding for cards and larger containers50% — Perfect circles for avatars and icon buttons1000px — Pill-shaped buttons and badge containers| Level | Treatment | Use |
|---|---|---|
| None | No shadow | Flat surfaces, backgrounds, disabled states |
| Subtle | rgba(0, 0, 0, 0.01) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px | Modal dialogs, floating cards, lightboxes |
| Dropdown | rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px | Dropdown menus, popovers, contextual floating UI |
| Navigation | rgba(0, 0, 0, 0.1) 0px 1px 0px 0px | Top navigation bars, persistent headers |
Notion's shadow philosophy uses subtle, multi-layer shadows that create real depth without heaviness. Shadows increase progressively with elevation, creating a clear spatial hierarchy. The darkest shadows are reserved for modals and critical floating elements, while navigation and persistent UI use minimal definition. All shadows use very low opacity (1–4%) to maintain the clean, minimal aesthetic.
#62AEF0 for all primary CTAs and interactive elements that drive user action16px padding for most interactive components to ensure 44px minimum touch targets8px border radius to buttons and inputs—this is the standard rounding across the system#000000 text on light backgrounds and #F6F5F4 text on dark backgrounds for maximum contrast40px vertical spacing to create visual breathing room700 weight for all headings to maintain visual hierarchy16px gutters as the foundation for all layouts12px except for pill-shaped badges and circular avatars12px except in rare edge cases like code snippets#F64932 (error red) for non-critical states or warnings—reserve it for destructive actions only8px to interactive components (buttons, inputs, links)| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px – 639px | Single column layout, 16px padding, stacked navigation, 32px section spacing |
| Tablet | 640px – 1023px | Two-column layout option, 24px padding, horizontal navigation, 40px section spacing |
| Desktop | 1024px – 1439px | Full multi-column grid, 32px padding, expanded navigation, 60px section spacing |
| Large Desktop | 1440px+ | Max-width container 1440px centered, full feature set |
44px × 44px for all interactive elements (buttons, links, icon buttons)48px × 48px for primary actions and frequently tapped elements16px minimum between adjacent touch targets44px with 8px internal padding, icon size 24px20px base size, 16px internal padding for touch areaMobile (320px – 639px):
32px to 16px on sides16px gapTablet (640px – 1023px):
24px padding on sides24px to 16pxDesktop (1024px+):
24px gap32px side padding within container#62AEF0) — Use for main action buttons, primary links, interactive highlights#0075DE) — Use for alternative actions and secondary emphasis#FFFFFF) — Card and surface backgrounds#F6F5F4) — Default page background and subtle containers#000000) — All heading and primary text#000000) — Body copy and standard text#78736F) — Metadata, captions, and de-emphasized content#9849E8) — Badge and accent color for task routing features#27918D) — Badge and accent color for reporting and data features#FF6D00) — Badge and accent color for knowledge and Q&A features#F64932) — Validation errors and destructive actions#FFB110) — Warning messages and caution indicatorsAll buttons must be 44px minimum height with 12px vertical and 24px horizontal padding; use #62AEF0 for primary and #FFFFFF with border for secondary.
Typography must follow the hierarchy table exactly—headings at 700 weight, body at 400, captions at 12px 500; never deviate from the specified sizes and weights.
Spacing between sections is always 40px or 60px—never use arbitrary spacing; use the 12-column grid with 16px gutters as the foundation for all layouts.
Apply the full shadow pyramid: no shadow for flat elements, subtle shadow for cards/modals, dropdown shadow for menus—never apply shadows to disabled or de-emphasized states.
Border radius is 8px for buttons/inputs, 12px for cards, 1000px for badges—only use other values (4px, 50%) in edge cases documented in the design system.
All interactive elements need four states: default, hover, active, and disabled—disabled must use #F6F5F4 background with #78736F text.
Text contrast must pass WCAG AA (#000000 on light, #F6F5F4 on dark); never place light text on light backgrounds or dark text on dark backgrounds.
Agent badges use semantic colors: purple for task routing, teal for reporting, orange for Q&A—apply as background tint (15% opacity) with matching text color.
Focus states for inputs and buttons must include a 3px blue shadow (0px 0px 0px 3px rgba(98, 174, 240, 0.1)) for accessibility and visibility.
Mobile-first responsive design: 44px minimum touch targets, 16px side padding, single-column stacked layouts, hamburger navigation on screens under 640px; use the breakpoint table to guide responsive behavior.