Notebook

Calm docs: warm grays, no chrome, the page is the product.

Content/notebooklight + dark

Exemplar: Notion

Studied from Notion's template and docs surfaces. Original tokens and copy; no assets copied.

Live tokens

Colors

bg
#FFFFFF

surface
#F7F6F3

surface-alt
#EFEEEA

text
#37352F

text-muted
#6E6D69

border
#E7E6E2

primary
#37352F

on-primary
#FFFFFF

accent
#1B6EBF

on-accent
#FFFFFF

Type

Directionxxxl · 2.75rem

Design systemxxl · 2.125rem

Conversion notesxl · 1.625rem

Section headinglg · 1.25rem

Body copy for the pagemd · 1rem

Supporting textsm · 0.875rem

Meta labelxs · 0.75rem

Pack recipe 0123'Geist', 'Inter', system-ui, sans-serif

Pack recipe 0123'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace

Spacing, radius, shadow

xs 0.25rem

sm 0.5rem

md 1rem

lg 1.5rem

xl 2.5rem

xxl 4rem

sm 4px

md 6px

lg 8px

Component samples

Write, plan, and organize

One workspace for notes and docs.

Task-shaped heading.

Free forever plan

No card required.

Meeting notes

Weekly sync template with decisions block

Duplicated 8,400 times

Recipe

Apply the rules, place the patterns, then tune the conversion notes against the rubric.

Rules

Keep the canvas white with warm gray panels.
Use one blue for links and inline actions only.
Left-align everything. No centered blocks.
Write headings as full statements of the task.
Show example blocks directly under each heading.

Patterns

Sidebar nav with a single content column.
Callout rows for tips and warnings under examples.
Table of contents rail that tracks scroll position.
Related-pages footer at the end of each doc.

Conversion notes

Offer the template as a one-click duplicate.
Keep the upgrade note small and factual.
Answer 'what happens to my data' in the first screen.

See this pack on your site.

Attach your URL. The audit maps your gaps to Notebook or a better-fit pack.