design-tokens-gen

Define tokens in W3C DTCG format as a JSON source of truth, then translate each token into a CSS variable inside the Tailwind v4 @theme block. Namespaces like --color-*, --text-*, --radius-*, and --shadow-* automatically become utility classes and CSS variables.

DTCG is the W3C Design Tokens Community Group draft format where each token is an object with $value, $type (color, dimension, fontFamily, shadow), and $description. Tokens are grouped semantically and support aliasing, such as color.text.default referencing {color.neutral.900}.

No. Tailwind v4 uses a CSS-first approach where the @theme block in your entry CSS file defines design tokens as CSS variables. Each variable automatically generates corresponding utility classes, replacing the JavaScript config file.

OKLCH provides perceptually uniform luminance, making it straightforward to build consistent color scales and tinted neutrals with chroma between 0.005 and 0.01. It also avoids pure #000 and #fff, which produce harsh contrast in real interfaces.

Measure the actual contrast of each text/background token pair rather than presuming it. Normal text requires at least 4.5:1 and large text or icons at least 3:1, with the measured values recorded as evidence in the delivery checklist.

Do not generate tokens without an aesthetic strategy covering color approach, light or dark scene, and audience. Generating generic tokens like blue-500 defaults produces interchangeable output, so the design direction must be decided or explicitly delegated first.