design-system-conventions

Replace literal color utilities with semantic design tokens by auditing your styles to identify non-semantic classes like gray-*, then substituting them with semantic tokens and classes following the provided migration examples.

Semantic design tokens are styling variables that replace ad-hoc color utilities and non-semantic classes to ensure consistent UI visuals. You need them in frontend projects adopting a design system to reduce technical debt and maintain a cohesive design language.

Yes, this approach enforces semantic design tokens and UI styling rules across color, typography, spacing, and borders, ensuring consistent component styling and reducing technical debt across the codebase.

The best way to migrate an existing UI to use design tokens is to start by auditing your styles to identify non-tokenized typography and non-semantic color utilities, then replace them with tokens and semantic classes according to the established guidelines.

You should use semantic tokens instead of literal color utilities because they enforce consistent visuals, reduce technical debt, and support your team in maintaining a cohesive design language across apps and features.

Yes, you can apply these UI styling rules to component styling scenarios across your codebase, as the rules target frontend projects adopting a design system and cover color, typography, spacing, and borders.