Notion

Overview

Notion is a unified workspace platform that bridges team collaboration, knowledge management, and AI-powered automation. The design system embodies "Productive Minimalism"—a philosophy that strips away visual noise while strategically deploying vibrant accent colors (primary blue #0075de, secondary amber #ffb110, tertiary coral #f64932) to guide users toward high-value actions and highlight AI capabilities. The interface prioritizes clarity and speed: clean white surfaces (rgb(255, 255, 255)), generous whitespace, and a 96px display headline create an expansive, confident visual hierarchy that communicates capability without intimidation.

The brand voice is direct, action-oriented, and human-centered. Notion speaks to teams as peers, not users—sentences are active and outcome-focused ("Capture context, find answers, and automate tasks"), never passive or feature-heavy. The tone avoids hype; instead, it emphasizes practical results and collaborative agency. Example: "Where teams and agents Create together" positions AI as a collaborative partner, not a replacement. Typography uses NotionInter (a custom Inter variant) at generous sizes (96px for hero, 40px for section headlines) to reinforce the brand's confidence in its value proposition.

Colors

Notion's color system operates on a principle of "Accent-Driven Clarity." The primary color, #0075de (a vivid, saturated blue), is reserved exclusively for call-to-action buttons, interactive states, and primary navigation—it appears on the hero CTA "Get Notion free" (rgb(0, 117, 222) with white text, 16px fontWeight 500) and drives user attention without dominating the page. Secondary color #ffb110 (a warm, energetic amber) is deployed on accent elements and highlights—notably the "Create" pill in the hero (background: #fce8d6 with an orange dot accent) to emphasize the AI agent feature. Tertiary #f64932 (a bold coral-red) is reserved for error states, alerts, and secondary accent contexts.

The surface stack uses near-white and light gray tones to maintain visual lightness: surface (#fff

Typography

Notion's type system follows a "Confident Hierarchy" model: the display level (96px, fontWeight 600, lineHeight 104px, letterSpacing -0.04em) commands attention on hero sections and establishes the brand's scale and authority. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content sections with clear visual breaks. Body text (16px, fontWeight 400, lineHeight 24px) is set in NotionInter—a custom Inter variant optimized for screen readability—with generous line-height to reduce cognitive load. Label-md (16px, fontWeight 500) is used for button text and interactive labels, with a subtle 0.01em letter-spacing to add precision. All type uses the NotionInter family stack (NotionInter, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif) t

Layout

Notion uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The hero section spans full-width with centered content (text-align: center) and symmetric padding: 64px (lg spacing) top/bottom, 24px (gutter) left/right on mobile, scaling to 40px on desktop. Section separation uses lg spacing (40px) between major content blocks, with md spacing (24px) for subsections and component groups. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. Whitespace is treated as a first-class design element: the hero headline has 24px margin-bottom before the subheading, and CTAs are separated by 16px (2 × unit) to create breathing room. Cards and containers use md spacing (24px) for internal padding, with sm spacing (12px) between

Elevation & Depth

Notion employs a subtle shadow system to create depth without visual heaviness. The base elevation (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to cards and input fields, creating a barely-perceptible lift from the surface. Medium elevation (md: 0 3px 8px rgba(0, 0, 0, 0.15)) is used on hover states for cards and modals, signaling interactivity and focus. Large elevation (lg: 0 8px 24px rgba(0, 0, 0, 0.12)) is reserved for dropdowns, popovers, and floating elements that must visually separate from the page. All shadows use a 0.15 to 0.12 alpha value on black (rgba(0, 0, 0, ...)) to maintain

Shapes

Notion adopts a "Geometric Precision" approach to border-radius, using a limited, intentional palette of rounded values. Buttons and interactive elements use lg (1rem / 16px) border-radius, creating a friendly but professional appearance—the primary CTA "Get Notion free" uses borderRadius: 8px (matching the computed style from the rendered DOM). Cards and containers use lg (1rem) or md (0.75rem / 12px) depending on context: larger cards (feature cards, modals) use lg, while smaller components (badges, input fields) use md or DEFAULT (0.5rem / 8px). The highlight pill in the hero uses full (999

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses backgroundColor: rgb(0, 117, 222), textColor: rgb(255, 255, 255), padding: 6px 15px, height: 40px, borderRadius: 8px, fontWeight: 500, fontSize: 16px. On hover, the background transitions to #0056b3 (a darker blue, 20% darker than primary) with a 0.2s ease transition. On active/focus, it darkens further to #003d7a. The button-secondary uses backgroundColor: #e6f3fe (primary-container), textColor: #0075de (primary), with identical padding and height, creating a lower-emphasis alternative for secondary actions like "Request a demo." Button-ghost uses a transparent background with a 1px solid border (#c4c7c5) and primary text color, useful for tertiary actions or navigation links. All buttons ha

Do's and Don'ts

**Do**

• Do use primary blue (#0075de) exclusively on high-priority CTAs and interactive states—it should feel rare and valuable, not ubiquitous.
• Do maintain the 24px gutter and 40px section spacing to preserve the calm, spacious rhythm that defines Notion's visual identity.
• Do apply the 0.2s ease transition to all interactive state changes (hover, focus, active) to signal responsiveness without animation fatigue.
• Do use NotionInter at 96px for hero headlines and 40px for section headlines to establish confident visual hierarchy and brand presence.
• Do apply the sm elevation shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to cards and containers to create subtle depth without visual heaviness.

**Don't**

• Don't use secondary or tertiary colors on primary CTAs—reserve #0075de for the most important user actions to maintain visual clarity and conversion focus.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—inconsistent rounding fragments the visual system and reduces brand coherence.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur effects—Notion's depth relies on pure shadow and color, not glassmorphism or heavy blur.
• Don't set font-weight values outside 400, 500, and 600—intermediate weights reduce system performance and create visual inconsistency across platforms.
• Don't reduce padding or spacing below the unit scale (8px)—the spacious layout is core to Notion's brand identity and user experience.