Typography and Color

Create a readable type scale and a reusable, contrast-aware color system.

Updated Aug 13, 2026Tested with Modern CSS

Typography establishes rhythm and hierarchy. Color communicates emphasis and state. Both work best as a small system rather than a collection of one-off values.

Set readable defaults

type.css

01html { font-size: 100%; }
02body {
03  font-family: Inter, system-ui, sans-serif;
04  font-size: 1rem;
05  line-height: 1.6;
06}
07h1 {
08  font-size: clamp(2.5rem, 7vw, 5rem);
09  line-height: 0.98;
10  letter-spacing: -0.05em;
11}
12p { max-width: 68ch; }

Relative units respect user settings. clamp() creates a fluid value with safe minimum and maximum sizes. A readable line length keeps paragraphs easy to track.

Create color tokens

tokens.css

01:root {
02  color-scheme: light;
03  --surface: #ffffff;
04  --ink: #211a25;
05  --muted: #6d6672;
06  --accent: #4c1c62;
07  --signal: #f46537;
08}
09
10body { background: var(--surface); color: var(--ink); }

Name tokens by role so a theme can change values without rewriting components. Never use color as the only way to communicate an error or selection.

Dark mode

theme.css

01@media (prefers-color-scheme: dark) {
02  :root { color-scheme: dark; --surface: #151217; --ink: #f2edf3; }
03}

Keep this

Use relative, fluid type; limit paragraph width; define semantic color tokens; and test contrast rather than guessing.

Your place is saved on this device.