Arbor

A design system for a fintech with four product teams and one very tired lead engineer.

Client
A Series C fintech, under NDA
Role
Design systems lead
Platform
Figma library, React and SwiftUI
Year
2024
Outcome
Screens shipped 2.4x faster
Arbor 01
Fig. 01

Problem

Four squads, three button styles, two shades of the brand blue, and a lead engineer rebuilding the same date picker for the third time. Nobody had time to build a system, which is usually why one is needed.

Approach

I started from the screens that already shipped, not from a blank library: the twenty most used components, their real states, and a token set that mapped one to one onto the code. Every component page documents the decision, not just the anatomy. Dark mode was a token mapping, not a second library.

Outcome

New screens ship 2.4 times faster by the team's own measure, and the date picker has been built once.

Fig. 02 Arbor / Color tokens
Fig. 03 Arbor / Account screen
Fig. 04 Arbor / Type scale
Fig. 05 Arbor / Icons
Fig. 06 Arbor / Table states
Fig. 07 Arbor / Form components
Fig. 08 Arbor / Grid and spacing
Fig. 09 Arbor / Dark mode mapping
Fig. 10 Arbor / Bottom sheet