Generating Utility Classes from Design Tokens using Style Dictionary

"This article shows a practical pattern for generating utility classes in CSS I've used in one form or another since 2016. Utility classes can give us a fast, consistent way to apply design system values in markup, without sprinkling hard‑coded styles across your project. As I discussed in my article on Creating Design System Friendly Snowflakes with Utility Classes, utility classes can really help offer a middle ground between rigid components and completely custom CSS."

"By generating utility classes directly from design tokens, we ensure that even any "one-off designs" stay consistent with our design system's values. If a design needs a specific spacing or colour that exists in our tokens, we can use a utility class rather than writing custom CSS with hard-coded values. Defining Our Design Tokens To get things going, let's define some design tokens for colour, spacing, and typography."

A practical pattern generates utility classes in CSS from design tokens to maintain consistency across projects. Utility classes provide a fast, consistent way to apply design system values in markup without sprinkling hard-coded styles across the codebase. Generating utilities directly from tokens ensures one-off designs remain aligned with system values. Use a utility class when a design needs a specific spacing or colour that exists in tokens instead of writing custom CSS with hard-coded values. Define tokens for colour, spacing, and typography. Split typography tokens into font-size.tokens, font-weight.tokens, and font-family.tokens because sizes, weights, and families change at different rates.

Read at Always Twisted