Notion

Overview

Notion is a unified workspace platform designed for teams to collaborate, create, and automate work at scale. The design system embodies 'Productive Minimalism'—a philosophy that strips away visual noise while maintaining rich functionality and clear information hierarchy. The interface prioritizes clarity and speed: users should find answers and take action within 2–3 interactions. The brand personality is confident yet approachable, speaking in direct, action-oriented language. Example: 'Capture context, find answers, and automate tasks with AI built for your team.' The aesthetic combines a clean white canvas (rgb(255, 255, 255)) with a vibrant primary blue (rgb(0, 117, 222)) that signals interactivity and trust, supported by warm accent colors (orange #ffb110, red #f64932) for secondary actions and highlights.

Colors

The color system is anchored in a light, neutral foundation with strategic accent deployment. Primary (rgb(0, 117, 222) / #0075de) is reserved exclusively for high-priority CTAs, links, and focus states—it appears on 'Get Notion free' buttons and active navigation elements. Secondary (rgb(255, 177, 16) / #ffb110) and Tertiary (rgb(246, 73, 50) / #f64932) are used sparingly for feature highlights and status indicators, ensuring the interface remains calm and focused. The surface stack ranges from pure white (rgb(255, 255, 255)) for primary content areas to light grays (rgb(242, 249, 255) for surface-container-lowest, rgb(232, 234, 237) for surface-container-high) for subtle depth and card separation. Text hierarchy is maintained through on-surface (rgba(0, 0, 0, 0.95)) for primary content a

Typography

The type system uses NotionInter (a custom variant of Inter) paired with system fallbacks (BlinkMacSystemFont, Segoe UI) to ensure consistent rendering across platforms. Display (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) serves as the default reading size for product copy and descriptions. Label-md (14px, 500 weight, 0.01em tracking) is applied to buttons and form labels, providing visual distinction from body text. The system uses generous line-height (1.5× font size minimum) to maintain readability in dense layouts. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) on small labels (12px) placed over light backgrounds to ensure legibility without

Layout

Notion uses a 12-column fluid grid with a max-width of 1280px, allowing responsive scaling from mobile (single column) to desktop (multi-column layouts). The page rhythm is governed by the spacing scale: lg (40px) separates major sections (hero, feature blocks, footer), md (24px) creates breathing room between cards and content groups, and sm (12px) provides micro-spacing within components. The gutter (24px) is applied consistently to container padding, ensuring content never touches viewport edges. Hero sections occupy 100vh or 80vh with centered content, while feature sections use a 2–3 column grid on desktop, collapsing to single column on tablet. Container max-width (1280px) prevents line lengths from exceeding 75 characters, optimizing readability. Whitespace is treated as a design el

Elevation & Depth

Notion employs a subtle shadow system to convey depth without visual heaviness. Level 1 (Base): flat surfaces (body background rgb(255, 255, 255)) with no shadow. Level 2 (Cards/Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, dropdowns, and modals, creating a gentle lift from the base. Level 3 (Hover/Focus): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) on interactive hover states and elevated modals, signaling interactivity. Borders (1px solid rgb(218, 220, 224)) are used in tandem with shadows to define component edges without relying on shadow alone. Focus states use a 2px

Shapes

The shape philosophy is 'Geometric Clarity'—rounded corners are applied strategically to soften hard edges while maintaining a professional, tech-forward aesthetic. Buttons and primary interactive elements use lg (1rem / 16px) border-radius, creating a friendly, approachable appearance (e.g., 'Get Notion free' button with 8px radius). Cards and containers use DEFAULT (0.5rem / 8px) or md (0.75rem / 12px) radius, balancing softness with structure. Input fields use DEFAULT (8px) radius to align with form conventions. Badges and pills use full (9999px) radius for maximum softness, signaling non-c

Components

Action Elements Buttons follow a three-tier hierarchy. Primary buttons (button-primary) use rgb(0, 117, 222) background with white text, 40px height, 6px 15px padding, and 1rem border-radius. Hover state (button-primary-hover) darkens to rgb(0, 86, 179) with a 0.218s transition. Focus state adds a 2px outline in rgb(0, 99, 155) with 2px offset. Secondary buttons (button-secondary) use rgb(230, 243, 254) background with primary text, matching primary button dimensions. Ghost buttons (button-ghost) have transparent background with primary text and a 1px outline in rgb(218, 220, 224), useful for tertiary actions like 'Request a demo'. All buttons apply font-weight: 500 and label-md typography.

Containers & Surfaces Cards (card) use rgb(242, 249, 255) background, 1rem border-radius, 1

Do's and Don'ts

**Do**

• Do use primary blue (rgb(0, 117, 222)) exclusively for CTAs and high-priority interactive elements—never for decorative or background purposes.
• Do maintain 24px gutter spacing on all container edges and 40px spacing between major sections to ensure visual breathing room.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and modals; elevate to 0 8px 24px rgba(0, 0, 0, 0.12) on hover to signal interactivity.
• Do use NotionInter or Inter with system fallbacks; never substitute with serif or monospace fonts for body copy.
• Do apply 0.218s transitions to all interactive state changes (hover, focus, active) for smooth, predictable feedback.

**Don't**

• Don't use secondary colors (orange #ffb110, red #f64932) as primary CTAs—reserve them for accent highlights and status indicators only.
• Don't apply border-radius greater than 1rem (16px) to buttons or cards; maintain geometric clarity with DEFAULT (8px) or lg (16px) values.
• Don't use pure black (rgb(0, 0, 0)) for text; use on-surface (rgba(0, 0, 0, 0.95)) for primary content and on-surface-variant (rgb(95, 99, 104)) for secondary labels.
• Don't apply shadows to flat, non-interactive surfaces; reserve elevation for cards, modals, and hover states.
• Don't exceed 75 characters per line in body copy; use container max-width (1280px) and generous line-height (1.5×) to maintain readability.