One design system for six product teams

The problem

Freightline grew from one product to six in three years, and every team built its own interface along the way. An audit found 4 button libraries, 11 date pickers and 57 slightly different greys. Shippers moving between the booking tool and the tracking app felt like they had changed companies.

Engineering felt it too. A simple form took a week, because every team started from scratch.

Approach

Rather than design a system in isolation and hand it over, I set Atlas up as an internal product with its own roadmap, users and support channel.

• Audited 300 screens across the six products and ranked components by how often teams rebuilt them.
• Defined a three-tier token architecture, from raw values to semantic roles to component settings, so themes and dark mode came almost for free.
• Built the first 40 components with one engineer from each team, so every team had a stake in the result.
• Wrote a contribution model that lets any team propose a component, with a weekly review instead of a gatekeeper.

Design

Every component in Atlas ships with its states, its accessibility notes and its content guidelines on the same page. Designers pull it from the Figma library and engineers from the code package, both generated from the same tokens, so a change to a colour or a corner radius lands in both places at once.

“For the first time, the Figma file and the product actually agree with each other.”

Outcome

Six months after launch, 92% of product screens ran on Atlas. Teams built new screens 38% faster, and the accessibility issues reported by customers fell by more than half. Atlas now has 140 components, a monthly release and contributors from every product team.