Warm neutrals
--bg white, --surface #f6f5f4 (warm white). Grays carry yellow-brown undertones — never blue-gray. The warmth is imperceptible individually, defining at scale.
Inspect tokens →Reference fixture · notion
The connected workspace where better work happens.
Notion combines notes, docs, wikis, and project management in one warm, approachable tool. Every value below comes from tokens.css — no raw hex, no off-token type.
What this fixture exercises
Every component uses only var(--*) tokens.
Compression at scale
-2.125px at 64px, -1.5px at 48px, -0.625px at 26px, relaxing to normal at 16px. Density at headlines, readability at body.
Read the spec →Whisper depth
1px solid rgba(0,0,0,0.1) borders. Shadows use 4 layers at max opacity 0.04 — depth felt rather than seen. Hover reveals the --elev-raised stack.
Inspect borders →Form components
Inputs inherit the same token system.
Focus ring: 2px solid #097fe8 + shadow reinforcement. Border at rest: 1px solid #dddddd — standard Notion input. Hover and active use scale(0.95) via CSS transform.
Teams using Notion
4,000,000+
across engineering, design, and ops.