Theme studio
Full control over every token.
Every design-system token, editable live and organised the way theming actually works: roles read the brand ramp, the brand ramp reads the raw scales. Adjust a value and the preview re-tones instantly - the same --ddga-* variables your app reads. Copy only what you changed.
How much control? All of it.
- Pick a scale step for any role, or choose Custom for an exact color.
- Every token here is a plain CSS variable. Override any of them, even ones not listed, straight from your own CSS or from a Tailwind arbitrary property. For the Tailwind setup, see Styling with Tailwind:
- Brand-ramp and scale edits re-tone light and dark together; a role edit exports a dark block so you can tune dark on its own.
[--ddga-color-primary:#7c3aed]One color fills all 12 brand steps the way DgaProvider does in 1.6.0. The color becomes step 600, and the other steps mix it with white or black in oklab. Fine-tune any step below.
Theme roles
The semantic tokens components actually read. Override these to re-theme a role.
Brand ramp
The active brand ramp. Retint every primary and accent at once - it follows into dark automatically.
Foundations
Shape, rhythm, type, and elevation.
Primitive scales
Raw palette steps. The roles and brand ramp above alias these - edit a step to reshape a whole ramp.
Your overrides
Paste into a CSS file loaded after @dev-dga/css. Brand-ramp and scale overrides re-tone light and dark together; a role override (--ddga-color-* / --ddga-text-*) applies to both modes unless you give it a [data-theme="dark"] value - the studio adds that block for you when you edit a role.