HOME
Sajjad Portfolio
2026

Design System · 2024

Design System

A component library and token set for a product team who had four different blues and no agreement about any of them.

Role
Design & Development
Timeline
Ongoing · 2024
Stack
TypeScript · CSS Custom Properties · Storybook
Sections
5 chapters

01Overview

A component library and token set for a product team who had four different blues and no agreement about any of them. The work was as much about the decision record as the components.

This is sample project content. Replace it with a description of your own work.

02The approach

Previous attempts failed because the library and the design file were maintained separately. Generating both from the same source removed the argument entirely.

03Key contributions

Defined the token schema, wrote the generator, and built the first fifteen components alongside the team so they owned them.

04Walkthrough

Tokens are the single source: one file generates the CSS custom properties, the design tool variables and the documentation table, so the three can never drift apart.

05Outcome

One blue. Describe what changed on your own project here.