Colour palette

@summonware/ui · color-palette · P0 · Core UI

Usage

Every semantic colour token with the role it plays. Interaction states — hover, active, subtle, ring — are not listed because they are not stored: they are derived in CSS with `color-mix()` at render time, so any brand colour works without a colour library and a live recolour only has to swap one base value.
import { ColorPaletteSpecimen } from '@summonware/ui';

Best practices

DoReference tokens by role, not by appearance. `--sw-danger` survives a rebrand; a hardcoded red does not.
DoCheck contrast after changing `text` or `background`. Nothing in the derivation enforces it.
Don'tDerive a dark palette by algorithmically darkening the light one — it goes muddy. Dark mode swaps a designed neutral ramp and keeps the brand hues.
Don'tAssume conventional status hues. The Admindek preset genuinely uses cyan for success, green for warning and orange for danger; other presets use conventional ones.

Examples

Common configurations, variations and states.

Semantic tokens

--sw-primaryPrimary actions, active states, links
--sw-secondarySupporting actions
--sw-successPositive status
--sw-warningCaution status
--sw-dangerErrors, destructive actions
--sw-bgApp canvas
--sw-surfaceCards and panels
--sw-surface-2Recessed areas
--sw-textBody copy
--sw-headingHeadings
--sw-borderDividers and outlines
--sw-sidebar-bgNavigation chrome
The twelve tokens a brand supplies, each with the job it does. This is the only place in the repo mapping a token to prose.

Reference variants

2 of 2 labels from the reference are demonstrated above.
Background ColorText Color