Design Tokens and Accessibility: Scaling UI Without Breaking Product

Most design systems fail not due to a lack of aesthetics, but due to an excess of manual freedom. When a developer has to choose between 50 shades of blue for an action button, accessibility becomes a victim of speed. This is where design tokens stop being a Figma trend and become the critical infrastructure that ensures your product is usable by everyone, from Medellín to Sydney.

The Anatomy of a Token: From Raw Values to Semantic Decisions

A common mistake is confusing Sass or CSS variables with design tokens. If you define $blue-500: #007bff;, you have a variable. If you define action.primary.background: $blue-500;, you have a token. The difference lies in intent.

Tokens act as the "single source of truth" that translates the designer's language into the engineer's code. In large-scale systems, we structure tokens into three levels:

• Global Tokens (Primitives): The base palette, typographic scales, and spacing (e.g., color.palette.blue.60).
• Semantic Tokens: Define the use or purpose (e.g., color.background.interactive.active). This is where accessibility logic lives.
• Component Tokens: Specific to unique elements (e.g., button.primary.shadow).

Why Semantics Save Contrast?

By using semantic tokens, you can apply contrast audits (WCAG 2.1/2.2) at the architectural level. If the token text.on-interactive must always contrast with surface.interactive, any brand changes are automatically validated before reaching production.

Automating WCAG Accessibility with Style Dictionary

Manually configuring tokens across multiple platforms (iOS, Android, Web) is a recipe for disaster. Tools like Style Dictionary (by Amazon) allow you to transform design JSON files into production-ready assets.

{
  "color": {
    "font": {
      "primary": { "value": "{color.base.grey.900.value}" },
      "secondary": { "value": "{color.base.grey.600.value}" }
    }
  }
}

Implementing this workflow allows a change in contrast regulations to be reflected across the entire product suite with a single commit. No more searching and replacing hex colors in 40 different repositories.

"A design system without tokens is just a Figma file with good intentions; a system with tokens is a programmable competitive advantage."

Migration Strategies: The "Progressive Tokenization" Approach

Don't try to tokenize your entire product at once. Design technical debt is real. We recommend this priority order based on accessibility impact:

1. Color Contrast: Ensure text and background tokens meet the 4.5:1 ratio.
2. Font Scaling: Use rem-based tokens to respect user browser preferences.
3. Target Size: Define spacing tokens that guarantee touch areas of at least 44x44px.
4. Color Modes (Dark/Light): Facilitate readability for users with light sensitivity.

Essential Tools for the Token Ecosystem

To build a solid infrastructure in 2025, the recommended stack includes:

• Tokens Studio for Figma: To manage complex tokens directly on the design canvas.
• Amazon Style Dictionary: For multi-format compilation and export.
• Stylelint-A11y: To verify that tokens are used correctly in CSS.
• Storybook: To document how tokens affect components in real-time.

How we approach it at Julsmind SAS

At Julsmind SAS, we don't treat accessibility as a final checklist, but as a variable in our code. We help global companies and growing startups build robust design systems from Medellín, integrating automated accessibility audits into the CI/CD pipeline. Our approach ensures that expanding to new markets or rebranding does not compromise user experience or legal compliance.

Is your design system ready to scale without leaving anyone behind? If you need to modernize your UI architecture or audit your current product's accessibility, let's talk. Contact us today for a technical consultation.