# 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](https://storybook-tangible-ui.pages.dev/?path=/docs/tokens-generative-colors--docs). Token values are in [the primitive token reference](https://storybook-tangible-ui.pages.dev/docs/reference-primitive-tokens.md).

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/tokens-generative-colors--docs