02 · Foundations

Color

Seven tokens. That’s the whole palette: a white canvas, two graphite anchors, three neutral text steps, and one thin 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.

#FFFFFF

Background

--background

#27272A

Foreground

--foreground

#18181B

Accent

--accent

#E4E4E7

Divider

--divider

#626366

Text secondary

--text-secondary

#71717A

Text muted

--text-muted

#8E8F92

Text faint

--text-faint

Why these, and no more

The system starts with white. It gives typography, black-and-white imagery, and real project wordmarks a neutral surface without adding a mood of its own.

Text primary at #27272A carries headings and the name treatment. Accent at #18181B is a slightly deeper graphite for text-link actions, focus, and the short title rule. It is emphasis without introducing another hue.

The secondary, muted, and faint steps create hierarchy without tinting the page. The divider stays quiet at #E4E4E7; structure comes from a 1px line and whitespace, not from background panels.

Usage

Every page follows the same rules:

--background on the page and card surfaces.
--foreground for headings and primary UI text.
--text-secondary for body prose, where softer contrast reads better.
--text-muted for navigation and supporting labels.
--text-faint for small editorial metadata and quiet affordances; do not use it for essential body copy.
--accent for text-link actions, focus, the title rule, and the cursor. Do not turn it into a large background.
--divider for borders. Always 1px, never thicker.

White surface with a 1px divider and text-primary copy.

Use

Keep the surface white. Let type, spacing, and a thin divider establish hierarchy.

A tinted panel introduces a surface the system does not need.

Avoid

Tinted panels, colored accents, and decorative backgrounds. The palette stays monochrome.

In code

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

/* tokens.css */
:root {
  --background:     #FFFFFF;
  --foreground:     #27272A;
  --accent:         #18181B;
  --text-secondary: #626366;
  --text-muted:     #71717A;
  --text-faint:     #8E8F92;
  --divider:        #E4E4E7;
}