dev-dga

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.

176 tokens

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 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]

Theme roles

The semantic tokens components actually read. Override these to re-theme a role.

Semantic colors
Text colors

Brand ramp

The active brand ramp. Retint every primary and accent at once - it follows into dark automatically.

Brand ramp (--ddga-brand-*)

Foundations

Shape, rhythm, type, and elevation.

Radius
Spacing & density
Typography
Shadow

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.

globals.css
@import '@dev-dga/css'; /* the DGA design system (index.css) - load it first */:root {  /* Change any token to generate overrides */}

Back to the quick builder