Notion — Design System Inspiration
Calm productivity: warm off-white, hand-drawn iconography, and editorial restraint.
Design System Inspiration of Notion
1. Visual Theme & Atmosphere
2. Color Palette & Roles
Primary
Brand Secondary
Warm Neutral Scale
Semantic Accent Colors
Interactive
# Design System Inspiration of 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…
By @meliwat - License: MIT
Raw markdown