The built-in system copies Notion's website. Our copy is Notion's app. They agree on the overall feel but differ on most exact values.
Every value below is read from the two systems' own files. Colour verdicts are measured: the two colours are put on their page background and their distance is measured in OKLab, a colour space built to match how people see colour. Under 0.012 counts as the same, under 0.05 as close, anything above as different.
5the same
11close
19different
9only in our copy
Which one to use
For the AltLeads CRM (an app), use our copy as the Notion reference. It has the app's real colours, sizes, icons, states and dark mode.
Use the built-in when you want Notion's website look fast, for example a marketing page or a deck.
Side by side
The same parts, drawn by each system's own CSS, row for row. Left: the built-in. Right: our copy. Hover and click work in both.
Built-inOpen Design's Notion package
Part
Our copyfrom the real Notion app
Colours
Swatches show each colour on its own page background.
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Page background | #ffffff--bg | #fff--c-bacPri | Samedifference 0.000 | |
| Soft surface (sidebar, panels) | #f6f5f4--surface | #f9f8f7--c-bacSec | Samedifference 0.009 | Practically the same; the app's is a hair lighter. |
| Main text | rgba(0, 0, 0, 0.95)--fg | #2c2c2b--c-texPri | Differentdifference 0.135 | Website text is near-black; the app uses a softer warm dark grey. |
| Secondary text | #615d59--muted | #7d7a75--c-texSec | Differentdifference 0.100 | The app's secondary text is lighter. |
| Faint text (placeholders) | #a39e98--meta | #a19e99--c-texTer | Samedifference 0.003 | |
| Lines and borders | rgba(0, 0, 0, 0.1)--border | rgba(28,19,1,.11)--ca-borPriTra | Samedifference 0.003 | Both are see-through hairlines; the app's has a warm tint. |
| Accent blue (main button, links) | #0075de--accent | #2783de--c-bluBacAccPri | Closedifference 0.042 | The website blue is deeper; the app blue is brighter. |
| Accent on hover | #005bab--accent-hover | #1f76ccprimary button hover | Differentdifference 0.089 | |
| Green (success) | #1aae39--success | #46a171--c-greIcoAccPri | Differentdifference 0.089 | The app green is softer. |
| Orange (warning) | #dd5b00--warn | #d5803b--c-oraIcoAccPri | Differentdifference 0.075 | |
| Red (danger) | #dc2626--danger | #e56458--c-redIcoAccPri | Differentdifference 0.099 | The built-in red is a generic Tailwind red, not Notion's. |
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Page background | #0f1115dark kit page | #191919--c-bacPri | Closedifference 0.037 | The built-in dark is a blue-black; Notion's dark is a warm neutral grey. |
| Soft surface | #171a21dark kit surface | #202020--c-bacSec | Closedifference 0.030 | |
| Main text | #f8fafcdark kit text | #f0efed--c-texPri | Closedifference 0.032 | |
| Secondary text | #a7adbadark kit muted | #ada9a3--c-texSec | Closedifference 0.031 | Cool grey against Notion's warm grey. |
| Lines and borders | #2a2f3adark kit border | rgba(255,255,235,.1)--ca-borPriTra | Closedifference 0.025 | |
| Accent blue | #0075dedark kit accent | #2783de--c-bluBacAccPri | Closedifference 0.042 |
Type
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Font | "NotionInter", Notion's website font (not installed on this PC, so it falls back to your system font) | The system UI font, as the Notion app uses it: Segoe UI on Windows, San Francisco on Mac | Different | The app never uses NotionInter. |
| Body text | 16px · line 1.5 · weight 400 | 16px · line 1.5 · weight 400 | Same | |
| Buttons and menus | 14px · weight 600 | 14px · weight 500 (blue button 600) | Close | |
| Largest title | 64px · weight 700 · tracking −2.125px (website hero) | 40px · weight 700 (page title) | Different | A website headline against an app page title. |
| Section heading | 48px · weight 700 | 30px · weight 600 (Heading 1) | Different | |
| Small labels | 12px · weight 600 (badges) | 12px · weight 500 (menu labels) | Close |
Shape and size
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Button corners | 4px | 6px | Different | |
| Button height | About 37px (8px + text + 8px) | 28px blue button · 32px outline button | Different | The app's buttons are smaller and denser. |
| Text field | White, 1px #dddddd border, 4px corners | Soft grey fill with a hairline, 6px corners, 28px tall | Different | |
| Card corners | 12px | 10px | Close | |
| Menu corners | No menu in the built-in | 10px | Only in ours | |
| Tags | Full pill, 12px · weight 600 | 4px corners, 14px · weight 400 | Different | Notion's app tags are small rounded rectangles, not pills. |
Depth and focus
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Card shadow | None until hovered; then 4 soft layers, darkest 0.04 | Always on: 2 soft layers plus a hairline ring | Different | |
| Menu shadow | No menu in the built-in | 2 soft layers (deepest 24px blur) plus a hairline | Only in ours | |
| Keyboard focus ring | 3px soft blue halo (30% opacity) | 2px page-coloured gap, then a 2px solid blue ring | Different |
Motion
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Hover | 150ms, one curve for everything | Measured per element: menu rows 20ms, buttons 100ms, sidebar 150ms | Different | |
| Pressing a button | Shrinks to 95% | Background darkens; no shrinking | Different | |
| Menus opening | No menu in the built-in | Fade in and grow from 96%, 200ms, from the button's corner | Only in ours | |
| Tooltips | None | Appear after a short pause, fade 100ms | Only in ours |
What each one includes
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Where the values come from | Open Design's curated summary of Notion's website | Notion's live web app (read on 2 Oct 2026) and Notion's Help Center screenshots | Different | |
| Design tokens | 56 | 745 light + 741 dark | Only in ours | |
| Real Notion icons | None (one generic arrow) | 781 | Only in ours | |
| Components | Buttons, text field, card, pill badge, type styles | All of those plus menus, tooltips, table, sidebar, board cards, tags, switches, checkboxes, callouts | Only in ours | |
| States | Hover, press and focus on buttons and fields | Hover, pressed, focus, selected, disabled and open/close on every control | Only in ours | |
| Dark mode | A generic dark kit (blue-black, not Notion's colours) | Notion's own dark colours, contrast-checked | Different | |
| Product screens | None. 6 sample pages made in this style: landing, deck, form, email, newsletter, poster | 2 Notion screens rebuilt and checked pixel by pixel (94.7% and 91.6% today), both clickable | Only in ours | |
| Guidelines | DESIGN.md, in 18 languages | Plain-language rules plus a 29-law UX scorecard | Close |
The built-in package, as it ships
Open Design's own Notion pages, unchanged. Pick one to open it here.
Our copy
Our Notion design system, built from the real Notion app
- One page, one scroll: colours, type, 781 real icons, every component and state, motion, dark mode, rules and the UX scorecard
- Two real Notion screens rebuilt and checked pixel by pixel, both clickable