JL
Design systems

Notion

White canvas, one purple button, pastel tints

Design SystemLight theme

Color

  • primary

    #5645d4

  • primary-pressed

    #4534b3

  • primary-deep

    #3a2a99

  • on-primary

    #ffffff

  • brand-navy

    #0a1530

  • brand-navy-deep

    #070f24

  • brand-navy-mid

    #1a2a52

  • link-blue

    #0075de

  • link-blue-pressed

    #005bab

  • brand-orange

    #dd5b00

  • brand-orange-deep

    #793400

  • brand-pink

    #ff64c8

  • brand-pink-deep

    #a02e6d

  • brand-purple

    #7b3ff2

  • brand-purple-300

    #d6b6f6

  • brand-purple-800

    #391c57

  • brand-teal

    #2a9d99

  • brand-green

    #1aae39

  • brand-yellow

    #f5d75e

  • brand-brown

    #523410

  • card-tint-peach

    #ffe8d4

  • card-tint-rose

    #fde0ec

  • card-tint-mint

    #d9f3e1

  • card-tint-lavender

    #e6e0f5

  • card-tint-sky

    #dcecfa

  • card-tint-yellow

    #fef7d6

  • card-tint-yellow-bold

    #f9e79f

  • card-tint-cream

    #f8f5e8

  • card-tint-gray

    #f0eeec

  • canvas

    #ffffff

  • surface

    #f6f5f4

  • surface-soft

    #fafaf9

  • hairline

    #e5e3df

  • hairline-soft

    #ede9e4

  • hairline-strong

    #c8c4be

  • ink-deep

    #000000

  • ink

    #1a1a1a

  • charcoal

    #37352f

  • slate

    #5d5b54

  • steel

    #787671

  • stone

    #a4a097

  • muted

    #bbb8b1

  • on-dark

    #ffffff

  • on-dark-muted

    #a4a097

  • semantic-success

    {brand-green}

  • semantic-warning

    {brand-orange}

  • semantic-error

    #e03131

Typography

sans
"Notion Sans", Inter, -apple-system, system-ui, "Segoe UI", Helvetica, sans-serif

Display

  • hero-display

    80px / 1.05 · 600 · -2px

    hero-display

  • display-lg

    56px / 1.1 · 600 · -1px

    display-lg

  • heading-1

    48px / 1.15 · 600 · -0.5px

    heading-1

  • heading-2

    36px / 1.2 · 600 · -0.5px

    heading-2

  • heading-3

    28px / 1.25 · 600 · 0

    heading-3

  • heading-4

    22px / 1.3 · 600 · 0

    heading-4

  • heading-5

    18px / 1.4 · 600 · 0

    heading-5

Text

  • subtitle

    18px / 1.5 · 400 · 0

    subtitle

  • body-md

    16px / 1.55 · 400 · 0

    body-md

  • body-md-medium

    16px / 1.55 · 500 · 0

    body-md-medium

  • body-sm

    14px / 1.5 · 400 · 0

    body-sm

  • body-sm-medium

    14px / 1.5 · 500 · 0

    body-sm-medium

  • caption

    13px / 1.4 · 400 · 0

    caption

  • caption-bold

    13px / 1.4 · 600 · 0

    caption-bold

  • micro

    12px / 1.4 · 500 · 0

    micro

  • micro-uppercase

    11px / 1.4 · 600 · 1px

    micro-uppercase

  • button-md

    14px / 1.3 · 500 · 0

    button-md

Spacing

  • space-xxs

    4px

  • space-xs

    8px

  • space-sm

    12px

  • space-md

    16px

  • space-lg

    20px

  • space-xl

    24px

  • space-xxl

    32px

  • space-xxxl

    40px

  • space-section-sm

    48px

  • space-section

    64px

  • space-section-lg

    96px

  • space-hero

    120px

Radius

  • radius-xs

    4px

  • radius-sm

    6px

  • radius-md

    8px

  • radius-lg

    12px

  • radius-xl

    16px

  • radius-xxl

    20px

  • radius-xxxl

    24px

  • radius-full

    9999px

