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.

Get Notion free
Read the spec
Trusted by teams at New

Figma, Notion, Vercel, Linear, and 4M+ teams worldwide.

All systems operational

What this fixture exercises

## Every component uses only var(--*) tokens.

### 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 →

### 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.

Work email
Full name