Remixes of notion.so
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Notion
description: |
Notion's design system embodies a clean, professional minimalism grounded in
purposeful simplicity. The visual personality is contemporary and
approachable, leaning on generous whitespace, precise typography, and a
restrained accent color that commands attention without overwhelming. The
system prioritizes clarity and usability for knowledge workers and teams, with
a subtle layering strategy that surfaces depth through color blocking and
micro-shadows rather than bold visual effects. The mood is trustworthy yet
energetic—calm enough for focused work, but vibrant enough to inspire
collaboration and productivity.
source:
url: "https://notion.so"
pagesAnalyzed: 1
extractedAt: 2026-11-02
tokensMeasured: true
colors:
primary: "#0075DE"
canvas: "#FFFFFF"
surface-alt: "#F6F5F4"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#615D59"
accent-1: "#097FE8"
accent-2: "#005BAB"
neutral-1: "#A39E98"
neutral-2: "#E6F3FE"
typography:
display-xxl:
fontFamily: NotionInter
fontSize: 96px
fontWeight: 600
lineHeight: 1.04
letterSpacing: -4.6px
display-xl:
fontFamily: NotionInter
fontSize: 72px
fontWeight: 500
lineHeight: 1.21
letterSpacing: -2px
display-lg:
fontFamily: NotionInter
fontSize: 54px
fontWeight: 700
lineHeight: 1.04
letterSpacing: -1.88px
display-md:
fontFamily: NotionInter
fontSize: 42px
fontWeight: 700
lineHeight: 1.14
letterSpacing: -1.5px
heading-sm:
fontFamily: NotionInter
fontSize: 22px
fontWeight: 700
lineHeight: 1.27
letterSpacing: -0.25px
heading-xs:
fontFamily: NotionInter
fontSize: 16px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
quote:
fontFamily: "Lyon Text"
fontSize: 18px
fontWeight: 400
lineHeight: 1.56
letterSpacing: 0px
body-xl:
fontFamily: NotionInter
fontSize: 20px
fontWeight: 400
lineHeight: 1.4
letterSpacing: -0.12px
body-lg:
fontFamily: NotionInter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg-lyon-text:
fontFamily: "Lyon Text"
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-lg-strong:
fontFamily: NotionInter
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: NotionInter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
body-md-strong:
fontFamily: NotionInter
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
caption:
fontFamily: NotionInter
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 0.13px
rounded:
none: 0px
xs: 4px
sm: 8px
md: 12px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 36px
section: 40px
band: 64px
borderWidths:
thin: 1px
shadows:
sm: "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"
elevationStrategy: layered-micro
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F6F5F4"
surfaceRaised: "#ECEBEA"
text: "#000000"
textMuted: "#615D59"
border: "#E0E0E0"
accent: "#0075DE"
accentFg: "#000000"
focusRing: "#0075DE"
elevation: shadow
dark:
bg: "#090F16"
surface: "#181D24"
surfaceRaised: "#242930"
text: "#F5F9FE"
textMuted: "#9BA0A6"
border: "#30353B"
accent: "#0080F2"
accentFg: "#0B0B0C"
focusRing: "#0075DE"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%)"
components:
button-primary:
typography: "{typography.body-lg-strong}"
textColor: "{colors.on-primary}"
height: 38px
padding: "6px 15px 6px 15px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
button-filled:
typography: "{typography.body-lg-strong}"
textColor: "{colors.accent-2}"
height: 38px
padding: "6px 15px 6px 15px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.neutral-2}"
button-secondary:
typography: "{typography.body-lg}"
textColor: "{colors.on-primary}"
height: 32px
rounded: "50%"
backgroundColor: "rgba(0, 0, 0, 0.05)"
button-outline:
typography: "{typography.body-md-strong}"
textColor: "rgba(0, 0, 0, 0.95)"
border: "1px solid rgba(0, 0, 0, 0.1)"
height: 38px
padding: "8px 16px 8px 16px"
rounded: 9999.01px
backgroundColor: "{colors.canvas}"
button-text:
typography: "{typography.body-lg}"
textColor: "rgba(0, 0, 0, 0.898)"
height: 30px
padding: "5px 10px 5px 10px"
rounded: "{rounded.xs}"
button-text-sm:
typography: "{typography.body-md}"
textColor: "rgba(0, 0, 0, 0.54)"
height: 20px
card:
typography: "{typography.body-lg}"
textColor: "rgba(0, 0, 0, 0.898)"
rounded: "{rounded.md}"
backgroundColor: "{colors.canvas}"
card-sm:
typography: "{typography.body-lg}"
textColor: "rgba(0, 0, 0, 0.898)"
navigation:
typography: "{typography.body-lg}"
textColor: "rgba(0, 0, 0, 0.898)"
height: 64px
backgroundColor: "{colors.canvas}"
footer:
typography: "{typography.body-lg}"
textColor: "rgba(0, 0, 0, 0.898)"
padding: "80px 0px 24px 0px"
backgroundColor: "{colors.canvas}"
link:
typography: "{typography.body-lg}"
textColor: "rgba(0, 0, 0, 0.95)"
rounded: "{rounded.md}"
link-sm:
typography: "{typography.body-lg}"
textColor: "rgba(0, 0, 0, 0.95)"
states:
other-hover:
target: other
state: hover
opacity: 0.75
other-active:
target: other
state: active
boxShadow: none
link-hover:
target: link
state: hover
textDecoration: underline
link-focus:
target: link
state: focus
textDecoration: underline
link-active:
target: link
state: active
textDecoration: underline
other-focus-visible:
target: other
state: focus-visible
outlineColor: "rgba(0, 0, 0, 0)"
other-disabled:
target: other
state: disabled
opacity: 0.5
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 3
navLinksVisible: 25
menuToggleVisible: true
headingPx: 42
bodyPx: 16
sectionPaddingX: 16
- width: 768
containerWidth: 653
gridColumns: 3
navLinksVisible: 25
menuToggleVisible: true
headingPx: 61
bodyPx: 16
sectionPaddingX: 58
- width: 1024
containerWidth: 870
gridColumns: 3
navLinksVisible: 26
menuToggleVisible: true
headingPx: 90
bodyPx: 16
sectionPaddingX: 77
- width: 1280
containerWidth: 1094
gridColumns: 3
navLinksVisible: 28
menuToggleVisible: true
headingPx: 96
bodyPx: 16
sectionPaddingX: 93
- width: 1440
containerWidth: 1229
gridColumns: 3
navLinksVisible: 28
menuToggleVisible: true
headingPx: 96
bodyPx: 16
sectionPaddingX: 106
coverage:
statesFound: 61
gradientsFound: 1
rolesUnassigned: 4
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Notion's design system embodies a clean, professional minimalism grounded in purposeful simplicity. The visual personality is contemporary and approachable, leaning on generous whitespace, precise typography, and a restrained accent color that commands attention without overwhelming. The system prioritizes clarity and usability for knowledge workers and teams, with a subtle layering strategy that surfaces depth through color blocking and micro-shadows rather than bold visual effects. The mood is trustworthy yet energetic—calm enough for focused work, but vibrant enough to inspire collaboration and productivity.
Key Characteristics
{colors.primary} — #0075DE): Primary call-to-action buttons, brand mark, active interactive states, hero accent band, and link hover states. High saturation cobalt blue commands attention without aggression.{colors.accent-1} — #097FE8): Decorative gradient and secondary brand treatments; no measured functional role.{colors.accent-2} — #005BAB): Decorative darker blue for visual depth; no measured functional role.{colors.neutral-2} — #E6F3FE): Light background tint for secondary or filled button states; pairs with primary text.{colors.canvas} — #FFFFFF): Default page background and label color on primary surfaces. Pure white for maximum legibility and space.{colors.surface-alt} — #F6F5F4): Alternating section bands and subtle background partitions; a near-white shift for visual distinction.{colors.ink} — #000000): Headings and primary text; pure black for maximum contrast and hierarchy.{colors.body} — #615D59): Secondary body copy and lower-hierarchy text; warm gray-brown for reduced visual weight.{colors.neutral-1} — #A39E98): Tertiary text, disabled states, and subtle UI elements; mid-tone warm gray.Primary: NotionInter (fallback stack implied: system sans-serif) Geometric sans-serif tuned for screen clarity. Used for all primary UI, headings, body copy, and interactive elements.
Secondary: Lyon Text (fallback stack implied: serif fallback) Serif font for quoted or long-form content; provides tonal contrast from NotionInter.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | NotionInter | 96px | 600 | 1.04 | –4.6px | Hero headline; maximum scale |
| Display XL | NotionInter | 72px | 500 | 1.21 | –2px | Large section headline |
| Display MD | NotionInter | 42px | 700 | 1.14 | –1.5px | Medium display headline |
| Display LG | NotionInter | 54px | 700 | 1.04 | –1.88px | Large headline |
| Heading SM | NotionInter | 22px | 700 | 1.27 | –0.25px | Subsection heading |
| Heading XS | NotionInter | 16px | 700 | 1.5 | 0px | Small heading / label strong |
| Body XL | NotionInter | 20px | 400 | 1.4 | –0.12px | Large body / intro text |
| Body LG | NotionInter | 16px | 400 | 1.5 | 0px | Link text / standard body |
| Body LG Strong | NotionInter | 16px | 500 | 1.5 | 0px | Emphasized body |
| Body LG (Lyon Text) | Lyon Text | 16px | 400 | 1.5 | 0px | Serif body alternative |
| Body MD | NotionInter | 14px | 400 | 1.43 | 0px | Default body copy |
| Body MD Strong | NotionInter | 14px | 500 | 1.43 | 0px | Emphasized small body |
| Caption | NotionInter | 12px | 500 | 1.33 | 0.13px | Captions, timestamps, fine print |
| Quote | Lyon Text | 18px | 400 | 1.56 | 0px | Block quote; serif treatment |
{colors.primary} (#0075DE){colors.canvas} (#FFFFFF){rounded.sm} (8px){colors.neutral-2} (#E6F3FE){colors.accent-2} (#005BAB){rounded.sm} (8px)rgba(0, 0, 0, 0.05) (barely perceptible tint){colors.canvas} (#FFFFFF){rounded.full} (50% / pill){colors.canvas} (#FFFFFF)rgba(0, 0, 0, 0.95){rounded.full} (9999px / pill)rgba(0, 0, 0, 0.1)rgba(0, 0, 0, 0.898){rounded.xs} (4px)rgba(0, 0, 0, 0.54){rounded.none} (0px / sharp){colors.canvas} (#FFFFFF)rgba(0, 0, 0, 0.898){rounded.md} (12px)rgba(0, 0, 0, 0.898){rounded.none} (0px / sharp){colors.canvas} (#FFFFFF)rgba(0, 0, 0, 0.898)rgba(0, 0, 0, 0) (hairline, barely visible)rgba(0, 0, 0, 0) 0px 1px 0px 0pxrgba(0, 0, 0, 0.95) (near-black){colors.canvas} (#FFFFFF)rgba(0, 0, 0, 0.898)rgba(0, 0, 0, 0.1)Base unit: {spacing.xs} (8px). All spacing values scale in multiples of 4px for pixel-perfect alignment:
{spacing.xxs} = 4px — micro-spacing (icon gaps, very tight lists){spacing.xs} = 8px — standard gap between inline elements{spacing.sm} = 12px — compact group spacing{spacing.md} = 16px — default padding and margins{spacing.lg} = 20px — comfortable breathing room{spacing.xl} = 24px — section interior margins{spacing.xxl} = 32px — large group separation{spacing.xxxl} = 36px — heading and major block spacing{spacing.section} = 40px — large section interior padding{spacing.band} = 64px — hero and full-width section marginsUsage Context: Hero headlines use {spacing.band} (64px) above and below. Card interiors use {spacing.md} to {spacing.xl}. Body paragraphs use {spacing.lg} for line breaks; lists use {spacing.md} between items.
{colors.surface-alt}) with centered max-width content containers inside each band.Whitespace is active and measured, not accidental. Large negative space between sections (using {spacing.band} = 64px) creates visual pauses and aids scanning. Interior card padding uses {spacing.md} to {spacing.xl} to prevent visual cramping. Body copy benefits from 1.3–1.56 line-height and paragraph breaks at {spacing.lg} intervals. This creates a calm, readable rhythm.
{rounded.none} (0px) — sharp corners, used on cards in some contexts, overlay panels, and small text buttons{rounded.xs} (4px) — very subtle rounding; text buttons{rounded.sm} (8px) — standard rounding for primary buttons and interactive controls{rounded.md} (12px) — rounded cards and larger containers{rounded.full} (9999px) — pill-shaped buttons (outline variant, ghost secondary buttons)Component Context: Primary buttons use {rounded.sm} (8px); pill-shaped outline buttons use {rounded.full}; card containers use {rounded.md} (12px). Radius is not unified—each component role is sized distinctly.
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, color blocking | Base surface; cards without lift |
| Micro (sm) | 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, floating panels |
| Hairline (md) | rgba(0, 0, 0, 0) 0px 1px 0px 0px | Navigation bar; visual edge without true shadow |
Shadow Philosophy: Notion uses a layered-micro strategy. Multiple near-transparent shadow layers stack to create a barely-perceptible lift, avoiding harsh drop shadows. The elevation strategy prioritizes color blocking (surface changes) over shadows. Depth comes primarily from semantic color choices and whitespace, not shadow intensity. This keeps the interface feeling flat and modern while still suggesting clickability.
{colors.primary} (#0075DE) for primary CTAs and critical interactive states. It commands attention naturally.{spacing.*} scale, especially {spacing.band} (64px) between major sections.{typography.display-xxl} (96px at weight 600) with letter-spacing –4.6px for hero headlines that feel bold without oversizing.{rounded.sm} (8px) shadows for dropdowns only.{rounded.full}) outline buttons for secondary CTAs; pair with sharp ({rounded.sm}) primary buttons.{colors.ink} (#000000) for headings and {colors.body} (#615D59) for body copy to preserve contrast and hierarchy.{colors.surface-alt} (#F6F5F4) for alternating section bands to create visual rhythm without jarring contrast.{colors.neutral-1} (#A39E98) for primary body copy; reserve it for tertiary or disabled text only. It lacks sufficient contrast.{spacing.md} (16px) on mobile; this harms touch target spacing and readability.| Breakpoint | Viewport Width | Max Content Width | Horizontal Padding | Visible Nav Links | Font Size (Display) | Key Changes |
|---|---|---|---|---|---|---|
| Mobile | 375px | 343px | 16px | 25 | 42px ({typography.display-md}) | Single column, compact nav, largest heading drops to 42px |
| Tablet | 768px | 653px | 58px | 25 | 61px | Content expands; hero headline ~60px |
| Desktop | 1024px | 870px | 77px | 26 | 90px | Full 3-column grid; heading scales to ~90px |
| Large | 1280px | 1094px | 93px | 28 | 96px | All nav links visible; heading reaches 96px |
| XL | 1440px | 1229px | 106px | 28 | 96px | Max layout; max heading size (96px) with tight tracking |
Collapse Strategy: The navigation toggle remains visible across all measured breakpoints, suggesting a persistent mobile-first menu UI. The layout does not truly collapse to mobile-first; the 3-column grid is maintained. Horizontal padding scales progressively: at 375px use 16px, at 768px use 58px, at 1024px use 77px, at 1280px use 93px, at 1440px use 106px. Typography scales in tandem—display headlines grow from 42px at mobile to 96px at desktop.
Minimum interactive element size: 38px height (primary and outline buttons). Ghost buttons (icon-only, 32px × 32px) are below standard but acceptable for repeated actions in toolbars. Link text remains clickable via large hit areas inherited from card or section containers.
Mobile (375px): Hero headlines drop to {typography.display-md} (42px); all navigation shifts to a toggle menu. Layout remains 3 columns but containers stack vertically due to narrow viewport. Padding shrinks to 16px.
Tablet (768px–1024px): Hero headline grows to ~60–90px; horizontal padding expands to 58–77px. Navigation links increase to 25–26 visible. 3-column grid persists.
Desktop (1280px+): Full width utilization; hero headline reaches {typography.display-xxl} (96px) with tight letter-spacing (–4.6px); all nav links visible (28 total).
{colors.primary} — #0075DE){colors.neutral-2} — #E6F3FE) with text in Accent 2 ({colors.accent-2} — #005BAB){colors.canvas} — #FFFFFF){colors.surface-alt} — #F6F5F4){colors.ink} — #000000){colors.body} — #615D59){colors.neutral-1} — #A39E98){colors.primary} for primary buttons and active states. It is the sole brand accent and commands attention naturally.{spacing.band} (64px) between major sections. Use {spacing.xl} (24px) inside cards. Use {spacing.md} (16px) for default margins.{rounded.sm} (8px); pill outline buttons use {rounded.full} (9999px); text buttons use {rounded.xs} or {rounded.none}.{rounded.sm} shadow with 0.04 max opacity).--tatami-color-* tokens). The specific hover/focus/active colors for primary, secondary, and tertiary button states cannot be fully resolved without access to the live CSS variables. Implement states using the provided opacity and underline patterns as fallbacks.{colors.accent-1} — #097FE8, {colors.accent-2} — #005BAB, and the two unnamed neutrals). They appear decorative or in gradients; their precise UI role is not evident from the site markup.linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%)) are present but not systematized; treat as one-off visual treatments, not part of a formal gradient palette.