REVERSE-ENGINEERING A DESIGN SYSTEM FROM A LIVE PRODUCT

Beatstars is a marketplace where producers sell beats, and like a lot of products that grow fast, its UI had outrun its documentation. There was no style guide, no component library, nothing a new designer or engineer could open to understand why a button looks the way it does. Just years of decisions baked into the live site.

Two weeks wasn't enough to fix that, but it was enough to document it properly — which is arguably the more useful deliverable anyway, since you can't fix inconsistency you haven't mapped.

Learning the site before touching it

I spent the first few days just using Beatstars the way a customer would, then going back through it screen by screen with a much more annoying eye: which button styles actually repeat, which ones are one-offs, where the type scale drifts, where two components are doing the same job with slightly different padding. That inventory is tedious but it's the part that actually matters — guessing at a system without it just produces another inconsistent one.

The patterns were the usual growing-product symptoms: three fonts where there should be two, a colour palette that had crept past what the brand probably intended, buttons that were functionally identical but visually not.

Building the reference

The output was a system built around five foundations — colour, type, icons, photography, and voice/tone — and five core components: buttons, tags, cards, badges, and controls. Each one documented with the variants that already existed in production, not invented from scratch, so it would actually match what engineering had already shipped rather than asking them to redo work.

The point of a document like this is that a developer or designer can open it and know exactly which button to use where, instead of eyeballing the closest existing example and copying its inconsistencies forward.

The full design system is on Figma — happy to walk through how the components map to the live site.

What this one taught me

Mostly that a design system is worth almost nothing if it doesn't reflect the product as it actually ships — the temptation to "clean it up" while documenting it is strong, and mostly wrong. Two weeks was tight for a site this size, which forced some useful triage on what actually needed documenting first.