Generate a palette

A theme needs dozens of related colors — shades of each brand color for backgrounds, borders, text, and states, in both light and dark mode. A palette is that full set of shades. Rather than hand-pick every one, you name a few seed colors and generate the rest, so the shades stay consistent and keep enough contrast to read.

You write a short config naming each color family and its seed, then run theme palette generate. It expands each seed into a full light and dark ramp — the scale of shades — and writes the result into the theme folder, where your theme tokens point at it (see astryx docs cli/integrations/building-blocks/themes/define-the-theme). Keep the config and the generated palette together in that folder.

The smallest config is one color family: an id to name it and a seed color to grow it from. Save it as themes/ocean/palette.config.json:

json
{"families": [{"id": "ocean", "seed": "#0074e2"}]}

bash
# Print the palette without writing files
npx astryx theme palette generate themes/ocean/palette.config.json
# Write the palette and its receipt
npx astryx theme palette generate themes/ocean/palette.config.json \
  --out themes/ocean/tokens/ocean.palette.ts

text
[ok] Wrote themes/ocean/tokens/ocean.palette.ts
​
[ok] Wrote themes/ocean/tokens/ocean.palette.receipt.json

The command writes two files. ocean.palette.ts is the palette your theme tokens will read: it exports black, white, and palette — a ramp of 21 shades (stops 0 to 100) for both light and dark. The .receipt.json beside it records the exact seeds and settings, so you can regenerate the same palette later. A second run leaves both files alone unless you pass --overwrite.

Add --preview <file>.html to also get a web page showing every shade, so you can eyeball the palette in a browser. Write it outside themes/ so it does not ship in your package. The full list of config fields and options is in astryx docs cli/commands/theme-palette-generate.