02 · Foundations

Color

Seven tokens. That’s the whole palette. A warm cream canvas instead of pure white, a single deep-indigo accent, four warm-grey steps for text, and one warm divider tone.

The palette

Every token below is a CSS custom property in tokens.css. Use them directly, don’t hand-pick hex values in components.

#F8F7F2

Background

--background

#1A1A1A

Foreground

--foreground

#1C1856

Accent

--accent

#E0DED8

Divider

--divider

#4A4A4A

Text secondary

--text-secondary

#6B6B6B

Text muted

--text-muted

#9B9B9B

Text faint

--text-faint

Why these, and no more

I start from warm cream because pure white reads as cold on screen and harsh in print. #F8F7F2 keeps the page feeling like paper without tilting sepia.

The accent is deep indigo, confident, quiet, and nothing like the indistinct blues that dominate software. It’s used sparingly: the accent line, the cursor, a hover state, a filled CTA. Never as a background.

The four grey steps are warm, not neutral. They layer on top of the cream without introducing a new temperature. The divider tone is the only one that sits between background and text, a single thin line to mark structure.

Usage

Every page follows the same rules:

--background on every surface, the page body, cards, empty states.
--foreground for headings and primary UI text.
--text-secondary for body prose, where softer contrast reads better.
--text-muted for nav, metadata, captions.
--text-faint for labels, timestamps, quiet affordances.
--accent for the accent line, active states, filled CTAs, the cursor. Never for backgrounds or body text.
--divider for borders. Always 1px, never thicker.

Cream surface with a 1px divider and near-black text.

Layer cream on cream with a thin divider. The warmth does the work.

Pure white canvas with an indigo-tinted card.

Don’t

Pure white, accent backgrounds, or tinted surfaces. One accent, used sparingly.

In code

Drop tokens.css into a project and reference variables directly:

/* tokens.css */
:root {
  --background:     #F8F7F2;
  --foreground:     #1A1A1A;
  --accent:         #1C1856;
  --text-secondary: #4A4A4A;
  --text-muted:     #6B6B6B;
  --text-faint:     #9B9B9B;
  --divider:        #E0DED8;
}