Station 06 · CSS & design tokens

The paint shop

Every color on this boat — the bottle green felt, the brass hairlines, the parchment ink — is mixed in one place and poured into named buckets called CSS variables. The cards do not know what color they are. They only know which bucket to drink from.

That card on the right is a real house card wired to four buckets. Swap the livery, or grab the hue slider and mix your own accent. Watch the code: only the values change. The structure never moves.

globals.css — one place to repaint

1:root {
2  --background: #163024;
3  --surface:    #1E3A2C;
4  --ink:        #EFE6CF;
5  --accent:     #C9A14E;
6}
7
8.card {
9  background: var(--surface);
10  color: var(--ink);
11  border: 1px solid var(--accent);
12}

Or mix your own accent — drag the hue

Munitions deck

Helldivers 2

Loadouts for every planet, stratagem science, squad tactics.

Draw a requisition ☞

One palette · every surface follows

What you just learned

A CSS variable is a named bucket of paint: define --accent once, dip into it everywhere with var(--accent).
Change the bucket, repaint the boat — every surface that references the variable follows automatically.
That is exactly how this site works: our green, brass, and parchment live in one file, and every card, button, and border drinks from it.
Liveries (themes) are just different values in the same buckets. Dark mode is not a redesign; it is a refill.

Next — Station 07: The choreography

Right this way…