Design System: Notion

1. Visual Theme & Atmosphere

Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page canvas is pure white (#ffffff) but the text isn't pure black -- it's a warm near-black (rgba(0,0,0,0.95)) that softens the reading experience imperceptibly. The warm gray scale (#f6f5f4, #31302e, #615d59, #a39e98) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.

The custom NotionInter font (a modified Inter) is the backbone of the system. At display sizes (64px), it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical systems: 400 for body, 500 for UI elements, 600 for semi-bold labels, and 700 for display headings. OpenType features "lnum" (lining numerals) and "locl" (localized forms) are enabled on larger text, adding typographic sophistication that rewards close reading.

What makes Notion's visual language distinctive is its border philosophy. Rather than heavy borders or shadows, Notion uses ultra-thin 1px solid rgba(0,0,0,0.1) borders -- borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer stacks with cumulative opacity never exceeding 0.05, creating depth that's felt rather than seen.

Key Characteristics:

• NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px)
• Warm neutral palette: grays carry yellow-brown undertones (#f6f5f4 warm white, #31302e warm dark)
• Near-black text via rgba(0,0,0,0.95) -- not pure black, creating micro-warmth
• Ultra-thin borders: 1px solid rgba(0,0,0,0.1) throughout -- whisper-weight division
• Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth
• Notion Blue (#0075de) as the singular accent color for CTAs and interactive elements
• Pill badges (9999px radius) with tinted blue backgrounds for status indicators
• 8px base spacing unit with an organic, non-rigid scale