Elevation

  • shadow-none

    none

  • shadow-subtle

    rgba(15, 15, 15, 0.04) 0px 1px 2px 0px

  • shadow-card

    rgba(15, 15, 15, 0.08) 0px 4px 12px 0px

  • shadow-mockup

    rgba(15, 15, 15, 0.20) 0px 24px 48px -8px

  • shadow-modal

    rgba(15, 15, 15, 0.16) 0px 16px 48px -8px

Components

  • Buttons

    Buttons are 8px-radius rectangles, never pills, with a purple primary, a black dark button, an outlined secondary, a ghost, a blue text link, and white and outlined variants for the navy band.

    • Do use nt-btn--primary (primary fill, on-primary label, radius-md, button-md) as the one dominant action. Its pressed fill is primary-pressed.
    • Do pair it with nt-btn--secondary (transparent, ink label, 1px hairline-strong border) or, on brand-navy, with nt-btn--on-dark and nt-btn--secondary-on-dark (1px on-dark-muted border).
    • Do use nt-btn--link (link-blue, body-sm-medium) for inline text links; its pressed color is link-blue-pressed.
    • Do keep the minimum height at size-button-min-height; the source says 40 to 44px effective.
    • Don't make a button a pill; radius-full is for badges and pill tabs only.
    • Don't use link-blue for the main action or primary for inline links.
    • Don't expect a hover style: the source documents none.
    • Known failing pair kept exact: the disabled label (muted on hairline) is 1.55:1.

  • Cards

    Cards are 12px-radius panels: white with a hairline for content, pastel-tinted for features, a purple-bordered featured pricing tier, and the workspace mockup that breaks out of the navy hero band.

    • Do give standard cards canvas, a 1px hairline and radius-lg, with space-xl padding (space-lg for templates, space-xxl for feature, pricing and testimonial).
    • Do set tinted cards in a card-tint-* fill with charcoal text and no border; use card-tint-yellow-bold for the single high-emphasis banner card.
    • Do mark the featured pricing tier with a surface fill and a 2px primary border, plus badge-popular.
    • Do put the mockup on brand-navy with shadow-mockup (level 3). The Cards preview shortens the band's padding to space-section-sm; the real band takes space-hero.
    • Do set badges in caption-bold: radius-full for status badges, radius-sm for tag chips.
    • Don't add heavy shadows to flat documentation cards; use shadow-none and the hairline.
    • Don't use the purple for card backgrounds.
    • Known failing pairs kept exact: white on brand-pink (2.66:1) and brand-orange (3.77:1), brand-green text on card-tint-mint (2.50:1).
    • Not previewed: the source's stat-row and logo-wall-item.

  • Inputs

    Inputs are 44px white fields with an 8px radius and a 1px strong hairline that turns to a 2px purple border on focus, plus the gray search pill.

    • Do set the field on canvas with ink text in body-md, a 1px hairline-strong border, radius-md and size-input-height.
    • Do switch the border to 2px solid primary on focus, as the source documents; the previews trim the padding by 1px so the text does not move.
    • Do set the search pill on surface with a 1px hairline border and steel text.
    • Do show errors in semantic-error with the word "Error" in the message. The source gives no error border.
    • Don't use muted placeholder text for content a reader needs: it is 1.98:1 on canvas. The search pill's steel text is 4.17:1 on surface. Both kept exact from the source.
    • Don't invent a success state or a disabled input style; the source documents neither.
    • The label style is a preview choice (body-sm-medium); the source defines none.

  • Navigation

    Navigation is the sticky white top bar with a hairline, a promo strip above it, pill and underline tabs, and the multi-column light footer.

    • Do set the top bar on canvas at size-nav-height with a 1px hairline bottom border, product links on the left, and a log-in link and one nt-btn--primary on the right.
    • Do set the promo strip on surface in body-sm-medium, above the bar.
    • Do style the active pill tab as ink-deep with on-dark text and radius-full; inactive tabs are steel with a 1px hairline.
    • Do underline the active segmented tab with 2px ink and set its text in ink.
    • Do set footer links in steel and body-sm, on canvas with a 1px hairline top border, six columns on desktop.
    • Do collapse the top bar to a hamburger below 1024px; the second bar in the preview shows a text "Menu" stand-in because no icons are included.
    • Don't use radius-full on regular buttons; pill shapes are for tabs and badges.
    • The inactive tab and footer link steel text is 4.54:1 on canvas, just above the floor, and fails on surface (4.17:1).