Following the audit, the next step was to redesign the color scales based on the identified structural gaps. New proposals were developed to ensure consistent hue progression, improved tonal regularity, and expanded tonal range across each color family.

The revised scales were constructed with accessibility criteria embedded from the outset, validating contrast performance across key use cases (text-on-color and color-on-color) and ensuring compliance with established standards.

This phase focused on creating more granular, predictable tonal ramps that could support diverse interface states while maintaining visual cohesion and scalability within the system.

Once the scales were defined and structured, the next step was to determine which tonal steps would be activated in the initial design system implementation. Rather than exposing the entire range, a curated subset of intervals was selected to support core interface use cases (e.g., surfaces, text, borders, states), ensuring clarity and reducing unnecessary complexity.

The non-activated intervals remain intentionally preserved within the primitive layer. These unused steps play a strategic role in maintaining scalability, enabling future expansion, theming flexibility, and the introduction of new semantic tokens without requiring structural refactoring.

The tonal ramps themselves remain identical across Light and Dark modes. The distinction lies in how intervals are mapped at the semantic layer. For example, the surface token in Light mode corresponds to Gray50 (#F7F7F7), while its Dark mode counterpart maps to Gray1100 (#1A1A1A). This approach ensures consistency at the primitive level while enabling contextual adaptation through semantic reassignment.

Following the audits, structural analysis, and usage mapping, the semantic token layer was defined to translate primitive values into functional application contexts.

Eight core usage categories were established, including surface, background, feedback, text (covering label and placeholder), border, and icon, each representing a distinct interaction and hierarchy role within the interface.

For every category, existing components and templates were systematically reviewed to identify real usage patterns, state variations, and contrast requirements. This ensured that semantic tokens were grounded in practical implementation needs rather than abstract definitions.

Tokens were structured to maintain parity between Light and Dark modes through mirrored semantic logic, allowing contextual adaptation without altering the underlying primitive scales.