normalize

To align UI components with a design system during a refactor, use a normalization plan to replace deviating typography, color, and spacing with matching design tokens and substitute custom UI with standard components.

Design system tokenization is the process of replacing hardcoded styling values with centralized variables for typography, color, and spacing. You need it during UI audits or refactors to establish consistent styling across features.

To ensure accessibility and responsiveness when normalizing UI design, validate contrast ratios, implement focus states, and check responsive behavior against the design system guidelines after swapping components.

Yes, you can use design system normalization for new component implementations. It aligns new features with established aesthetics by applying design tokens and standard patterns from the design system documentation.

To start replacing custom UI with design system components, you need access to design system documentation, tokens, guidelines, and the codebase to implement token swaps and validate the resulting styling.

Your UI feature deviates from design system standards due to hardcoded styles instead of tokens, custom UI instead of standard components, and unvalidated responsive behavior, requiring a normalization plan to correct.