Skip to content
All case studies
DesignDraftDraft · Fintech, Series A· Draft

Illustrative engagement. This write-up describes how we approach this kind of work. It is an anonymised archetype rather than a named client project — the figures are representative, not audited.

A logo, a design system, and a product that finally matches.

Brand identity and a shipped design system for a company whose product looked like three different companies had built it — because three had.

01

One visual language

Brand & product

02

Figma and code, in sync

Design tokens

03

Hours, not days

New screen build time

The challenge

Three years of contractors had left four button styles, two type scales, and a logo that fell apart under 32 pixels. Every new feature restarted the same argument about spacing, and the marketing site and the product no longer looked related to each other.

How we approached it

01

Started with the logo and type system, because a brand that fails at favicon size will fail everywhere else too.

02

Built tokens as the contract — colour, spacing, type, radius — so the product can be repainted without touching a component.

03

Shipped the system as real, accessible React components in Storybook, not a Figma library engineering would have to translate by hand.

04

Documented when to reach for each component and when not to, which is the part that decides whether a system survives its first new hire.

What shipped

Marketing and product share one visual language, and new screens are assembled from the system instead of drawn from scratch. The spacing argument stopped happening, which was the real deliverable.