Where teams and agents Jam together.

Capture context, find answers, and automate tasks with AI built for your team.

Get Notion free Request a demo
Palette: warm ink on white/paper, one calm blue, playful highlight pops
Text / ink (warm)
ink-strongrgba(0,0,0,.95)
inkrgba(0,0,0,.898)
ink-mutedrgba(0,0,0,.54)
warm-gray#615d59
Surfaces & borders
white#ffffff
paper#f6f5f4
borderrgba(0,0,0,.1)
hover-fillrgba(0,0,0,.04)
Accent (calm blue) & playful pops
blue#0075de
blue-hover#005bab
blue-bright#097fe8
blue-tint#eaf1f8
amber#ffb110
lavender-hl#e9ddfb
lavender dot#8b5cf6
green-hl#d7efdb
green dot#2eae4e
sky#62aef0

Rule: chrome stays warm-black on white/paper with a single blue accent. Bright hues appear only as highlight backgrounds behind a word, in illustrated avatars, or in hand-drawn doodles, never as UI fills.

Typography: NotionInter / Inter, huge display, very tight tracking
Hero (h1)NotionInter · 96/100 · 600 · -4.6pxIdeas into action
Section (h2)NotionInter · 40–48 · 600 · -2 to -3%One workspace
SubheadNotionInter · 20–24 · 400 · -1%Write, plan, and organise together
BodyNotionInter · 16/24 · 400 · 0Body text at 16px / 24, weight 400, in warm-black ink.
UI / navNotionInter · 16 · 400–500 · 016px medium: nav links, buttons
CaptionNotionInter · 14 · 400 · 0Caption text at 14px, weight 400.

Display is huge and VERY tightly tracked, the Notion signature: weight 600 (never 700+) with dramatic negative tracking. The hero specimen above is set at 56px to fit this spec sheet; the live site ships it at 96/100.

Controls: radius 8, h38, blue primary + pale-blue secondary, every state
Primary · default Get Notion free Primary · hover (#005bab) Get Notion free Primary · disabled Get Notion free
Secondary · default Request a demo Secondary · hover (deeper tint) Request a demo Secondary · disabled Request a demo
Ghost / nav · default Learn more Ghost · hover (rgba(0,0,0,.04)) Learn more Ghost · disabled Learn more
Small primary · default New page Small primary · hover New page Small primary · disabled New page
Fields
Input · default
Input · focus (blue border + soft blue ring)
Highlight pills & badges (bright hues live here only)
Jam Plan Build Sync New
Cards: white, radius 12, hairline + soft shadow, emoji-led
📝

Docs

Write with an editor that gets out of your way.

✅

Projects

Plan and ship together with connected tasks.

🤖

Notion AI

Ask questions and automate work across your workspace.

Workspace shell: paper sidebar, block-based document
Product launchShare☆•••
🚀
Product launch

Everything the team needs to ship the Q3 release, in one place.

Finalise launch copy
Review pricing page
Schedule announcement
Brief support team
Depth & motion: radii, soft multi-layer very-low-alpha shadows
Radius scale
4 · small controls
8 · buttons, nav
12 · cards, panels
999 · pills
full · avatars
Shadow recipes
Card / panel elevation 0 0.2px 1px rgba(0,0,0,.01),
0 2px 8px rgba(0,0,0,.05)
Diffuse multi-layer A 0 0.175px 1.041px rgba(0,0,0,.01),
0 0.8px 2.925px rgba(0,0,0,.02)
Diffuse multi-layer B 0 0.667px 3.502px rgba(0,0,0,.008),
0 2.933px 7.252px rgba(0,0,0,.016)
Hairline (preferred) 1px rgba(0,0,0,.1) border, no shadow. Panels favor the hairline over heavy elevation.

Motion: restrained and CSS-native, uniform 150 to 200ms eased micro-transitions almost entirely on color and underline (dominant background-color 0.2s cubic-bezier, plus background-color 0.15s ease); dropdown carets rotate at 0.3s, popovers fade/slide in at 0.15s, and longer 0.6s to 1s staged entrances are reserved for the hero product demo.