The visual approach
Notion's interface is built around a dark navy foundation—#00112B for backgrounds, #001D3D for elevated surfaces—with #0B6FFF as the primary blue that anchors interactive elements. The palette avoids pure black, opting instead for a softer contrast that reduces eye strain during long editing sessions. Accent colors (#7B61FF purple, #FFB84D yellow, #2ECC40 green) appear sparingly for status indicators and block types, but never compete for attention.
The typography system relies on -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif—a decision that prioritizes native rendering and performance over brand distinctiveness. Display XL sits at 72px with 700 weight for hero headlines, stepping down through Heading LG (30px/700) and Body MD (16px/400 with 1.5 line-height) to Label (14px/500). The scale is deliberate: large enough jumps between sizes to establish hierarchy, but not so extreme that the page feels fragmented.
Motion defines the experience more than static layout. Parallax scroll creates dimensional layering: background curves move at 0.3× scroll velocity while foreground character icons track at 0.7×. Headlines fade and slide up 24–32px on viewport entry, timed at 400–500ms with cubic-bezier(0.2, 0.8, 0.2, 1). The stagger delay between elements is 100–150ms—short enough to feel cohesive, long enough to read as intentional sequencing rather than jank.
Spacing follows a strict 4px base unit: 4, 8, 12, 16, 24, 32, 48, 64, 96px. Border radius values (SM: 4px, MD: 6px, LG: 8px, XL: 12px) echo this grid discipline. The component vocabulary stays minimal—nav, hero, cta, pricing, card—with consistent padding and margin ratios across breakpoints.
What works
The parallax technique avoids the common trap of being decorative for its own sake. By restricting motion to background elements and keeping text layers stable, Notion preserves readability while adding perceived depth. The 0.3×–0.7× multiplier range is conservative enough that users don't feel disoriented during fast scrolling.
The 4px spacing grid pays dividends at scale. When designing nested block structures or inline toolbars, the limited set of spacing options makes it harder to create visual inconsistency. Developers don't need to guess whether a gap should be 14px or 18px—the system forces you into 12px or 16px, and the resulting rhythm is tighter.
Primary CTA hover behavior (2–4px lift with shadow expansion, 200ms ease-out) is tuned well: noticeable without feeling springy. The same 200ms timing applies to secondary button borders and nav link underlines, creating muscle memory around interaction latency. Users stop questioning whether a click registered because the feedback loop is consistent.
The typography scale avoids a common mistake in productivity tools: trying to cram too much density into small sizes. Body MD at 16px with 1.5 line-height keeps paragraphs readable even in long documents. The 14px Label weight bumps to 500, adding just enough emphasis to distinguish UI chrome from content without requiring a color shift.
What a builder can borrow
Start with the 4px base unit and commit to it everywhere: padding, margin, icon sizes, border radius. Notion's scale (4, 8, 12, 16, 24, 32...) skips 20px and 28px intentionally—fewer options mean faster decisions and tighter visual cohesion. Use a spacing constant file and ban arbitrary pixel values in your CSS.
Adopt the parallax multiplier approach: background layers at 0.3×, midground at 0.5×, foreground at 0.7×. Keep text layers at 1× (no parallax) to avoid readability issues. Test at both slow and fast scroll speeds to confirm the effect doesn't become nauseating.
Standardize your timing. Notion uses 200ms for micro-interactions (hovers, toggles) and 400–500ms for scroll reveals. Pick two durations and apply them consistently—resist the urge to tweak per-component. Pair with a single easing curve (cubic-bezier(0.2, 0.8, 0.2, 1) or similar ease-out-quart) so all motion feels related.
The system font stack (-apple-system, BlinkMacSystemFont...) is underrated. You save the network cost of custom fonts, gain sub-pixel rendering quality, and benefit from OS-level font updates. For a dense productivity tool, this tradeoff is almost always correct.
Finally, resist accent color proliferation. Notion's palette includes purple, yellow, green, and red, but each has a defined semantic role (tags, warnings, success states). If you find yourself assigning colors arbitrarily, you've lost the system's organizing principle.