What is Notion's primary brand color?

Notion's signature color is the purple at #5645d4, used exclusively for the dominant 'Get Notion free' primary CTA. It pairs with #4534b3 for the pressed state and #3a2a99 for deeper emphasis. The purple is held back from body text and large background surfaces — the rest of the system runs on the deep navy hero band #0a1530, near-black ink #1a1a1a, warm charcoal #37352f, and a wide pastel card-tint palette. That restraint is what makes the purple register as a brand signal rather than decoration.

Does Notion's marketing site use dark mode?

Not as a togglable theme. The public marketing site is light-only, with #ffffff canvas and #f6f5f4 surfaces carrying most of the page. The only dark surfaces are the hero bands — #0a1530 navy with white text — and a promo strip variant at #070f24. The Notion app itself has a full dark theme, but the DESIGN.md captured here documents the marketing surfaces (homepage, Enterprise, Product AI, Product Agents, Startups, Pricing) where dark mode is band-scoped rather than global.

What font does Notion use, and what should I substitute?

Notion runs Notion Sans, a custom Inter-based variable typeface, across every UI surface including the homepage and product pages. Fallbacks walk Inter, -apple-system, system-ui, 'Segoe UI', Helvetica, sans-serif. The 80px hero-display token sits at weight 600 with -2px letter-spacing and 1.05 line-height; body-md runs 16px / 400 / 1.55 for documentation-friendly reading. Inter is the cleanest open-source substitute — proportions transfer almost identically, since Notion Sans is itself a fork.

Why does Notion use rectangular buttons instead of pills?

Notion's shape language is sober-editorial. Buttons render at 8px radius (`{rounded.md}`), inputs at 8px, cards at 12px (`{rounded.lg}`), and pill tabs and status badges at 9999px. Only tabs and badges are fully pill-shaped — every other interactive surface is a rectangle. The choice distinguishes Notion from pill-button-everywhere brands like Stripe and Linear and reinforces the workspace identity: rectangles feel like document blocks, pills feel like consumer apps.

Can I use this DESIGN.md to build a React workspace app?

Yes. The file is structured for AI consumption — drop it into Claude, Cursor, or Copilot and the agent will reproduce Notion's purple-CTA discipline, navy hero bands, pastel feature card grid, and 8px-rectangle button geometry instead of a generic shadcn theme. You can also pull tokens directly: every hex (#5645d4, #0a1530, #f9e79f, the nine pastel tints) and every radius / spacing / typography value is a quoted token you can paste into Tailwind config, CSS variables, or your own component library.

What's missing from this DESIGN.md spec?

A short list, documented in the Known Gaps section. Dark-mode token values are only surfaced for the hero bands — the in-app dark theme isn't captured. Animation and transition timings weren't extracted; 150–200ms ease is a safe default. Form-validation success state is not explicitly captured beyond the focused-input purple border. And the pastel-tint mapping (which feature card uses peach versus rose versus lavender) is observation-based from the six captured surfaces — the actual brand library may have additional tints.

Notion Design System

Notion's design system as a DESIGN.md file.

About Notion DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source notion.com

Productivity & SaaS
Documentation & Knowledge

Notion's design system reads as a workspace, not a marketing site. The homepage opens with "Meet the night shift." centered over a deep navy band ("#0a1530") decorated with brand-colored sticky-note dots and mesh wire illustrations — atmosphere rather than chrome. The dominant action is a single purple pill button at "#5645d4", and a real "Ramp HQ" kanban mockup floats below the buttons with a 24px diffuse drop shadow. The voice is confident and illustration-rich without leaning maximalist.

This DESIGN.md packages the whole spec into one machine-readable file. Inside: 53 color tokens grouped into brand purples, a 10-color brand spectrum, 9 pastel card tints, surface, hairline, text, and semantic scales; 17 typography tokens running Notion Sans (Inter-based) from 80px hero-display down to 11px micro-uppercase; 8 corner radii from 4px chips to 24px feature cards; 12 spacing tokens up to 120px hero gutters; and 50+ components covering buttons, pastel feature cards (peach, rose, mint, lavender, sky, yellow, cream), inputs, pill and segmented tabs, badges, the 4-tier pricing comparison, the embedded workspace mockup, FAQ accordions, and the multi-column footer. Format follows the Google Labs DESIGN.md spec.

A working React developer feeds this file to Claude, Cursor, or Copilot and gets components that match Notion's discipline — rectangular 8px buttons, 12px-rounded cards, purple reserved for one CTA per page, navy bands paired with sticky-note decoration — instead of a generic shadcn theme. Reference the tokens directly inside Tailwind config, CSS variables, or your own component library. The system is worth studying for one reason: it proves that "all-in-one workspace" branding can be illustration-rich and colorful without resorting to gradient bling or pill-button-everywhere uniformity.

What makes it distinct

Signature purple voltage#5645d4 reserved for the dominant 'Get Notion free' CTA, never decorative
Deep navy #0a1530 hero band with scattered sticky-note dots and mesh wire illustrations
Nine pastel card tintspeach, rose, mint, lavender, sky, yellow, cream, gray, plus bold yellow #f9e79f
Rectangular 8px buttons, not pillssober-editorial geometry distinguishes it from Stripe and Linear
Live workspace mockup card embedded in the hero with a 24px diffuse drop shadow

Live at notion.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

notion.com

Explore Notion

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Notion design system FAQ

Common questions about Notion's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Notion in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→