One system, four themes.

Six values per theme. Adding a theme is six more — which is why a fifth theme is a row in a table rather than a stylesheet.

What the rest of the site actually references. Switch the theme in the header and every swatch below moves with it.

• Ground--groundThe page.
• Surface--surfaceCards, overlays, controls.
• Text--textBody and headings.
• Muted--text-mutedSecondary text and disabled labels.
• Faint--text-faintApparatus that should recede.
• Rule--ruleStructural separation.
• Hair rule--rule-hairSeparation inside one object.
• Accent--accentFigure numbers, current position, one call to action.
• Accent quiet--accent-quietSelection and hover ground.
• Available--state-availableA slot is free. Never the accent.
• Warning--state-warningSomething needs attention.
• Danger--state-dangerDestructive, or failed.

unDraw hands you one palette, baked in as hex. There are four themes here, and two of them are grounds that palette cannot sit on — so no downloaded file is served as downloaded. scripts/tokenize-illustration.mjs classifies every colour in it and rewrites it onto these, and the theme decides from then on, exactly like every other colour on this page.

• Line--illus-lineThe deepest darks — detail laid against an outline.
• Line soft--illus-line-softThe common outline. Two darks, or figures go flat.
• Fill--illus-fillThe brand shape — whatever it was downloaded in.
• Quiet fill--illus-quietA tint of the brand shape.
• Paper--illus-paperEverything that arrived white.
• Neutral--illus-neutralStructural grey.
• Neutral deep--illus-neutral-deepThe shadow side of a structural grey.
• Skin--illus-skinFigure tone. Not derivable from six seeds.
• Skin shade--illus-skin-shadeThe shadow side of a figure tone.
• Hair--illus-hairWarm darks that are not linework.

Three families with three jobs: a serif for reading, a sans for chrome, a mono for apparatus. The body is chrome, so prose opts INTO the serif rather than inheriting it — otherwise admin panels arrive set in a reading face.

Border, fill and radius each say “operable”. They are spent only on things that are — an editorial block that looks operable and is not has lied.

Editorial surfaces take a rule and whitespace and no radius at all. A card is a considered exception; only overlays float, so only overlays have a shadow.