Notion

Overview

Notion is a unified workspace platform that transforms how teams collaborate, create, and automate. The brand embodies a philosophy of clarity through simplicity—a clean, light-first aesthetic rooted in Architectural Minimalism, where every pixel serves function and every interaction feels intentional. The visual language prioritizes legibility and focus: a pristine white canvas (rgb(255, 255, 255)) anchors the interface, while a vibrant cobalt blue primary accent (#0075de) draws attention to actions and key moments. The emotional response is one of calm productivity: users feel in control, never overwhelmed. Notion's voice is direct, confident, and human—it speaks to teams as peers, not subjects. The tone avoids corporate jargon; instead, it uses concrete verbs (Capture, Find, Automate) and conversational phrasing. Example sentence in Notion's voice: 'Capture context, find answers, and automate tasks with AI built for your team.'

Colors

Notion's color system is built on a foundation of neutral restraint with strategic accent deployment. The surface stack uses warm grays and off-whites (surface #ffffff, surface-dim #f9f9f8, surface-container #f2f9ff) to create subtle depth without visual noise. Primary (#0075de) is the signature cobalt blue—used exclusively on call-to-action buttons, interactive states, and brand moments; it commands attention through saturation and contrast against the light background (WCAG AAA compliant at 10.5:1 contrast ratio). Secondary (#ffb110) is a warm golden-orange reserved for highlights, badges, and accent callouts—it appears sparingly to avoid visual competition. Tertiary (#1aae39) is a fresh green used for success states and positive confirmations. Error (#f64932) is a warm red-orange for de

Typography

Notion's type system is anchored in NotionInter (a custom variant of Inter) paired with system fallbacks, creating a modern, accessible reading experience. The display level (96px, 600 weight, -0.02em tracking) is reserved for hero headlines and makes an immediate visual impact; headline-lg (40px, 600 weight) is used for section titles and major content divisions; headline-md (28px, 600 weight) steps down for subsections. Body text uses a consistent 16px base (body-md, 400 weight, 24px line-height) to ensure comfortable reading at any screen size; body-lg (18px) is deployed for introductory copy and emphasis. Label-md (16px, 500 weight) is the workhorse for buttons, form labels, and UI text—the 500 weight provides visual distinction without heaviness. All headlines use -0.01em to -0.02em n

Layout

Notion uses a fluid 12-column grid system with a maximum container width of 1280px, allowing content to breathe on large screens while maintaining focus on smaller viewports. The gutter spacing is consistently 24px (md spacing unit), creating a predictable rhythm across sections. White-space is treated as a first-class design element: the hero section uses lg spacing (40px) between the headline and supporting copy, and xl spacing (64px) between major content blocks. This generous spacing prevents cognitive overload and guides the eye naturally through the page hierarchy. The layout philosophy is 'content-first minimalism'—every section is given room to exist independently, with clear visual separation via subtle background color shifts (surface-container layers) rather than heavy borders o

Elevation & Depth

Notion's elevation system is understated and functional, using soft shadows and subtle background shifts rather than dramatic depth cues. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, input fields, modals) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift that signals interactivity without visual drama. Level 3 (elevated modals, popovers, dropdowns) escalates to box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), providing clear separation from the page. Hover states on cards transition the shadow from md to lg over 0.2s, signaling respons

Shapes

Notion employs a 'Soft-Technical' shape philosophy: border-radius values are modest and consistent, avoiding both sharp corners (which feel cold) and excessive roundness (which feels playful). The DEFAULT radius is 8px, used on buttons, input fields, and standard cards—this creates a friendly, approachable feel while maintaining a professional edge. Smaller components (badges, list items) use 4px (sm) for tighter integration into the layout. Larger containers and modals use 12px (lg) or 16px (xl) to signal importance and create visual hierarchy. The full radius (9999px) is reserved for pill-sh

Components

Action Elements Buttons are the primary interaction mechanism and use consistent sizing and spacing. The primary button (button-primary) has backgroundColor: rgb(0, 117, 222), textColor: rgb(255, 255, 255), padding: 6px 15px, height: 40px, border-radius: 8px, and fontWeight: 500. On hover, the background shifts to #0056b3 (a 20% darkening) over a 0.2s transition, providing clear feedback without jarring color shifts. The secondary button (button-secondary) uses backgroundColor: rgb(230, 243, 254) with textColor: rgb(0, 117, 222), maintaining the same dimensions but signaling a lower-priority action. Ghost buttons (button-ghost) have transparent backgrounds with a 1px transparent border; on hover, they gain backgroundColor: rgb(242, 249, 255) to indicate interactivity. All buttons use l

Do's and Don'ts

**Do**

• Do use the primary blue (#0075de) exclusively on CTAs and interactive elements—it's the brand's signature accent and loses impact if overused.
• Do maintain generous white-space (lg/xl spacing) between major content sections to create visual breathing room and guide user focus.
• Do apply the 8px border-radius consistently across buttons and cards to maintain the soft-technical aesthetic.
• Do use the secondary orange (#ffb110) sparingly for highlights and badges—it's a supporting accent, not a primary color.
• Do ensure all text meets WCAG AAA contrast ratios (10.5:1 for body text on white, 7:1 minimum for UI text).
• Do transition hover states over 0.2s to provide smooth, responsive feedback without jarring color shifts.

**Don't**

• Don't use dark overlays or heavy shadows (>0.2 opacity) on the interface—Notion's aesthetic is light and minimal.
• Don't apply border-radius values outside the defined scale (sm/DEFAULT/md/lg/xl/full)—consistency is key to the system.
• Don't mix typefaces; NotionInter is the primary font family with system fallbacks—avoid introducing serif or display fonts.
• Don't use the secondary or tertiary colors as primary CTAs; reserve the cobalt blue (#0075de) for the most important actions.
• Don't add visual noise via gradients, patterns, or textures—the brand relies on clean surfaces and subtle color shifts.
• Don't exceed 1280px container max-width on desktop; content should remain centered and focused, not stretched edge-to-edge.