Independent visual study / 02

A document-first system that still feels human.

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.

Download file

Independent analysis of publicly observable visual patterns. Not affiliated with or endorsed by Notion.

DESIGN / DOCUMENTPublic study

Working style 02

Make the system readable.

Warm paper, direct labels, compact controls, and enough space for ideas to breathe.

canvas

warm-surface

ink

muted

accent

Token inventory

The visible system, named.

Values are a practical starting point, not a claim about Notion's private source files. Adapt and validate them against your own product.

canvas

Primary document surface

#FFFFFF

warm-surface

Secondary sections and callouts

#F7F6F3

ink

Headlines, copy, and outlines

#191919

muted

Metadata and supporting text

#787774

accent

Small editorial highlights

#E16259

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

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

Rules before resemblance

Use the logic. Leave the identity.

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 copy

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.

DESIGN.mdPreview

---
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

Analyze another public website.

Prepare the same visual-system brief for a reference relevant to your product.