---
name: Notion
description: "A prime example of refined SaaS design, blending bold typography with a highly functional, clean interface."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1B1B1B"
  secondary: "#37352F"
  tertiary: "#4B7BF5"
  neutral: "#A39E98"
  bg-soft: "#F9F9F8"
  bg-quiet: "#F7F7F5"
  muted-soft: "#615959"
  line: "rgba(0, 0, 0, 0.11)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.875px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium AI-powered productivity platform that centralizes team knowledge and project management.

*A highly polished, functional enterprise tool that blends modern SaaS aesthetics with clear, intuitive UI patterns.*

## Colors

A restrained, neutral base palette anchored by white and warm grays, using a single high-chroma blue for primary actions to maintain a professional, focused environment.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1B1B1B`)** — uses `ink` token
- **Secondary text (`#37352F`)** — uses `ink-soft` token
- **Accent (`#4B7BF5`)** — uses `accent` token
- **Muted (`#A39E98`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.11)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use tight letter-spacing for large display headings.
- Maintain high contrast for body text against light backgrounds.
- Leverage varying font weights (400, 500, 700) to establish clear visual hierarchy.

## Layout

A clean, centered layout that transitions from wide content blocks on desktop to a single column on mobile, maintaining generous whitespace.

*Rhythm:* Consistent 4px grid system ensuring uniform vertical and horizontal rhythm across components.

## Elevation & Depth

- 0 1px 0 rgba(0,0,0,0.1)
- 0 1px 3px rgba(0,0,0,0.01), 0 3px 7px rgba(0,0,0,0.02), 0 7px 15px rgba(0,0,0,0.02), 0 14px 28px rgba(0,0,0,0.04), 0 23px 52px rgba(0,0,0,0.05)
- Borders: Subtle 1px borders using rgba(0,0,0,0.11) for defining containers and separating elements.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Clean, rounded buttons with solid primary blue fill and high-contrast white text, or subtle outlined/ghost variants.
- **card:** Light, elevated cards with subtle shadows and soft rounded corners for showcasing features or dashboard elements.
- **chip:** Small, pill-shaped tags used for status indicators or categorization within the UI.
- **input:** Minimalist form fields with subtle borders that focus on clarity and ease of use.
- **hero:** A massive, bold typographic statement paired with a large, detailed product screenshot.

## Do's and Don'ts

**Don't:**
- Don't use high-chroma colors for backgrounds — screenshot shows a dominant white and very light gray palette.
- Don't use decorative serif fonts — screenshot shows a clean, modern humanist-sans-serif for all primary text.
- Don't use heavy, dark borders — screenshot shows subtle, low-opacity borders to define sections.
- Don't clutter the interface with too many CTAs — screenshot shows a focused hierarchy with clear primary actions.
- Don't use complex, multi-colored gradients — screenshot shows solid, flat colors and subtle shadows for depth.
- Don't use aggressive drop shadows — screenshot shows soft, layered shadows that add subtle elevation.

---

## System Prompt (paste into AI agent)

```
Position Notion as a premium, highly refined AI productivity workspace. The design relies on a clean, neutral palette of white (#FFFFFF), warm grays (#F9F9F8, #F7F7F5), and a single high-chroma blue accent (#4B7BF5) for primary actions. Typography uses a modern humanist-sans-serif with tight tracking for display text and generous whitespace for readability. Critical constraints: avoid decorative or high-contrast colored backgrounds, maintain a single clear CTA hierarchy, and use subtle, layered shadows for depth instead of heavy borders or complex gradients.
```