One library for four product teams

Harbor Bank had four teams shipping four versions of the same button. We built the token set and component library they now share.

Design systems

Harbor 1
01

Harbor Bank is a community bank with four product teams and, when we arrived, four slightly different design languages. We audited three hundred screens, agreed a token set for color, type, spacing and radius, and built a component library of one hundred and forty-two components with documented variants and states.

A migration plan moved the online banking and the mobile app onto the system screen by screen. Four teams now build from one library, and the design review backlog cleared within a quarter.

Harbor 2
02 A card component and its variants
Harbor 3
03 Online banking built from the system
Harbor 4
04 Mobile banking screens on the same system