Change one value, restyle the site
Real sites keep their colours, spacing and radii in one place. Design tokens as CSS custom properties mean the brand colour is written once and reused everywhere — and a dark theme is just a different set of values.
Tokens and base styles
:root {
--brand: #1f4e7a;
--accent: #e39b2d;
--ink: #1d2733;
--paper: #fffaf3;
--radius: 14px;
--space: 16px;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.6;
color: var(--ink);
background: var(--paper);
}
h1, h2, h3 { line-height: 1.2; color: var(--brand); }
.button {
display: inline-block;
padding: 12px 20px;
border-radius: var(--radius);
background: var(--accent);
color: #1d2733;
font-weight: 700;
text-decoration: none;
}