Grain Design system lead, 2024

One design system for four apps at Spor.

Spor had four apps built by four teams, with four kinds of buttons. I led Grain, the design system they now share, from the first audit to version 2.4.

Role: Design system lead
Team: 2 designers, 3 engineers
Time: 2024 to 2025
Platforms: iOS, Android and web

02In short

The problem: Four apps, 37 greys, and every new screen started from scratch.
What I did: An audit of 1,400 screens, the tokens, 212 components, the docs and weekly office hours.
The result: New screens ship twice as fast, and the four apps look like one company.

03The problem

Each team had copied the last screen it liked. Buttons came in 11 sizes, and every accessibility fix had to be made four times.

Designers spent their mornings redrawing parts that already existed somewhere else.

Early component sketches, before the audit of 1,400 screens told us which parts mattered.

04What we heard

We talked to every designer and engineer on the four teams, 23 people.

I spend my mornings redrawing buttons.

Designer, Spor web

We fix the same bug in four apps.

Engineer, Spor iOS

Which grey is the right grey?

Designer, Spor Android

Start from what ships.Components built for a real screen got used right away.

Name things by job.“Ink” and “Line” beat “Grey 700” in every review.

Office hours, not rules.An hour a week answered more than a hundred pages of docs.

05The decision

Build the whole library first, or start from the screens teams ship this month?

A complete library, then launchNeat, and six months without a single shipped screen.

Start from real screens, one team at a timeShippedEach component came from a screen shipping that month, so it was used the day it was ready.

Let each team keep its own kitNo migration, and no end to the drift.

Why: Teams adopted the components they had asked for. Grain grew from the work, not from a rule.
What it cost: The first months looked uneven, and we rewrote three early components.

06Look closer

A page of the system, with the rules behind it. Point at the dots.

07Results

By version 2.4, the four apps share 212 components, and a new screen goes from design to release in three weeks instead of six.

212components shared by the four apps

2×faster from design to release

6greys, down from 37

Before6 weeks

After3 weeks

Median time from approved design to release, per screen.

08Timeline

36 weeks from the first interview to launch.

Audit4 weeksTokens and first components8 weeksTeam by team16 weeksVersion 28 weeks

09What comes next

Open Grain to the station screens and the ticket machines, so every Spor surface speaks the same language.

Next case study

Spor case study.pdfRebooking a cancelled train in under a minute.