Design system

Colors

Palette roles, automatic shades, transparencies and the page background.

A palette in sitereal is a handful of roles, not a list of hexes. You set the role; the module generates the shades, the transparencies and the parts that read them.

The roles

Each role can be switched off; an inactive role emits nothing. base is the neutral a site's text and surfaces are built from — it is the one to get right first.

What one role emits

:root {
  --primary: #c50041;
  --primary-h: 340;
  --primary-s: 100%;
  --primary-l: 39%;
  --primary-hover: #9e0035;
  --primary-ultra-light: #ffe5ee;
  --primary-light: #ffb3cc;
  --primary-medium: #ff0055;
  --primary-dark: #80002a;
  --primary-ultra-dark: #330011;
  --primary-trans-10: rgba(197, 0, 65, 0.1);
  /* … the ramp continues to --primary-trans-90 */
}

• Hue, saturation and lightness are emitted separately, so you can build a colour of your own from a role's hue: hsl(var(--primary-h) 40% 96%).
• Shades are computed from fixed lightness stops (ultra-light 95%, light 85%, medium 50%, dark 25%, ultra-dark 10%) plus a hover offset. Any single shade can be overridden by hand without giving up the rest.
• Transparencies are the same colour at a ramp of alphas — the honest way to tint something over an image.

White and black get no shade strip (there is nowhere left for white to go but darker, which is another colour's job) but do get transparencies.

Unified lightness

Optionally, every role's shades can be forced to the same lightness stops, so --primary-light and --danger-light sit at the same brightness. It is what makes a set of badges look like a set.

The page background

The background of the page is a colour, so it is edited here, beside the palette it is picked from — not on a "site" page somewhere else. It is emitted on body, together with the running text settings from Typography.

Spending them

Anywhere a colour is asked for, the picker offers your variables and these tokens, each resolved to what it actually is. Picking one writes var(--primary), never the hex it happens to resolve to today.