Mohammad Kheirkhah

Generated Nov 5, 2026

DESIGN.md for notion.so

notion.so16 colors6 componentsNotionInter

Remix

12 screenshots captured· notion.so

1 / 12 · The AI workspace that works for you. | Notion · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Notion
description: |
  Notion's design system embodies a clean, minimal aesthetic paired with
  purposeful color accents and bold typography. The visual personality is
  professional yet approachable, emphasizing clarity and hierarchy through
  generous whitespace, well-defined surfaces, and precise typographic choices.
  The system favors flat, light surfaces anchored by a confident blue accent
  (#0075DE) that draws focus to primary actions. Typography plays a central
  role, with large display sizes featuring tight negative letter-spacing for
  impact, while body copy remains open and readable. The overall effect is one
  of calm efficiency—suitable for a workspace tool where users manage complex
  information and collaboration.
source:
  url: "https://notion.so"
  pagesAnalyzed: 6
  extractedAt: 2026-11-05
  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-focus-visible:
    target: other
    state: focus-visible
    outline: "solid 2px"
    outlineWidth: 2px
  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-disabled:
    target: other
    state: disabled
    opacity: 0.5
  other-active:
    target: other
    state: active
    opacity: 1
  link-disabled:
    target: link
    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: 100
  gradientsFound: 1
  rolesUnassigned: 9
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Notion

1. Visual Theme & Atmosphere

Notion's design system embodies a clean, minimal aesthetic paired with purposeful color accents and bold typography. The visual personality is professional yet approachable, emphasizing clarity and hierarchy through generous whitespace, well-defined surfaces, and precise typographic choices. The system favors flat, light surfaces anchored by a confident blue accent ({colors.primary} — #0075DE) that draws focus to primary actions. Typography plays a central role, with large display sizes featuring tight negative letter-spacing for impact, while body copy remains open and readable. The overall effect is one of calm efficiency—suitable for a workspace tool where users manage complex information and collaboration.

Key Characteristics

Clean, minimal surfaces with limited shadow depth
Bold display typography with pronounced negative letter-spacing
Primary brand blue (#0075DE) as the dominant interactive accent
Generous whitespace and breathing room between elements
Flat hierarchy with subtle surface differentiation via background color shifts
Monochromatic text ramp anchored by strong blacks and warm grays
Consistent use of pill-shaped buttons and rounded cards
Color blocking as the primary depth strategy, with minimal drop shadows

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #0075DE): Primary CTA buttons, brand accent, active states, and interactive elements throughout the interface. This is the dominant accent color establishing brand identity.
Canvas / On Primary ({colors.canvas} — #FFFFFF): Default page background and text color displayed on brand-colored surfaces.

Accent Colors

Secondary Accent ({colors.accent} — #24292F): Hero band backgrounds and secondary accent applications.
Decorative Accent 1 ({colors.accent-1} — #097FE8): Supporting decorative accent with no assigned functional role.
Decorative Accent 2 ({colors.accent-2} — #005BAB): Supporting decorative accent with no assigned functional role.
Decorative Accent 3 ({colors.accent-3} — #2684FF): Supporting decorative accent with no assigned functional role.
Decorative Accent 4 ({colors.accent-4} — #5059C9): Supporting decorative accent with no assigned functional role.
Decorative Accent 5 ({colors.accent-5} — #7B83EB): Supporting decorative accent with no assigned functional role.
Decorative Accent 6 ({colors.accent-6} — #0364B8): Supporting decorative accent with no assigned functional role.

Neutral Scale

Ink ({colors.ink} — #000000): Primary headings and strong text requiring maximum contrast.
Body ({colors.body} — #615D59): Standard body copy text color providing comfortable readability.
Muted ({colors.muted} — #A39E98): Captions, secondary text, and de-emphasized content.

Surface & Borders

Surface ({colors.surface} — #F6F5F4): Card and panel backgrounds, providing subtle lift from canvas.
Neutral – Light ({colors.neutral-1} — #E6F3FE): Light neutral supporting surface, often used for soft accent backgrounds.
Neutral – Lighter ({colors.neutral-2} — #F2F9FF): Very light neutral surface for subtle background distinction.
Neutral – Dark ({colors.neutral-3} — #111111): Dark neutral for strong contrast when needed.

3. Typography Rules

Font Family

Primary Font: NotionInter (sans-serif) Fallback stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif

Secondary Font: Lyon Text (serif) Fallback stack: Georgia, "Times New Roman", serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	NotionInter	72px	500	1.21	-2px	Hero headline; measured on display element
Display XXL	NotionInter	96px	600	1.04	-4.6px	Maximum display size; prominent hero text
Display LG	NotionInter	64px	700	1	-2.13px	Large hero section text
Display MD	NotionInter	54px	600–700	1.04	-1.88px	Medium-sized display heading
Display SM	NotionInter	42px	700	1.14	-1.5px	Smaller display text; responsive headline
Heading XL	NotionInter	32px	700	1.25	-0.75px	Large section heading
Heading LG	NotionInter	26px	700	1.23	-0.62px	Medium section heading
Heading MD	NotionInter	22px	700	1.27	-0.25px	Standard section heading
Heading SM	NotionInter	18px	700	1.56	-0.12px	Smaller heading variant
Heading XS	NotionInter	16px	700	1.5	0px	Small heading; used in sidebar and dense layouts
Body LG	NotionInter	16px	400–600	1.5	0px	Large body text; links and larger content
Body MD	NotionInter	14px	400–500	1.43	0px	Standard body text and list items
Body XL	NotionInter	20px	400	1.4	-0.12px	Extra-large body copy; prominent text blocks
Caption XS	NotionInter	12px	400–600	1.33	0.13px	Small captions and labels; secondary information
Code	NotionInter	14px	500	1.71	0px	Monospaced code display
Quote LG	Lyon Text	20px	400	1.4	0px	Large quote; serif typeface for editorial feel
Quote MD	Lyon Text	18px	400	1.56	0px	Medium quote; serif typeface
Quote XL	Lyon Text	32px	400	1.25	0px	Extra-large quote; serif typeface

Principles

Tight Tracking on Display: Display sizes (42px and above) use pronounced negative letter-spacing (ranging from -1.5px to -4.6px), creating visual impact and a premium feel.
Open Body Spacing: Body text and copy use neutral or zero letter-spacing for optimal readability.
Weight Hierarchy: Headings are uniformly 700 weight; body copy is 400 with optional 500–600 for emphasis. Captions and labels use 600 weight for legibility at small sizes.
Line Height Progression: Larger sizes compress line height (1.0–1.04) for dramatic effect; body and small text expand (1.43–1.71) for comfort.
Serif for Editorial: Lyon Text is reserved for quotations, providing a distinct serif alternative that signals quoted or editorial content.

4. Component Stylings

Buttons

Primary

Background: {colors.primary} (#0075DE)
Text Color: {colors.canvas} (#FFFFFF)
Padding: 6px 15px
Font Size: 16px (weight: 500, font-family: NotionInter)
Height: 38px
Border Radius: {rounded.lg} (8px)
Border: none
Line Height: 24px

Secondary / Filled Light

Background: {colors.neutral-1} (#E6F3FE)
Text Color: #005BAB
Padding: 6px 15px
Font Size: 16px (weight: 500, font-family: NotionInter)
Height: 38px
Border Radius: {rounded.lg} (8px)
Border: none
Line Height: 24px

Ghost / Outline

Background: {colors.canvas} (#FFFFFF)
Text Color: rgba(0, 0, 0, 0.95)
Padding: 8px 16px
Font Size: 14px (weight: 500, font-family: NotionInter)
Height: 38px
Border Radius: {rounded.full} (9999px)
Border: 1px solid rgba(0, 0, 0, 0.1)
Line Height: 20px

Text / Minimal

Background: transparent
Text Color: rgba(0, 0, 0, 0.898)
Padding: 5px 10px
Font Size: 16px (weight: 400, font-family: NotionInter)
Height: 30px
Border Radius: {rounded.xs} (4px)
Border: none
Line Height: 24px

Text Small

Background: transparent
Text Color: rgba(0, 0, 0, 0.54)
Padding: 0px
Font Size: 14px (weight: 400, font-family: NotionInter)
Height: 20px
Border Radius: {rounded.none} (0px)
Border: none
Line Height: 20px

Icon Button (Secondary)

Background: rgba(0, 0, 0, 0.05)
Text Color: {colors.canvas} (#FFFFFF)
Padding: 0px
Font Size: 16px (weight: 400, font-family: NotionInter)
Width: 32px, Height: 32px
Border Radius: {rounded.full} (50%)
Border: none
Line Height: 24px

Cards & Containers

Card – Default

Background: {colors.canvas} (#FFFFFF)
Text Color: rgba(0, 0, 0, 0.898)
Border Radius: {rounded.xxl} (12px)
Border: none
Padding: 0px (child elements manage internal spacing)
Box Shadow: none
Font Size: 16px (weight: 400, font-family: NotionInter)
Line Height: 24px

Card – Flat / No Border Radius

Background: transparent or rgba(0, 0, 0, 0)
Text Color: rgba(0, 0, 0, 0.898)
Border Radius: {rounded.none} (0px)
Border: none
Padding: 0px
Box Shadow: none
Font Size: 16px (weight: 400, font-family: NotionInter)
Line Height: 24px

Navigation

Primary Navigation

Background: {colors.canvas} (#FFFFFF)
Text Color: rgba(0, 0, 0, 0.898)
Height: 64px
Padding: 0px
Border Radius: {rounded.none} (0px)
Border: 1px solid rgba(0, 0, 0, 0) (hairline, effectively invisible)
Box Shadow: rgba(0, 0, 0, 0) 0px 1px 0px 0px
Font Size: 16px (weight: 400, font-family: NotionInter)
Line Height: 24px

Footer

Footer – Default

Background: {colors.canvas} (#FFFFFF)
Text Color: rgba(0, 0, 0, 0.898)
Padding: 80px 0px 24px 0px
Border: 1px solid rgba(0, 0, 0, 0.1) (top border)
Border Radius: {rounded.none} (0px)
Box Shadow: none
Font Size: 16px (weight: 400, font-family: NotionInter)
Line Height: 24px

Footer – Small / Secondary

Background: transparent
Text Color: rgba(0, 0, 0, 0.54)
Padding: 16px 0px
Border: none
Border Radius: {rounded.none} (0px)
Box Shadow: none
Font Size: 16px (weight: 400, font-family: NotionInter)
Line Height: 24px

Badges

Badge – Filled Primary

Background: {colors.neutral-2} (#F2F9FF)
Text Color: {colors.accent-1} (#097FE8)
Padding: 4px 8px
Font Size: 12px (weight: 600, font-family: NotionInter)
Border Radius: {rounded.full} (9999px)
Border: none
Line Height: 16px

Badge – Filled Secondary

Background: {colors.surface} (#F6F5F4)
Text Color: #313030
Padding: 4px 8px
Font Size: 12px (weight: 600, font-family: NotionInter)
Border Radius: {rounded.full} (9999px)
Border: none
Line Height: 16px

Badge – Text

Background: {colors.canvas} (#FFFFFF)
Text Color: rgba(0, 0, 0, 0.54)
Padding: 4px 8px
Font Size: 12px (weight: 600, font-family: NotionInter)
Border Radius: 14px
Border: none
Line Height: 16px

Badge – Text Primary Accent

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.accent-1} (#097FE8)
Padding: 4px 8px
Font Size: 12px (weight: 600, font-family: NotionInter)
Border Radius: {rounded.full} (9999px)
Border: none
Line Height: 16px

5. Layout Principles

Spacing System

The spacing system uses an 8px base unit with a defined scale for consistent rhythm and alignment:

{spacing.xxs} = 4px — Micro spacing for tight internal padding (e.g., icon-to-text separation)
{spacing.xs} = 8px — Minimal spacing between small adjacent elements
{spacing.sm} = 12px — Small spacing for compact component interiors
{spacing.md} = 16px — Standard spacing for default padding and margins
{spacing.lg} = 20px — Generous spacing between elements
{spacing.xl} = 24px — Large spacing for distinct sections
{spacing.xxl} = 28px — Extra-large spacing between major sections
{spacing.xxxl} = 32px — Large block spacing
{spacing.section} = 36px — Section-level vertical rhythm
{spacing.band} = 40px — Full-width band spacing

Usage Context

Buttons and small components: {spacing.xs} to {spacing.md}
Card internal padding: {spacing.md} to {spacing.xl}
Section vertical spacing: {spacing.section} to {spacing.band}
Hero / hero band spacing: {spacing.band} for generous breathing room

Grid & Container

Max Width: 1440px (full viewport width at desktop)
Content Column Width: Responsive
- 375px viewport: 343px content column
- 768px viewport: 653px content column
- 1024px viewport: 870px content column
- 1280px viewport: 1094px content column
- 1440px viewport: 1229px content column
Grid Columns: 3 columns measured across all breakpoints
Section Horizontal Padding: Responsive scaling
- 375px: 16px padding-left/right per section
- 768px: 58px padding-left/right per section
- 1024px: 77px padding-left/right per section
- 1280px: 93px padding-left/right per section
- 1440px: 106px padding-left/right per section

Whitespace Philosophy

Whitespace is deployed generously to create visual breathing room and emphasize hierarchy. Large display typography is surrounded by ample space to create focus. Card-based layouts rely on color-blocking and whitespace rather than shadows for depth definition. Sections are separated by {spacing.section} to {spacing.band} to ensure content clarity and prevent visual crowding.

Border Radius Scale

{rounded.none} = 0px — Sharp edges for flat, modern aesthetic; used on large cards, navigation, and structure
{rounded.xs} = 4px — Minimal rounding for tight, compact components
{rounded.sm} = 5px — Subtle rounding for small elements
{rounded.md} = 6px — Medium rounding for balanced appearance
{rounded.lg} = 8px — Standard rounding for buttons and smaller containers
{rounded.xl} = 10px — Generous rounding for interactive elements
{rounded.xxl} = 12px — Rounded appearance for cards and larger containers
{rounded.r-16} = 16px — Extra-rounded for emphasis
{rounded.full} = 9999px — Pill-shaped buttons, badges, and circular elements

Component Context

Buttons: {rounded.lg} (8px) primary, {rounded.full} (9999px) for outline/pill variants
Cards: {rounded.xxl} (12px)
Badges: {rounded.full} (9999px)
Images: {rounded.none} (0px)
Text buttons / minimal states: {rounded.xs} (4px)

Border Widths

Thin = 1px — Applied to button outlines, card borders, and hairline dividers in the interface (e.g., ghost button outline, subtle border accents)

6. Depth & Elevation

The elevation system employs minimal layered micro-shadows that provide subtle depth without visual weight. Depth comes primarily through color-blocking and surface shifts rather than pronounced shadows.

Level	Treatment	Use
Flat	No shadow	Base surfaces (canvas, body backgrounds)
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`	Dropdowns, floating elements
md	`rgba(0, 0, 0, 0) 0px 1px 0px 0px`	Navigation bars, subtle divider lines
lg	`rgba(0, 0, 0, 0.2) 0px 2px 7px 0px`	Modals, elevated overlays
xl	`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`	Custom elevated elements, premium surfaces

Shadow Philosophy

The system favors color-blocking as the primary depth strategy. Shadows are used sparingly and employ multiple transparent layers stacked for a barely-there lift effect (layered-micro approach). This creates a refined, modern appearance where elevation is suggested rather than declared. The innermost layers are near-transparent, building subtly to a maximum opacity at the largest scale.

Opacity Levels

5% (0.05) — Extremely subtle background tint or hover state
10% (0.10) — Light transparency for disabled or muted elements
20% (0.20) — Moderate transparency for secondary overlays
42% (0.42) — Pronounced transparency for distinct visual separation
50% (0.50) — Half opacity for medium-contrast overlays
80% (0.80) — High opacity with slight transparency for emphasis

Typical Usage

Disabled states: 50% opacity
Hover overlays: 5–20% opacity adjustment
Modal backdrops: 42–50% opacity
Secondary text: 54–80% of full opacity

Z-index / Layering

The stacking order follows a hierarchical scale:

Base = 1–4 — Default page elements, content cards
Dropdown = 10 — Menus, popovers, and floating panels above base content
Sticky = 100, 500 — Fixed headers, sticky navigation (500 for higher-priority sticky elements)
Modal = 1000 — Full-screen overlays, modal dialogs, and top-level interruptions

7. Do's and Don'ts

Do

Use the primary blue (#0075DE) for all primary calls-to-action to maintain brand recognition and guide user focus.
Apply generous whitespace around large display typography (display-xl and larger) to create visual impact and breathing room.
Employ color-blocking over shadows for depth differentiation; use surface colors ({colors.surface} — light gray) and neutrals to create layering without relying on drop shadows.
Maintain consistent button radius across primary variants: {rounded.lg} (8px) for solid buttons, {rounded.full} (9999px) for outline/pill variants.
Use negative letter-spacing on display sizes (42px and above) exactly as specified in the typography table to achieve the system's signature visual personality.
Leverage the neutral text ramp for hierarchy: {colors.ink} for headings, {colors.body} for body copy, {colors.muted} for captions.
Apply {spacing.md} (16px) as the default padding for standard components; adjust up or down based on component size and context.
Use rounded full ({rounded.full} — 9999px) for badges and pill-shaped buttons to reinforce the accessible, modern aesthetic.
Employ serif typeface (Lyon Text) only for quotations to signal editorial or quoted content distinctly from body copy.

Don't

Don't use shadows as a primary depth tool. The system is color-blocking–based; if shadows are needed, use the defined sm/md/lg/xl elevation set only.
Don't apply letter-spacing variations to body or caption text; neutral or zero letter-spacing preserves readability.
Don't round card corners below {rounded.xxl} (12px); this is the system's card standard.
Don't mix serif (Lyon Text) into body copy or UI labels; reserve it exclusively for quotation blocks.
Don't use secondary accent ({colors.accent} — #24292F) as a text color; it is reserved for hero band and background applications.
Don't exceed the 1440px max-width; scale padding and content columns per the responsive table instead.
Don't create new button variants outside the defined set (primary, secondary, ghost, text, text-sm, icon-button); maintain consistency.
Don't apply opacity lower than 5% or higher than 80% without specific justification; stay within the defined opacity scale.
Don't use decorative accent colors ({colors.accent-1} through {colors.accent-6}) as functional status indicators; they have no assigned semantic role and should be used sparingly for decorative accents only.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Column	Grid Columns	Heading Size	Body Size	Section Padding-X	Notable Changes
Mobile	375px	343px	3	42px	16px	16px	Default mobile layout; full-width sections with tight padding
Tablet	768px	653px	3	61px	16px	58px	Expanded content width; moderate horizontal padding
Desktop	1024px	870px	3	90px	16px	77px	Large heading sizes introduced; generous horizontal padding
Large Desktop	1280px	1094px	3	96px	16px	93px	Maximum heading sizes; wide content columns
Full HD	1440px	1229px	3	96px	16px	106px	Maximum layout; full-width section padding scales to 106px

Breakpoint Strategy

The system does not reduce column count below 3 columns across any measured breakpoint. Responsive behavior is achieved through:

Content column scaling: Width expands from 343px (mobile) to 1229px (desktop).
Section padding adjustment: Horizontal padding increases proportionally from 16px to 106px to maintain visual hierarchy and prevent edge-to-edge cramping.
Typography scaling: Display heading sizes expand from 42px (mobile) to 96px (desktop) to leverage larger screens while maintaining readability hierarchy.
Button and badge spacing: Scaling maintains {spacing.md} baseline; increased viewport width allows for more generous margins between interactive elements.

Touch Targets

Minimum touch targets are 38px × 38px for primary buttons and interactive elements. Icon buttons measure 32px × 32px minimum. Links and text buttons should provide at least 44px × 44px of interactive surface area when possible to accommodate finger-based interaction on mobile devices.

Collapsing Strategy

Navigation

Navigation remains visible across all breakpoints with 25–28 visible links measured. A menu toggle appears on mobile (375px) but navigation does not collapse to hamburger-only mode within the measured range.

Content Layout

On mobile (375px), sections stack vertically with {spacing.section} to {spacing.band} separation.
Card-based layouts maintain 3-column grids; content adapts by scaling card width proportionally rather than reducing column count.
Hero sections and display text scale typography size to fit viewport, preserving hierarchy and impact.
Pricing tables and feature lists adapt padding and spacing but do not switch to accordion or tabbed patterns within the measured breakpoints.

Horizontal Scrolling

The system avoids horizontal scrolling by proportionally scaling all widths. No measured breakpoint triggers overflow; instead, padding and content column width adjust to maintain full viewport coverage.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary (#0075DE) — use for primary buttons, active states, and brand accent elements
Secondary CTA: Filled Light (#E6F3FE) — use for secondary button fills and soft accent backgrounds
Canvas / Page Background: Canvas (#FFFFFF)
Card / Surface Background: Surface (#F6F5F4)
Heading Text: Ink (#000000)
Body Text: Body (#615D59)
Caption / Secondary Text: Muted (#A39E98)
Light Neutral Surface: Neutral-1 (#E6F3FE)
Extra-Light Neutral: Neutral-2 (#F2F9FF)

Iteration Guide

Typography Precision: Display sizes (42px+) always receive the exact negative letter-spacing specified in Section 3. Do not round -1.5px, -2px, -4.6px, etc. to zero. This is a defining trait of the brand.
Button Consistency: Primary buttons use {rounded.lg} (8px); outline/pill variants use {rounded.full} (9999px). Do not invent intermediate radius values.
Depth Strategy: Prioritize color-blocking (surface color shifts) over shadows. Use the defined shadow set (sm/md/lg/xl) only when elevation is semantically necessary (dropdowns, modals). Avoid inventing new shadow values.
Spacing Baseline: {spacing.md} (16px) is the default for most padding and margins. Scale up for larger components, down for compact inline elements. Never skip to larger values without a clear visual reason.
Color Role Discipline: The primary blue (#0075DE) is only for primary actions and brand accent. Do not repurpose it as an error or success indicator; the system has no semantic status ramp.
Responsive Scaling: All widths, padding, and typography scale across the breakpoint table. Do not introduce media queries at arbitrary screen sizes; use the defined breakpoints only.
Neutral Text Ramp: Use {colors.ink} (#000000) for headings, {colors.body} (#615D59) for body copy, and {colors.muted} (#A39E98) for secondary text. Do not invent intermediate shades.
Serif Exclusivity: Lyon Text is reserved for quotations ({typography.quote-*} roles). Do not use serif for buttons, labels, or body copy.
Z-index Discipline: Use only the defined layering values (1–4, 10, 100, 500, 1000). Do not invent intermediate z-index numbers; this ensures predictable stacking behavior.
Interaction States: Hover, focus, and active states are defined in Section 6 under "Interaction States." Where not explicitly specified, default to a 5–10% opacity shift or subtle color adjustment rather than inventing new state behavior.

10. Known Gaps

No semantic status colors: The site does not declare error, success, warning, or info color tokens. Do not invent a semantic ramp; if status indicators are needed, use decorative accent colors or opacity shifts on the primary palette.
Interaction states partially documented: While hover, focus, and active state CSS was extracted, not all component variants may have explicit state definitions in the source stylesheets. Where states are missing, apply conservative defaults (0.75–0.95 opacity, subtle color brightening, or minimal shadow lift).
Cross-origin stylesheet limitations: Some CSS declarations may be inaccessible due to cross-origin restrictions, so component detail may be incomplete or inferred from visual inspection rather than measured values.
Dark mode not addressed: This extraction covers only the light theme. The site does not expose a dark mode variant in the measured pages; if dark mode is required, it must be derived separately.
Nine decorative accent colors lack assigned roles: {colors.accent-1} through {colors.accent-6} are present in the palette but have no measurable functional role. Treat them as decorative only and do not repurpose them as status indicators or semantic elements without explicit design direction.
Authentication-gated surfaces not analyzed: Surfaces behind login or paywall were not captured. The design system reflects the public-facing pages only.
Micro-interaction timing and easing: CSS transitions, animation durations, and easing curves were not extracted. Standard ease-out or ease-in-out transitions (200ms–300ms) are recommended for button hover, dropdown reveal, and modal entrance, but exact values are not specified in this system.
Focus ring styling: While focus-visible states reference a focus ring, the exact width, color, and offset of the focus ring are inferred from CSS variable names rather than measured px values. Refer to the extracted interaction state data for specifics.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from notion.so

Primary

#0075DE

Primary CTA, brand accent, active state

#24292F

Secondary accent / hero band

#097FE8

Accent / decorative

#005BAB

Accent / decorative

#2684FF

Accent / decorative

#5059C9

Accent / decorative

#7B83EB

Accent / decorative

#0364B8

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#F6F5F4

Card / panel background

#000000

Headings / primary text

#615D59

Body copy

#A39E98

Captions, secondary text

#E6F3FE

Neutral

#F2F9FF

Neutral

#111111

Neutral

Typography · NotionInter

body14px · 500 · 20px

caption12px · 500 · 16px

body16px · 500 · 24px

h254px · 700 · 56px

link16px · 400 · 24px

body14px · 400 · 20px

body20px · 400 · 28px

heading22px · 700 · 28px

display42px · 700 · 48px

h164px · 700 · 64px

body16px · 600 · 24px

h196px · 600 · 100px

h316px · 700 · 24px

display72px · 500 · 87.12px

h322px · 700 · 28px

body16px · 400 · 24px

body15px · 600 · 20px

body15px · 400 · 20px

heading32px · 700 · 40px

body14px · 700 · 20px

caption12px · 600 · 16px

h242px · 700 · 48px

caption12px · 400 · 16px

code14px · 500 · 24px

list-item14px · 400 · 20px

body16px · 700 · 24px

heading18px · 700 · 28px

heading16px · 700 · 24px

body18px · 600 · 28px

button14px · 400 · 20px

display54px · 600 · 56px

h326px · 700 · 32px

h518px · 700 · 28px

heading12px · 400 · 16px

body15px · 700 · 20px

Typography · Lyon Text

body16px · 400 · 24px

quote18px · 400 · 28px

quote32px · 400 · 40px

quote20px · 400 · 28px

quote16px · 400 · 24px

Spacing

16px

24px

8px

4px

12px

32px

28px

80px

Elevation

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

rgba(0, 0, 0, 0) 0px 1px 0px 0px

rgba(0, 0, 0, 0.2) 0px 2px 7px 0px

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

Components · 6

Remixes of notion.so

Latest remixes

No public remixes yet. Be the first to make one.

Remix it