# Design system

Set up a design system that cut release cycles from 21 to 13 days

## Spotwork's time to market fell 38% in a year with the design system I set up

Spotwork staffs companies with contract workers. I led the rebuild of our platform as product designer and product manager.

Code with little modularity or reuse **made building and testing slow and expensive**.

With our engineers and our QA, I set up SW Curie, **a design system for all of web and part of mobile**.

## Tokens

### Give every colour, spacing value and radius a token

Colours and sizes used to be raw values. So components that behaved alike **looked different from place to place**.

I wrote colours in OKLCH, where equal lightness looks equally light in every hue. That made Active, Success, Warning and Alert **match surface, text and outline shades**.

I set sizes in rem and borders in px. So **layouts scaled with browser text size** while borders held one even pixel.

## Components

### Every screen came from components our engineers and our QA could reuse

Our UI used to be intertwined with business logic. So existing elements were **hard to reuse**.

We built each screen as **declarative UI**, stating what it showed in the named parts of compound components. Outside its own component, a part raised an error naming its owner.

We set rules so every component in code **followed the design system**. Any local override carried a written reason we could track.

## 38% faster release cycles

Building web and part of mobile from one set of tokens, components and code **cut release cycle time by 38%**, from 21 days to 13 days.

- **Role**: Product design, Design engineering, Design system management
- **Year**: 2024–25