Notion Blue
#0075de
Primary CTA and active links
Foundation
Color Tokens
Paper Warmth carries the page, Pure White lifts cards, and Notion Blue is reserved for the primary action. Flat accent colors paint feature panels like sticky notes.
Paper Warmth
#f6f5f4
Warm page canvas
Pure White
#ffffff
Card and elevated surfaces
Ink Black
#000000
Primary text and headings
Charcoal
#111111
Softer dark UI text
Stone
#757575
Muted navigation and helper text
Graphite
#615d59
Warm-cast body copy
Slate
#696969
Secondary card copy
Sky Tint
#e6f3fe
Ghost actions and tinted states
Marigold
#ffb110
Hero pills and accent cards
Coral
#f64932
Hot accent panels
Saffron
#e89d01
Warm background washes
Vermillion
#e32d14
Deep warm signal panels
Mocha
#b18164
Earthy accent panels
Signal Blue
#097fe8
Decorative blue panels
Sky Wash
#62aef0
Airy feature backgrounds
Midnight Ink
#02093a
Sparse dark-card island
Typography
Families & Type Scale
NotionInter carries product UI and large display copy. Lyon Text appears only at 18px and 32px as an editorial accent; Inter and Source Serif Pro are the open substitutes.
Font Families
WorkhorseNotionInter
EditorialLyon Text
Live Type Scale
Display-lgWork, clearly composed96px / 1.04 / −4.608px
DisplayWhere teams create together72px / 1.21 / −2.016px
Display-smKeep work moving54px / 1.04 / −1.89px
Heading-lgA warm editorial rhythm48px / 1.5
HeadingEverything in one place40px / 1.5
Heading-smProduct workspace22px / 1.27 / −0.242px
SubheadingOne place for the team20px / 1
BodyWrite, plan, and organize with room to think.16px / 1.5
Body-smUpdated workspace details14px / 1.43
CaptionMONDAY · 4 AUGUST12px / 1.33 / 0.12px
Layout
Spacing & Shapes
A 4px base supports comfortable density. Major sections separate by 80px, cards carry 24px padding, and related elements use an 8px gap.
Spacing Scale
4
8
12
16
20
24
28
32
36
64
80
Radius Treatments
Small4px
Button8px
Card12px
Pill9999px
Elevation
Shadow Tokens
Elevation is limited to the sticky navigation and the large product UI mockup. Content cards use hairline borders.
Nav
Sticky navigation
0 .7px 1.462px rgb(0% 0% 0%/.015), 0 3px 9px rgb(0% 0%
0%/.03)
Product UI
Hero mockup
0 4px 12px rgba(0,0,0,.1)
Depth
Surface System
Warm paper is the base, white cards sit above it, and flat accent or midnight panels punctuate the light page.
Page Canvas
Level 0 · warm off-white base
#f6f5f4
Card Surface
Level 1 · white card above paper
#ffffff
Accent Card Surface
Level 2 · representative flat accent
#ffb110
Dark Card Surface
Level 3 · sparse inverted island
#02093a
Components
Live Component Examples
Compact controls sit on warm paper and white cards. Notion Blue marks the main action; color variety belongs to feature panels and status pills.
Action Buttons
One filled primary action, one tinted secondary action, and
one compact outline
Input & Status
Pure White field and compact colored pill
Feature Surfaces
Flat color paints the canvas; rectangular cards stop at 12px
radius
Custom agentsMarigold accent
Team knowledgeSky Wash accent
Focused workMidnight island
Product UI Mockup
The only content surface using the product shadow token
Product workspace
A white Notion interface with an 8px task-card rhythm, warm dividers, and one restrained elevation.
Guidance
Do’s & Don’ts
Do · Preserve
- Use Paper Warmth (#f6f5f4) for the page and Pure White for cards.
- Reserve Notion Blue (#0075de) for one primary action per view.
- Use 1px rgba(0,0,0,.08) borders on content cards.
- Set cards at 12px, buttons at 8px, and pills at 9999px.
- Apply tight tracking to the 54px, 72px, and 96px display steps.
- Rotate marigold, coral, sky, and midnight across flat feature panels.
Don’t · Dilute
- Do not replace the warm canvas with a pure-white page.
- Do not add shadows to ordinary content cards.
- Do not introduce another chromatic filled-button color.
- Do not render every text role at full black.
- Do not use Lyon Text for navigation or product UI.
- Do not use gradients or oversized rectangular radii.