# Notion — Design System
> Notion's quiet document system. Soft borders, generous whitespace, and serif display type for marketing surfaces.
- **Canonical:** https://uiuxskills.com/library/notion
- **Source:** https://notion.so
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:36.099Z

---

---
version: alpha
name: Notion
description: The AI-powered workspace for teams to build agents, manage projects, and centralize documentation.
tone: >-
  Professional, efficient, and empowering. The tone is direct and benefit-oriented, focusing on
  productivity and the elimination of tool fragmentation.
color-scheme: light
colors:
  primary: "#097FE8"
  surface: "#FFFFFF"
  on-surface: "#000000"
  surface-container: "#F4F4F4"
  outline: "#E0E0E0"
  error: "#F64932"
  success: "#1AAE39"
  warning: "#FFB110"
  on-primary: "#FFFFFF"
  focus-ring: "#097FE8"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 24px
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 20px
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 16px
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    width: auto
  button-primary-hover:
    backgroundColor: "#076BC4"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#076BC4"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FEECEB"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Notion is a clean, modular workspace that emphasizes flexibility and structured content. Its visual identity is defined by a minimalist, high-contrast aesthetic that prioritizes readability and functional clarity, making it a staple for modern productivity-focused teams.

## Colors

The color strategy focuses on high-contrast, neutral surfaces to ensure content remains the primary focus, using a specific blue for interactive elements.

*   Primary (#097FE8): Used for primary CTAs and active states.
*   Surface (#FFFFFF): Base background color for the workspace.
*   On-Surface (#000000): Primary text color for high contrast against white surfaces.
*   Surface-Container (inferred) (#F4F4F4): Used for secondary backgrounds and card containers.
*   Outline (inferred) (#E0E0E0): Used for subtle borders and dividers.
*   Error (#F64932): Semantic color for errors or destructive actions.
*   Success (#1AAE39): Semantic color for success states.
*   Warning (#FFB110): Semantic color for warnings.
*   On-Primary (inferred) (#FFFFFF): Text color for primary buttons.
*   Focus-Ring (inferred) (#097FE8): Focus indicator for interactive elements.

## Typography

Typography is built on the Inter typeface, utilizing a clear hierarchy to distinguish between structural headers and dense information.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for section headers.
*   Headline-lg (inferred): Used for sub-headers.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard body text.
*   Label-sm (inferred): Used for small labels and metadata.

## Layout

Notion uses a modular grid system that relies heavily on whitespace to separate content blocks. The layout is responsive, with content blocks stacking vertically on mobile devices and expanding into multi-column bento-style grids on larger viewports. The page pattern follows a strict order: nav, hero, logo-wall, features, use-cases, pricing, social-proof, and footer. Maintain generous padding using {spacing.xl} between major sections and {spacing.md} or higher for internal whitespace.

## Elevation & Depth

Depth is used sparingly, primarily to distinguish interactive cards from the background. Subtle single-layer shadows are applied across three levels to create a sense of layering.

*   elevation.sm: Subtle card lift for secondary elements.
*   elevation.md: Standard lift for interactive cards and bento-grid items.
*   elevation.lg: Used for modal or drawer overlays to separate them from the main viewport.

## Shapes

The design system favors a clean, slightly rounded aesthetic. Cards and buttons typically use a moderate border-radius of {rounded.md} (8px) to feel approachable without appearing overly playful. Avoid mixing multiple radius values on the same component to maintain a consistent, professional look.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {colors.primary} for primary actions and {colors.surface-container} for secondary actions. They feature a consistent {rounded.md} shape and clear hover states, such as the darker shade defined in {button-primary-hover}.

### Card
Cards are the fundamental unit of the bento-grid layout, featuring a {colors.surface} background and {colors.outline} border. Use {elevation.md} to lift cards from the background and apply {rounded.md} to all corners.

### Badge
Badges are used for status labeling, utilizing {typography.label-sm} and {rounded.sm}. They are color-coded using semantic tokens like {badge-success} or {badge-error} to provide immediate visual context.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary call-to-action buttons. | Use {colors.primary} for non-interactive text. |
| Apply {rounded.md} to all card components for consistency. | Mix multiple border-radius values on the same component. |
| Use {colors.outline} for subtle dividers between content sections. | Use high-contrast borders that distract from content. |
| Maintain generous padding using {spacing.xl} between major sections. | Clutter the layout; avoid spacing below {spacing.md}. |
| Use {typography.display-lg} for main hero headlines only. | Use {typography.body-md} for primary page headings. |
| Ensure all interactive elements have a clear {colors.focus-ring} state. | Remove focus indicators for keyboard accessibility. |
| Use {colors.error} only for destructive actions. | Use {colors.error} for non-destructive status indicators. |
| Use {typography.label-sm} for metadata and small badges. | Use large display fonts for secondary metadata. |

## Content Style

CTA labels use imperative verbs in sentence case, such as "Learn more" or "Try it," focusing on direct, action-oriented outcomes.

Headings are phrased as concrete benefit statements, emphasizing productivity and the elimination of tool fragmentation to appeal to professional users.

Copy density is kept low through the use of short, scannable paragraphs and frequent bullet points. Whitespace is prioritized to ensure the content remains readable and modular.

## Imagery & Icons

The imagery style is mixed, combining clean, flat-style vector icons with high-fidelity product screenshots. Icons should be simple and colorful, while product imagery is presented in a layered, bento-grid style to demonstrate tool integration. Logo lockups should remain monochromatic or follow the brand's specific white-label guidelines to maintain a professional, cohesive appearance.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Notion, a minimal, professional workspace brand. Match its restrained, high-contrast, content-first tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.xl}` — never hardcode hex values, px sizes, or font families.
2. Respect only the component variants listed under `components:`. Do not invent additional button styles, badge types, or card variants the spec does not define.
3. Follow the Layout section for page order (nav → hero → logo-wall → features → use-cases → pricing → social-proof → footer), spacing rhythm (`{spacing.xl}` between major sections), and responsive stacking behavior.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) exists, those values take precedence.

## Output contract

**Must:**
- Use token names for every color, radius, spacing, elevation, and typography value.
- Include hover, focus, and disabled states for any interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.md}` to cards and buttons; `{rounded.sm}` to inputs and badges.
- Use `{colors.focus-ring}` as a visible focus indicator on all interactive elements.
- Match CTA copy style: imperative verbs, sentence case, per the Content Style section.

**Must NOT:**
- Introduce colors, fonts, radii, or spacing values absent from the spec.
- Use generic utility defaults (e.g., `text-gray-500`, `rounded-md`) when a named token exists.
- Apply `{colors.primary}` to non-interactive text, or `{colors.error}` to non-destructive states.
- Add emoji, filler, or marketing copy.
- Rewrite page copy, button labels, headings, or navigation items.
- Alter page section order or information architecture as a side effect of applying tokens.

## When in doubt
- If a value is unspecified, ask the user rather than inventing a token.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`.
- For unspecified breakpoints, use mobile-first with one breakpoint at 768px, stacking columns vertically below it.
- When torn between two visual options, choose the one with greater whitespace and less visual noise — Notion skews minimal.