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 clarity, confidence, and collaborative energy.
The visual identity balances minimalist surfaces with purposeful color
accents, creating a workspace that feels both professional and approachable.
The typography is bold and modern—particularly in display sizes where
aggressive letter-spacing creates visual drama—while body copy remains warm
and legible. The palette is dominated by clean whites and warm neutrals,
punctuated by a vibrant primary blue that signals interactivity and trust.
Illustrations and decorative elements introduce playfulness without
compromising the system's professionalism. The overall mood is one of
organized productivity: surfaces are generous with whitespace, interactive
elements are clearly signaled, and the design encourages users to focus on
their work rather than the interface.
source:
url: "https://notion.so"
pagesAnalyzed: 6
extractedAt: 2026-11-02
tokensMeasured: true
colors:
primary: "#0075DE"
accent: "#24292F"
canvas: "#FFFFFF"
surface: "#F6F5F4"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#615D59"
muted: "#A39E98"
accent-1: "#097FE8"
accent-2: "#005BAB"
accent-3: "#2684FF"
accent-4: "#5059C9"
accent-5: "#7B83EB"
accent-6: "#0364B8"
neutral-1: "#E6F3FE"
neutral-2: "#F2F9FF"
neutral-3: "#111111"
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: 64px
fontWeight: 700
lineHeight: 1
letterSpacing: -2.13px
display-md:
fontFamily: NotionInter
fontSize: 54px
fontWeight: 600
lineHeight: 1.04
letterSpacing: -1.88px
display-md-strong:
fontFamily: NotionInter
fontSize: 54px
fontWeight: 700
lineHeight: 1.04
letterSpacing: -1.88px
display-sm:
fontFamily: NotionInter
fontSize: 42px
fontWeight: 700
lineHeight: 1.14
letterSpacing: -1.5px
heading-xl:
fontFamily: NotionInter
fontSize: 32px
fontWeight: 700
lineHeight: 1.25
letterSpacing: -0.75px
heading-lg:
fontFamily: NotionInter
fontSize: 26px
fontWeight: 700
lineHeight: 1.23
letterSpacing: -0.62px
heading-md:
fontFamily: NotionInter
fontSize: 22px
fontWeight: 700
lineHeight: 1.27
letterSpacing: -0.25px
heading-sm:
fontFamily: NotionInter
fontSize: 18px
fontWeight: 700
lineHeight: 1.56
letterSpacing: -0.12px
heading-xs:
fontFamily: NotionInter
fontSize: 16px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
quote-xl:
fontFamily: "Lyon Text"
fontSize: 32px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
quote-lg:
fontFamily: "Lyon Text"
fontSize: 20px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
quote-md:
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-strong:
fontFamily: NotionInter
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-lg-2:
fontFamily: NotionInter
fontSize: 16px
fontWeight: 600
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-xs:
fontFamily: NotionInter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0.13px
caption-xs-strong:
fontFamily: NotionInter
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 0.13px
caption-xs-2:
fontFamily: NotionInter
fontSize: 12px
fontWeight: 600
lineHeight: 1.33
letterSpacing: 0.13px
code:
fontFamily: NotionInter
fontSize: 14px
fontWeight: 500
lineHeight: 1.71
letterSpacing: 0px
rounded:
none: 0px
xs: 4px
sm: 5px
md: 6px
lg: 8px
xl: 10px
xxl: 12px
r-16: 16px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 36px
band: 40px
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"
md: "rgba(0, 0, 0, 0.2) 0px 2px 7px 0px"
lg: "rgba(0, 0, 0, 0.04) 0px 4px 18px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.84688px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.01) 0px 0.175px 1.04062px 0px, rgba(255, 255, 255, 0.6) 0px 0px 1px 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.lg}"
backgroundColor: "{colors.primary}"
button-filled:
typography: "{typography.body-lg-strong}"
textColor: "{colors.accent-2}"
height: 38px
padding: "6px 15px 6px 15px"
rounded: "{rounded.lg}"
backgroundColor: "{colors.neutral-1}"
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.xxl}"
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}"
footer-sm:
typography: "{typography.body-lg}"
textColor: "rgba(0, 0, 0, 0.54)"
padding: "16px 0px 0px 0px"
link:
typography: "{typography.body-lg}"
textColor: "rgba(0, 0, 0, 0.95)"
rounded: "{rounded.xxl}"
link-sm:
typography: "{typography.body-lg}"
textColor: "rgba(0, 0, 0, 0.95)"
badge-filled:
typography: "{typography.caption-xs-2}"
textColor: "{colors.accent-1}"
height: 16.7344px
padding: "4px 8px 4px 8px"
rounded: 9999.01px
backgroundColor: "{colors.neutral-2}"
badge-filled-2:
typography: "{typography.caption-xs-2}"
textColor: "rgb(49, 48, 46)"
height: 16.7344px
padding: "4px 8px 4px 8px"
rounded: 9999.01px
backgroundColor: "{colors.surface}"
badge-text:
typography: "{typography.caption-xs-2}"
textColor: "rgba(0, 0, 0, 0.54)"
height: 24px
padding: "4px 8px 4px 8px"
rounded: 14px
backgroundColor: "{colors.canvas}"
badge-text-sm:
typography: "{typography.caption-xs-2}"
textColor: "{colors.accent-1}"
height: 16.7344px
padding: "4px 8px 4px 8px"
rounded: 9999.01px
backgroundColor: "{colors.canvas}"
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
link-disabled:
target: link
state: disabled
opacity: 0.5
button-hover:
target: button
state: hover
textDecoration: none
other-focus:
target: other
state: focus
boxShadow: "rgba(35, 131, 226, 0.57) 0px 0px 0px 1px inset, rgba(35, 131, 226, 0.35) 0px 0px 0px 2px"
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: 131
gradientsFound: 1
rolesUnassigned: 9
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Notion's design system embodies clarity, confidence, and collaborative energy. The visual identity balances minimalist surfaces with purposeful color accents, creating a workspace that feels both professional and approachable. The typography is bold and modern—particularly in display sizes where aggressive letter-spacing creates visual drama—while body copy remains warm and legible. The palette is dominated by clean whites and warm neutrals, punctuated by a vibrant primary blue that signals interactivity and trust. Illustrations and decorative elements introduce playfulness without compromising the system's professionalism. The overall mood is one of organized productivity: surfaces are generous with whitespace, interactive elements are clearly signaled, and the design encourages users to focus on their work rather than the interface.
Key Characteristics
{colors.primary} — #0075DE) as the dominant interactive accent{colors.primary} — #0075DE): Primary call-to-action buttons, brand accent, links, active states, and all interactive elements signaling primary actions. The defining brand color.{colors.accent} — #24292F): Dark hero band backgrounds and secondary accent surfaces. Used to frame hero messaging and create visual hierarchy in feature sections.{colors.accent-1} — #097FE8): Supporting accent with no measured role; use sparingly for decorative or component-level color variation.{colors.accent-2} — #005BAB): Supporting accent with no measured role; use for visual interest in supplementary contexts.{colors.accent-3} — #2684FF): Supporting accent with no measured role; available for feature color blocks or badge variants.{colors.accent-4} — #5059C9): Supporting accent with no measured role; suitable for component overlays or decorative flourishes.{colors.accent-5} — #7B83EB): Supporting accent with no measured role; light purple-toned accent for contrast.{colors.accent-6} — #0364B8): Supporting accent with no measured role; alternative blue for feature cards or banner overlays.{colors.primary} — #0075DE): All inline links and secondary CTAs inherit the primary brand blue with underline on hover.{colors.canvas} — #FFFFFF): Default page background, modal overlays, and high-contrast surfaces. Also serves as label/text color when layered on brand backgrounds.{colors.surface} — #F6F5F4): Card and panel backgrounds, creating subtle visual separation from the canvas without harsh contrast.{colors.ink} — #000000): Headings, titles, and primary text content requiring maximum legibility and hierarchy.{colors.body} — #615D59): Standard body copy and descriptive text. Warm gray-brown, designed to reduce contrast fatigue while maintaining readability.{colors.muted} — #A39E98): Captions, secondary metadata, helper text, and low-priority information.{colors.neutral-1} — #E6F3FE): Light blue-tinted surface for soft backgrounds, particularly in feature callouts or pricing cards.{colors.neutral-2} — #F2F9FF): Extremely light blue surface for subtle background differentiation or overlay states.{colors.neutral-3} — #111111): Near-black utility color for dark overlays, deep shadows, or high-contrast text in exceptional cases.Primary: NotionInter
Fallback stack: NotionInter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
Secondary: Lyon Text (serif, used for quotes and editorial content)
Fallback stack: Lyon Text, Georgia, "Times New Roman", serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | NotionInter | 96px | 600 | 1.04 | -4.6px | Hero headline; dramatic negative tracking |
| Display XL | NotionInter | 72px | 500 | 1.21 | -2px | Large hero heading; bold entry points |
| Display Large | NotionInter | 64px | 700 | 1.0 | -2.13px | Page hero; maximum impact display size |
| Display Medium | NotionInter | 54px | 600 or 700 | 1.04 | -1.88px | Tight leading with aggressive letter-spacing; hero emphasis |
| Display Small | NotionInter | 42px | 700 | 1.14 | -1.5px | Subsection heading; maintains visual weight |
| Heading XL | NotionInter | 32px | 700 | 1.25 | -0.75px | Major section heading |
| Heading Large | NotionInter | 26px | 700 | 1.23 | -0.62px | Section subheading |
| Heading Medium | NotionInter | 22px | 700 | 1.27 | -0.25px | Card titles and medium-emphasis headings |
| Heading Small | NotionInter | 18px | 700 | 1.56 | -0.12px | List headings and smaller emphasis text |
| Heading XS | NotionInter | 16px | 700 | 1.5 | 0px | Compact heading; consistent with body XL weight |
| Body XL | NotionInter | 20px | 400 | 1.4 | -0.12px | Large body copy; subtle tracking tightens flow |
| Body Large | NotionInter | 16px | 400 or 600 | 1.5 | 0px | Default paragraph; 600 weight for emphasis |
| Body Large Strong | NotionInter | 16px | 500 | 1.5 | 0px | Semi-bold body; accent emphasis within copy |
| Body Medium | NotionInter | 14px | 400 or 500 | 1.43 | 0px | Standard UI text, button labels, form input; 500 for emphasis |
| Button | NotionInter | 14px or 16px | 500 | 20px or 24px | 0px | Consistent with body; 16px for primary, 14px for secondary |
| Caption XS | NotionInter | 12px | 400 or 600 | 1.33 | 0.13px | Metadata, timestamps, helper text; 600 weight for badges |
| Code | NotionInter | 14px | 500 | 1.71 | 0px | Monospace code snippets; elevated line-height for readability |
| Quote Large | Lyon Text | 20px | 400 | 1.4 | 0px | Editorial quotes; serif serif typeface |
| Quote XL | Lyon Text | 32px | 400 | 1.25 | 0px | Large blockquote; serif emphasis |
| Quote Medium | Lyon Text | 18px | 400 | 1.56 | 0px | Smaller editorial quote |
-2px to -4.6px) to create visual drama and confidence. Do not normalize this to 0.1.0–1.04, body relaxes to 1.43–1.5, code expands to 1.71 for technical clarity.0.13px letter-spacing to prevent cramping and improve scannability at 12px.{typography.body-md} (14px) or {typography.body-lg} (16px), never smaller than caption size.Primary Button
{colors.primary} (#0075DE){colors.canvas} (#FFFFFF){spacing.xs} (8px) vertical, {spacing.md} (16px) horizontal{rounded.lg} (8px)1px solid transparent{typography.body-lg-strong} (16px, weight 500, line-height 1.5)0.75 or darker shadeSecondary Button (Filled Light)
{colors.neutral-1} (#E6F3FE){colors.accent-2} (#005BAB){spacing.xs} (8px) vertical, {spacing.md} (16px) horizontal{rounded.lg} (8px)1px solid transparent{typography.body-lg-strong} (16px, weight 500, line-height 1.5)Outline Button (Tertiary)
{colors.canvas} (#FFFFFF)rgba(0, 0, 0, 0.95)1px solid rgba(0, 0, 0, 0.1){spacing.xs} (8px) vertical, {spacing.md} (16px) horizontal{rounded.full} (9999px) — full pill shape{typography.body-md-strong} (14px, weight 500, line-height 1.43)Ghost Button
rgba(0, 0, 0, 0.05)rgba(0, 0, 0, 0.898)1px solid rgba(0, 0, 0, 0.1){spacing.xs} (8px) vertical, {spacing.sm} (12px) horizontal{rounded.md} (6px){typography.body-lg} (16px, weight 400, line-height 1.5)rgba(0, 0, 0, 0.1)rgba(0, 0, 0, 0.15)Small Text Button
rgba(0, 0, 0, 0.54)0px{rounded.none} (0px){typography.body-md} (14px, weight 400, line-height 1.43)rgba(0, 0, 0, 0.898)Default Card
{colors.canvas} (#FFFFFF){spacing.xl} (24px) for interior content{rounded.xxl} (12px){rounded.none} (no visible shadow by default; elevation via color/position)rgba(0, 0, 0, 0.898){typography.body-lg} (16px, weight 400, line-height 1.5)Surface Card (Muted Background)
{colors.surface} (#F6F5F4){spacing.lg} (20px){rounded.xxl} (12px)rgba(0, 0, 0, 0.898)Pricing Card
{colors.canvas} (#FFFFFF) or {colors.neutral-2} (#F2F9FF) for featured tier1px solid rgba(0, 0, 0, 0.1) (light border on non-featured){spacing.xxxl} (32px){rounded.xxl} (12px){colors.ink} (#000000) for headings, {colors.body} (#615D59) for bodyText Input
{colors.canvas} (#FFFFFF)1px solid rgba(0, 0, 0, 0.1){rounded.md} (6px){spacing.sm} (12px) vertical, {spacing.md} (16px) horizontal{typography.body-md} (14px, weight 400)rgba(35, 131, 226, 0.57) 0px 0px 0px 1px inset, rgba(35, 131, 226, 0.35) 0px 0px 0px 2px (blue focus ring){colors.body} text, {colors.muted} border, background remains white{colors.muted} (#A39E98)Checkbox / Control
1px solid rgba(0, 0, 0, 0.1){rounded.sm} (5px){colors.primary} (#0075DE), check icon white{colors.primary} with increased opacityTop Navigation Bar
{colors.canvas} (#FFFFFF)1px solid rgba(0, 0, 0, 0) (top or bottom border only){spacing.md} (16px) horizontalrgba(0, 0, 0, 0) 0px 1px 0px 0px (hairline border effect){typography.body-md} (14px, weight 400)rgba(0, 0, 0, 0.898) default, {colors.primary} on hoverNavigation Links
rgba(0, 0, 0, 0.898){typography.body-md} (14px, weight 400){colors.primary} (#0075DE), text-decoration underline{colors.primary}, maintained underlineMobile Menu Toggle
rgba(0, 0, 0, 0.05){colors.ink} (#000000){rounded.lg} (8px){spacing.xs} (8px)375px breakpoint when nav links collapseFilled Badge (Primary)
{colors.neutral-2} (#F2F9FF){colors.accent-1} (#097FE8){spacing.xs} (8px) vertical, {spacing.sm} (12px) horizontal{rounded.full} (9999px){typography.caption-xs-2} (12px, weight 600, line-height 1.33, letter-spacing 0.13px)Filled Badge (Neutral)
{colors.surface} (#F6F5F4)rgba(49, 48, 46, 1){spacing.xs} (8px) vertical, {spacing.sm} (12px) horizontal{rounded.full} (9999px){typography.caption-xs-2} (12px, weight 600)Text Badge
{colors.canvas} (#FFFFFF)rgba(0, 0, 0, 0.54){spacing.xs} (8px) vertical, {spacing.sm} (12px) horizontal{rounded.lg} (14px){typography.caption-xs-2} (12px, weight 600)Notion uses a base unit of 4px with a deliberate scale emphasizing medium and large gaps. The progression prioritizes breathing room:
{spacing.xxs} (4px): Micro-gaps between inline elements or icon–text spacing{spacing.xs} (8px): Tight grouping; button padding, small component gaps{spacing.sm} (12px): Compact spacing; label–input, close-related items{spacing.md} (16px): Standard padding; button sides, card internals, default text offsets{spacing.lg} (20px): Breathing room; section margins, moderate separation{spacing.xl} (24px): Feature card padding; medium-emphasis spacing{spacing.xxl} (28px): Large card spacing; prominent section breaks{spacing.xxxl} (32px): Pricing card padding; major internal sections{spacing.section} (36px): Vertical gap between page sections{spacing.band} (40px): Hero section and feature band paddingUsage context: Navigation and header padding use {spacing.md} to {spacing.lg}. Card internals layer {spacing.md} for text blocks and {spacing.lg} between major card sections. Section margins default to {spacing.section} on desktop, scaling down via media queries on mobile.
1024px, 93px at 1280px, 106px at 1440px1–3 column layouts depending on viewport, pricing tier cards aligned horizontally with equal widthsWhitespace is deliberate and breathing. The design resists cramping; negative space frames content and reduces cognitive load. Large headings sit with ample vertical margin. Card-to-card gaps match or exceed internal card padding. Sections are visually distinct through color shifts and generous vertical {spacing.section} separation rather than borders. This creates a sense of calm, organized productivity—users can focus on content without visual clutter.
Notion employs a comprehensive rounded-corner strategy reflecting component hierarchy:
{rounded.none} (0px): Images, flat sections, and legacy layout blocks{rounded.xs} (4px): Very tight radius; rare use{rounded.sm} (5px): Checkbox and control indicators{rounded.md} (6px): Ghost buttons and secondary UI{rounded.lg} (8px): Primary buttons and icon buttons; the system's standard interactive radius{rounded.xl} (10px): Medium-emphasis surfaces{rounded.xxl} (12px): Card containers and major surface components{rounded.r-16} (16px): Large feature cards and prominent surfaces{rounded.full} (9999px): Pill-shaped buttons (outline/tertiary), badges, and fully rounded controlsPhilosophy: Interactive elements (buttons, inputs, badges) favor rounder corners ({rounded.lg} or higher) to signal affordance. Containers and cards use {rounded.xxl} as the standard. Full pills ({rounded.full}) appear on secondary action buttons and badges, creating a playful, approachable feel.
1px): Standard for button borders, input fields, and card outlines. Used sparingly; most components rely on color and shadow for definition rather than visible strokes.Notion employs a layered-micro shadow strategy—many near-transparent layers stacked to create barely-perceptible depth. This approach avoids harsh drop shadows while maintaining visual hierarchy through subtle lift.
| Level | Treatment | Use |
|---|---|---|
| Flat (Base) | No shadow; color or position creates separation | Canvas, body, default cards on bright backgrounds |
| Dropdown | 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, overlay cards |
| Navigation Border | rgba(0, 0, 0, 0) 0px 1px 0px 0px | Top navigation; hairline visual separator |
| Modal | rgba(0, 0, 0, 0.2) 0px 2px 7px 0px | Modal dialogs and overlay surfaces; stronger shadow for prominence |
| Custom Layered | rgba(0, 0, 0, 0.04) 0px 4px 18px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.84688px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.01) 0px 0.175px 1.04062px 0px, rgba(255, 255, 255, 0.6) 0px 0px 1px 0px | Premium cards, hero callouts; includes subtle inner light |
Shadow Philosophy: The system prioritizes color-based depth over shadow prominence. Most interactive surfaces achieve elevation through background color change (light surfaces on white canvas) rather than shadows. Dropdowns and modals receive layered micro-shadows for subtle floating effect. The innermost white highlight (rgba(255, 255, 255, 0.6) 0px 0px 1px 0px) on custom-level shadows creates a gentle luminous edge, suggesting high-quality construction.
0.05): Extreme hover states, ghost backgrounds, minimal contrast signals0.10): Subtle overlays, light borders0.20): Modal backdrop (semi-transparent dark), semi-transparent surfaces0.42): Mid-tone opacity for secondary content or disabled states0.50): Medium transparency for grouped elements or transitional states0.80): High opacity; near-opaque surfaces with slight transparency effectUsage: Disabled buttons typically reduce to 0.5 opacity. Hover states on ghost buttons shift to 0.75–1.0 opacity. Modal backdrops use rgba(0, 0, 0, 0.2) or similar moderate darkening. Subtle decorative elements may float at 0.05–0.10 opacity.
1–4): Page content, default cards, standard components10): Dropdown menus, floating toolbars100 or 500): Sticky navigation headers, persistent toolbars (100 for standard, 500 for top-most)1000): Modal dialogs, overlay surfaces, top-level interactive panelsStacking strategy: The system reserves low z-index values for grouped content (1–4), mid-range for interactive overlays (10–500), and 1000+ for modals. This prevents layering conflicts and ensures predictable stacking behavior across the interface.
{colors.primary} (#0075DE) for all primary calls-to-action. It is the defining brand color and should appear on the most important button on every page.-1.5px to -4.6px). This is a signature visual trait; do not normalize it.{spacing.section} (36px) and {spacing.band} (40px) between major sections; resist cramping content.{rounded.lg} (8px) for primary buttons and {rounded.full} (9999px) for pill-shaped tertiary buttons; this creates clear visual distinction.{colors.surface} (#F6F5F4) to create subtle visual separation from the canvas without harsh contrast. Layer this for secondary cards and grouped sections.{rounded.lg} or rounder. Tight radii on interactive elements create confusion; generously rounded corners signal affordance.focus-visible state across all interactive elements.{colors.accent-1}, #097FE8) for primary CTAs. The primary brand blue (#0075DE) is the single source of truth for actionable elements.-2px to -4.6px) is a defining design trait, not an accident. Maintain it.{colors.accent-2} through {colors.accent-6}, {colors.neutral-1–3}). These are available for feature color overlays, illustrations, and component variations—not for status or state signaling (the site does not declare semantic colors).4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px).{rounded.none} (0px) for photographs and data visualizations; rounding is reserved for interactive and container elements.{spacing.xs} (8px) vertical or {spacing.md} (16px) horizontal. Ensure adequate touch targets and visual breathing room.:focus-visible consistently so mouse and touch users also see clear focus indicators when needed.| Viewport | Content Width | Grid Columns | Nav Links | Largest Heading | Body Size | Section Padding-X |
|---|---|---|---|---|---|---|
| 375px (Mobile) | 343px | 3 | Visible | 42px ({typography.display-sm}) | 16px ({typography.body-lg}) | 16px ({spacing.md}) |
| 768px (Tablet) | 653px | 3 | Visible | 61px (interpolated) | 16px ({typography.body-lg}) | 58px (interpolated) |
| 1024px (Small Desktop) | 870px | 3 | Visible | 90px (interpolated) | 16px ({typography.body-lg}) | 77px (interpolated) |
| 1280px (Desktop) | 1094px | 3 | Visible | 96px ({typography.display-xxl}) | 16px ({typography.body-lg}) | 93px (interpolated) |
| 1440px (Large Desktop) | 1229px | 3 | 28 links visible | 96px ({typography.display-xxl}) | 16px ({typography.body-lg}) | 106px (interpolated) |
Key observations:
42px at mobile to 96px at large desktop16px throughout{spacing.xs} (8px) minimum; total size typically 32px–40px{spacing.xs} (8px) to prevent accidental tapsMobile-first principle: The system does not hide navigation or collapse UI at any breakpoint. Instead, it scales:
Use these mappings for rapid implementation:
{colors.primary} (#0075DE) — all "Get started," "Get Notion free," primary action buttons{colors.neutral-1} (#E6F3FE) background with {colors.accent-2} (#005BAB) text — light-filled buttons{colors.canvas} (#FFFFFF){colors.surface} (#F6F5F4) or canvas white{colors.ink} (#000000){colors.body} (#615D59){colors.muted} (#A39E98){colors.primary} (#0075DE) with underline{colors.accent-1} through {colors.accent-6} — use for illustrations, feature overlays, badge variants; not for semantic meaningDisplay text must retain negative letter-spacing. Apply letter-spacing: -4.6px (96px), -2px (72px), -1.5px (42px) exactly as measured. This is a signature trait.
Primary buttons are always {colors.primary} (#0075DE) with white text, {rounded.lg} (8px), and {spacing.md} horizontal padding. No exceptions.
Border radius on interactive elements never goes below {rounded.lg} (8px). Buttons use 8px–9999px; inputs/controls use 5px–6px; cards use 12px+.
Whitespace scales with viewport. Section padding-x ranges from 16px (mobile) to 106px (desktop); vertical spacing uses {spacing.section} (36px) as default between major blocks.
Shadows are layered micro-shadows, not bold drops. Dropdowns use the multi-layer shadow with RGBA opacity values stacked; modals use rgba(0, 0, 0, 0.2) 0px 2px 7px 0px. Never apply uniform drop shadows.
Typography hierarchy is: headings (700), emphasis (600/500), body (400). Maintain this weight distinction for visual clarity.
Focus rings appear on all interactive elements as box-shadow with blue outline. Use 0 0 0 2px var(--tatami-color-black), 0 0 0 4px var(--tatami-color-white) or equivalent.
3-column grid is consistent across all breakpoints. Do not introduce 1-column or 2-column layouts; cards reflow but column count stays at 3.
Opacity levels are discrete: 5%, 10%, 20%, 42%, 50%, 80%. Use these for disabled states, overlays, and transitions. Do not invent intermediate values.
Badge styling uses {rounded.full} (pill shape), {spacing.xs} padding, and {typography.caption-xs-2} (12px, weight 600, letter-spacing 0.13px). Maintain this consistency.
Semantic color roles not declared: The site does not expose error, success, warning, or info color states in its measured markup. No semantic color ramp can be defined; the system relies on accent colors only.
Interaction states partially observed: Hover, focus, active, and disabled states were extracted from stylesheets where available. However, some state transitions (e.g., loading, in-progress, transitional states) were not captured and should be inferred from similar components or tested in live contexts.
Animations and transitions not included: The extraction captured static properties only. Micro-interactions, duration, easing, and animation curves are not documented here and must be observed or specified separately.
Dark mode / theme variants not observed: The site was analyzed in light mode only. No dark mode or alternative theme was extracted; if dark mode exists, it is not represented in this system.
Cross-origin stylesheet limitations: Some stylesheets may have been cross-origin and unreadable, so certain CSS-declared details could be incomplete. Proprietary Notion components or deeply nested styles may not be fully captured.
Surfaces behind authentication not visited: The extraction covered public pages only. Authenticated user dashboards, workspace views, and premium/enterprise features were not analyzed.
Nine decorative accent colors lack assigned roles: {colors.accent-1} through {colors.accent-6}, {colors.neutral-1}, {colors.neutral-2}, and {colors.neutral-3} have no measured role evidence. These are available for use but should not be assigned semantic meaning without explicit design guidance.
Typography on Lyon Text quote blocks may have additional context or special rendering not fully captured; serif font usage is reserved for quotes but edge cases may exist.
Exact transition timing and animation curves are not documented; only static style properties are included here.
3D transforms, perspective, or advanced CSS effects are not covered; the system captures 2D, color-based, and shadow-based depth only.