Generative Colors
The Jellybean Bag: deterministic pseudo-random identity colors for avatar initials, tags, and category accents. Explicitly not semantic — nothing here should read as a status.
Every bean is derived in OKLCH from the $generative Sass map (a hue and a
tier), so all beans carry the same perceived weight. Six tokens per bean:
| Token | Role | Mode behaviour |
|---|---|---|
--tui-generative-{bean} |
saturated fill | fixed |
--tui-generative-{bean}-interact |
hover/active of the fill | fixed |
--tui-generative-{bean}-fg |
content on the fill | fixed |
--tui-generative-{bean}-subtle |
whisper tint | flips in dark mode |
--tui-generative-{bean}-subtle-interact |
hover of the tint | flips in dark mode |
--tui-generative-{bean}-strong |
text/border on the tint | flips in dark mode |
base/-interact/-fg are mode-independent because the bean is the
surface; the tint variants are relative to the page surface, so they flip.
Taste-test board
Beans below are discovered live from the stylesheet — tuning the
$generative map (hues, tiers, and the $generative-* lightness/chroma
constants in _tokens.scss) updates this board on reload. Hover the pills
for the -interact variants.
Visual swatches: see the interactive page. Token values are in the primitive token reference.