Notion

Overview

Notion is a unified workspace platform designed for teams to collaborate, automate, and make sense of complex information through AI-powered agents. The brand embodies a 'Productive Minimalism' aesthetic—clean, purposeful, and optimized for clarity. The interface prioritizes information hierarchy and task-driven workflows, using a bright, accessible color palette anchored by a vibrant cobalt blue (#0075de) that signals actionable moments. The emotional response is one of capability and calm: users feel empowered to organize chaos into systems of record, without cognitive overload.

Notion's voice is direct, practical, and human-centered. The brand speaks in active verbs and concrete outcomes: 'Capture context, find answers, automate tasks.' Vocabulary emphasizes agency ('Create,' 'Build,' 'Bring everything into one system') rather than passive consumption. The tone avoids corporate jargon; instead, it uses accessible language that acknowledges the user's real challenges. Example sentence in Notion's voice: 'Your team's knowledge lives here—searchable, shareable, always current.'

Colors

Notion's color system balances a neutral, light foundation with strategic accent colors that drive interaction and attention. The primary color, cobalt blue (#0075de), is reserved exclusively for interactive elements—buttons, links, and focus states—making it the visual anchor for 'what to do next.' This blue is supported by a light container (#e6f3fe) for secondary actions and context, ensuring hierarchy without visual noise. Secondary accent colors—warm amber (#ffb110) and coral red (#f64932)—are used sparingly for status indicators, highlights, and illustrative elements (e.g., the 'Create' badge in the hero uses a warm peach background). The surface stack is built on pure white (#ffffff) with carefully calibrated grays: surface-container (#f0f2f5) for subtle section breaks, outline (#da

Typography

Notion's type system is built on NotionInter (a custom variant of Inter) paired with system fallbacks, creating a modern, highly legible hierarchy optimized for both scanning and deep reading. The display level (96px, 600 weight, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) structures major sections; body-md (16px, 400 weight, 24px line-height) is the workhorse for product copy and descriptions. The system uses weight contrast rather than size alone to establish hierarchy—600-weight headlines pop against 400-weight body text, reducing the need for extreme size jumps. Label-md (14px, 500 weight) is applied to all interactive elements (buttons, form labels) with 0.01em tracking for precision. On small labels over busy backgrounds or in dens

Layout

Notion uses a fluid 12-column grid with a max-width of 1280px, allowing content to scale gracefully from mobile to desktop without awkward breakpoints. The page rhythm is structured around semantic spacing: lg spacing (40px) separates major sections (hero, feature blocks, testimonials), md spacing (24px) divides subsections and card groups, and sm spacing (12px) creates breathing room within components. The gutter (24px) is applied consistently to left/right margins on the container, ensuring content never touches viewport edges. White-space is treated as a design material—the hero section uses generous vertical padding (64px top/bottom) to establish breathing room and visual weight, while feature cards maintain 24px internal padding to prevent text crowding. The container-max-width of 128

Elevation & Depth

Notion's depth model is subtle and functional, avoiding heavy shadows that would contradict the clean aesthetic. The elevation system uses three levels: Level 1 (Base) has no shadow—cards and surfaces sit flush on the white background with only a 1px solid border (#dadce0) to define edges. Level 2 (Raised/Hover) applies a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) with a 200ms ease transition, used when cards are hovered or when a modal is about to appear—this creates a subtle lift without drama. Level 3 (Floating/Modal) uses a stronger shadow (0 8px 24px rgba(0, 0, 0, 0.12)) for modals, drop

Shapes

Notion employs 'Functional Softness'—a shape philosophy that balances approachability with precision. Border-radius values are modest and consistent: 8px (DEFAULT) is used on buttons, inputs, and small interactive elements, creating a friendly but professional appearance; 12px (md) is applied to cards and larger containers, softening edges without appearing playful; 20px (xl) is reserved for special highlight elements (like the peach 'Create' badge in the hero) that need visual distinction. The reasoning: 8px feels modern and accessible without the extreme roundness of 16px+, which can read as

Components

Action Elements Buttons are the primary interaction surface. The button-primary component uses {colors.primary} (#0075de) with white text, 8px border-radius, 40px height, and 6px 15px padding—this creates a compact but tappable target. On hover, the background shifts to #0055a8 (a 20% darker blue) with a 0.2s ease transition, providing clear feedback without animation lag. The button-secondary variant uses {colors.primary-container} (#e6f3fe) with primary text color for lower-priority actions, maintaining visual hierarchy. Button-ghost is transparent with a 1px transparent border that becomes visible on hover (background shifts to {colors.surface-container-high}), useful for tertiary actions in dense layouts.

Containers & Surfaces Cards are the fundamental container unit. The card

Do's and Don'ts

**Do**

• Do use primary blue (#0075de) exclusively on interactive elements—buttons, links, focus states—to create a clear visual call-to-action hierarchy.
• Do maintain 24px padding inside cards and 40px vertical spacing between major sections to preserve the clean, breathing aesthetic.
• Do apply 0.2s ease transitions on all hover/focus state changes to feel responsive without appearing laggy or over-animated.
• Do use 600-weight typography for headlines and 500-weight for labels to establish hierarchy through weight contrast rather than extreme size jumps.
• Do keep border-radius at 8px for buttons and 12px for cards—this softness signals approachability while maintaining professionalism.

**Don't**

• Don't use shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—deeper shadows contradict the light, airy aesthetic and make the interface feel heavy.
• Don't apply primary blue to non-interactive elements or backgrounds; reserve it for CTAs, links, and focus states so it retains its signal power.
• Don't use border-radius values above 20px on standard components; extreme roundness (24px+) reads as playful rather than professional in a productivity tool.
• Don't mix multiple accent colors (secondary amber + tertiary coral) in a single section; use them sparingly and intentionally to avoid visual chaos.
• Don't reduce line-height below 1.5x font size on body text; the generous 24px line-height on 16px text is essential for readability and cognitive comfort.