Building Web design Library

1:1 token mapping between Figma and code with built-in accessibility checks

Title

Tokenized design library

Connecto

Tools

Figma, StoryBook

Telecom

Date

2023

2023

About

As the product scaled, inconsistencies between design and development became more visible. UI elements lacked uniformity, spacing and typography varied across screens, and components behaved differently depending on implementation.

Design tokens existed, but they were not structured in a way that could be directly used in code. This created a gap where developers had to interpret design decisions instead of implementing them directly.

At the same time, accessibility checks were happening late in the process, making them harder to fix and easy to miss.

The problem was not just visual inconsistency. It was the absence of a shared system between design and development.

01

The Challenge

The system faced multiple challenges

  • Inconsistent visuals across components, including spacing, hierarchy, and icon usage.

  • Lack of a clear structure to guide new features.

  • No unified naming system for tokens across design and code.

  • Increased dependency on manual interpretation during development.

  • Accessibility issues identified late in the workflow.

  • These gaps made the system difficult to scale and maintain.

02

Design Vision

The goal was to create a system that feels predictable, scalable, and easy to use across both design and development.

The system focuses on clarity in structure, consistency in implementation, and reducing the need for interpretation.

Every design decision should be directly usable in code, making the experience seamless for both designers and developers.

03

Token Architecture

Token
Architecture

Primitive Tokens

Neutral

Navy

Red

The system starts with primitive tokens, which represent raw values such as colors, spacing, and typography.

These tokens act as the foundation and are not tied to any specific use case. They define the visual base of the system and ensure consistency at a fundamental level.

Semantic Tokens

Bg body

Light and Dark mode

Text Default

Light and Dark mode

Text Link

Light and Dark mode

Critical Status

Light and Dark mode

Semantic tokens are built on top of primitive tokens and define how values are used within the interface.

Instead of referring to raw values, tokens are named based on their purpose, such as text, background, or border.

This allows designers and developers to use tokens based on intent rather than appearance, making the system easier to understand and maintain.

1:1 Token Mapping

Figma

VS Code

To eliminate ambiguity, the same token names are used across both design and code without any modification.

A token defined in Figma is directly used in development, ensuring a one to one mapping between design decisions and implementation.

This removes the need for interpretation, reduces errors, and ensures that changes at the token level are reflected consistently across the product.

04

Accessibility Check

Accessibility is integrated into the component workflow using Storybook.

Each component is tested during development for color contrast and semantic structure using accessibility tools.

This helps identify and fix issues early instead of during QA.

Accessibility issues are caught during development, not after release

05

Design Components

Design
Components

06

Brining it all together

01

The Challenge

The system faced multiple challenges

  • Inconsistent visuals across components, including spacing, hierarchy, and icon usage.

  • Lack of a clear structure to guide new features.

  • No unified naming system for tokens across design and code.

  • Increased dependency on manual interpretation during development.

  • Accessibility issues identified late in the workflow.

  • These gaps made the system difficult to scale and maintain.

02

Design Vision

The goal was to create a system that feels predictable, scalable, and easy to use across both design and development.

The system focuses on clarity in structure, consistency in implementation, and reducing the need for interpretation.

Every design decision should be directly usable in code, making the experience seamless for both designers and developers.

Projects

Explore more like this one

Selected projects that reflect my approach to design, development, and execution.

View All Projects

View All Projects

Ai Agent

/

2025

Incident Workflows

/

2023