---
name: "Notion-inspired website style"
source: "Independent analysis of Notion's publicly observable visual patterns"
tokens:
  colors:
  canvas:
    value: "#FFFFFF"
    purpose: "Primary document surface"
  warm-surface:
    value: "#F7F6F3"
    purpose: "Secondary sections and callouts"
  ink:
    value: "#191919"
    purpose: "Headlines, copy, and outlines"
  muted:
    value: "#787774"
    purpose: "Metadata and supporting text"
  accent:
    value: "#E16259"
    purpose: "Small editorial highlights"
---

# Notion-inspired website style

## Overview

This system treats the page like a clear, friendly working document: warm paper surfaces, dark ink, direct labels, light borders, and small controlled color accents. Personality comes from typography and illustration space rather than gloss.

This file is an independent starting point for visual inspiration. It does not copy source content, page structure, components, or proprietary assets, and it is not affiliated with or endorsed by Notion.

## Colors

- **canvas:** #FFFFFF — Primary document surface
- **warm-surface:** #F7F6F3 — Secondary sections and callouts
- **ink:** #191919 — Headlines, copy, and outlines
- **muted:** #787774 — Metadata and supporting text
- **accent:** #E16259 — Small editorial highlights

## Typography

- **Display:** Georgia, "Times New Roman", serif. Use selectively for warm editorial statements, not interface labels
- **Body:** ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif. Prioritize clear document reading with a relaxed line height
- **Utility:** ui-monospace, "SFMono-Regular", Consolas, monospace. Use sparingly for commands, token values, and file names

## Layout and spacing

- **Content measure:** 708px for document reading; 1080–1200px for marketing sections
- **Spacing rhythm:** 4px base with 16, 24, 40, 64, and 96px intervals
- **Grid:** Document column nested inside broad, simple marketing bands
- **Corners:** 4–8px for controls and cards; avoid oversized soft capsules

## Elevation and depth

- Prefer hierarchy created by spacing, scale, and contrast over decorative shadows.
- Use borders or subtle surface changes only when they clarify grouping.

## Shapes

4–8px for controls and cards; avoid oversized soft capsules

## Motion

- Keep transitions quick and functional, generally 120–220ms.
- Use hover and disclosure motion to explain state changes.
- Avoid cinematic scroll effects that fight the document metaphor.

## Components

- Apply these tokens to your own semantic components.
- Preserve your product's content hierarchy, accessibility, and interaction model.
- Treat the source style as a constraint system, not a page template.

## Do

- Use borders and warm fills to organize information like a document.
- Keep headings direct and pair them with useful examples.
- Use accent tints in small doses for tags, highlights, and illustrations.
- Prefer compact controls and visible hierarchy over floating glass surfaces.

## Do not

- Do not copy Notion illustrations, logos, copy, or page structure.
- Do not turn every block into a rounded SaaS card.
- Do not mix many display typefaces or loud gradients.
- Do not use decorative motion where a simple state change is clearer.