Untitled Design System
Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice. The homepage opens with centered 'Meet the night shift.' on a navy hero band, featuring a signature purple pill primary CTA. Key characteristics include deep navy hero bands, brand purple CTAs, real workspace UI mockups, pastel feature card tints, 8px-rounded buttons, 12px-rounded cards, and a centered hero layout.
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice. The homepage opens with centered 'Meet the night shift.' on a navy hero band, featuring a signature purple pill primary CTA. Key characteristics include deep navy hero bands, brand purple CTAs, real workspace UI mockups, pastel feature card tints, 8px-rounded buttons, 12px-rounded cards, and a centered hero layout.
Components
Buttons
Elevation & Depth
Do's & Don'ts
Do
Don't
Layout
### Spacing System
• Base unit: 4px (8px primary increment)
• Tokens: {spacing.xxs} (4px) through {spacing.hero} (120px)
• Section rhythm: Marketing pages use {spacing.section-lg} (96px); pricing tightens to {spacing.section} (64px)
### Grid & Container
• 1280px max-width with 32px gutters
• Pricing: 4-tier card row at desktop with dense comparison table
• Homepage: centered hero with workspace mockup below buttons; alternating colorful feature card sections
### Whitespace Philosophy
Marketing surfaces use generous breathing room between feature card bands. Workspace mockup card on hero gets full-width treatment with deep drop shadow.
Shapes
### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| {rounded.xs} | 4px | Tag chips |
| {rounded.sm} | 6px | Type badges |
| {rounded.md} | 8px | Buttons, inputs, search-pill |
| {rounded.lg} | 12px | Cards, pricing tiers, agent tiles, workspace mockup |
| {rounded.xl} | 16px | Larger feature panels |
| {rounded.xxl} | 20px | Featured product showcases |
| {rounded.xxxl} | 24px | Larger feature cards |
| {rounded.full} | 9999px | Status badges, pill tabs (NOT regular buttons) |
Notion's geometry is sober-editorial — {rounded.md} (8px) buttons distinguish it from pill-button-everywhere brands.
Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile (small) | < 480px | Single column. Hero 36px. Pricing 1-up. |
| Mobile (large) | 480 – 767px | Feature cards 2-up. Hero 48px. |
| Tablet | 768 – 1023px | 2-column feature grids. Hero 56px. |
| Desktop | 1024 – 1279px | 4-tier pricing card row. Hero 72px. |
| Wide Desktop | ≥ 1280px | Full 80px hero presentation. |
### Touch Targets
• Buttons render at 40–44px effective height
• Form inputs render at 44px height
• Pill tabs ~32px → 44px on mobile
### Collapsing Strategy
• Promo banner stays full-width; truncates at < 480px
• Top nav below 1024px collapses to hamburger
• Hero band: workspace mockup card moves below text/buttons on mobile
• Pricing tiers: 4-column → 2-column tablet → 1-column mobile
• Feature cards: 3-up desktop → 2-up tablet → 1-up mobile
• Hero typography: 80px → 56px → 48px → 36px
• Footer: 6-column desktop → 3-column tablet → accordion mobile
### Image Behavior
• Workspace mockup card maintains aspect ratio
• Pastel illustrations inside feature cards scale proportionally
• Customer logo wall: wordmarks at consistent 60–80px height
Iteration Guide
1. Focus on ONE component at a time
2. Reference component names and tokens directly
3. Run npx @google/design.md lint DESIGN.md after edits
4. Add new variants as separate components: entries
5. Default to {typography.body-md} for body
6. Keep {colors.primary} (purple) as the primary CTA — distinct from {colors.link-blue} for inline links
7. Use {rounded.md} for buttons (rectangles), {rounded.lg} for cards, {rounded.full} for pill tabs/badges only
Known Gaps
• Specific dark-mode token values not surfaced beyond hero bands
• Animation/transition timings not extracted; recommend 150–200ms ease
• Form validation success state not explicitly captured
• Pastel-tint mapping (which feature uses which tint) is observation-based — the actual brand library may have more entries
Use with MCP
Don't have the MCP? Install it here