Launching soon — 2026
Bad Brain
A brand system, built into a site
- Role
- Front-end engineering and interaction design
- Built with
- Next.js 15, React 19, TypeScript, CSS-native animations
From guidelines to interface
Bad Brain arrived with a proper brand system already done — two typefaces, five colours, image frames, halftones, a folder of motion references. What a document like that gives you is the brand standing still. It has nothing to say about hover, or what happens halfway down a scroll, or how any of it holds together on a phone with two bars of signal.
Filling in those gaps was the job. Keep what the document pins down, make the call on everything it doesn't, and don't sand off the bits that made it recognisable in the first place.
Turning a slide deck into a type scale
The guidelines size type in fixed pixels against a 1920px slide: 100px titles, 45px body. On a 360px phone those numbers mean nothing, and converting them page by page would have left every page with a scale of its own.
So the ratios came out of the deck into one fluid scale, with its floor set against the longest word that can't be allowed to break in a service hero. Every size on the site comes off it. The proportions hold from a phone to an ultrawide monitor, and nobody has to invent a value to fill a gap.
Four services, one business
Blueprint, Connect, Studio and Resonate sell to different people — brands and networks, creators, artists and labels. Someone who lands looking to buy one of them shouldn't have to care about the other three, and it still has to read as one company rather than four.
A numbered index does that work. Each service gets its own room and the same shape as the rest, so you can arrive anywhere in the set and still know where you are.