Notion Design System

Notion's DESIGN.md has 47 color tokens: primary (#5645d4), primary-pressed (#4534b3), primary-deep (#3a2a99), on-primary (#ffffff), brand-navy (#0a1530), brand-navy-deep (#070f24) and 41 more. Every value is a quoted hex you can copy.

The color token `primary` is #5645d4, used by 3 components. The surface behind it is `canvas` (#ffffff).

Map the tokens to your CSS variables: `primary` (#5645d4) to `--primary`, `canvas` (#ffffff) to `--background`, `link-blue` (#0075de) to `--foreground`. shadcn/ui's Tailwind setup maps them to classes such as `bg-primary` and `text-foreground`, so they then use Notion's palette.

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.

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.

Notion's DESIGN.md sets its type in Notion Sans. The first family is the one most tokens use.

17 type tokens, such as `hero-display`, from 11px to 80px, in weights 400 to 600. Each token carries its family, size, weight, line height and letter spacing.

Notion Sans is Notion's main family and may be proprietary or need its own license. Keep the sizes, weights, line heights and letter spacing from the file and swap the family for an open font of similar proportions, such as a font from Google Fonts, set in `--font-sans`.

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.

50 components, among them `button-primary`, `button-primary-pressed`, `button-primary-disabled`, `button-dark` and `button-secondary`. Each lists properties such as its background, text color, type token and corner radius as references to the other tokens.

8 corner radii: xs (4px), sm (6px), md (8px), lg (12px), xl (16px) and 3 more. 12 spacing values: xxs (4px), xs (8px), sm (12px), md (16px), lg (20px) and 7 more. The file reads as a mix of pills, soft rounds and squarer corners.

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.

Copy the color and radius tokens into your `globals.css`: Notion's `primary` (#5645d4) becomes `--primary`, and `md` (8px) becomes `--radius`. The shadcn/ui components read those variables, so they change with the file.

Download Notion's DESIGN.md (or copy it as Markdown) and put it in your project, or paste it into the chat. Then ask Claude Code, Cursor or another agent to build a page "in the style of the Notion DESIGN.md": it reads the tokens and writes matching components.

Yes. The file is free to download or copy, with no account, from the buttons at the top and bottom of this page. The raw Markdown is also at `/design/notion/raw`.

Notion's page describes the look of its public website (www.notion.com), curated from what is visible there: the colors, type and components. It is an interpretation.

No. The Notion DESIGN.md describes the look of a public website. It is not official, and Notion has not endorsed or reviewed it. The name and logo belong to Notion.

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.

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.