Turning a brand identity into a website, not a template

A brand guideline PDF tells you what the logo looks like. It rarely tells you how a website should behave. The gap between the two is where most brand websites go generic: the colours are right, the fonts are right, and it still looks like every other site in the industry.

Before we design anything, we run an extraction. It produces four documents that the whole build is held to.

1. Palette with roles, not swatches

Every colour gets a job. On BKI's own identity the rule is explicit: paper for pages, mist for cards, one electric accent used once per view, a second colour reserved for links and live states only. When a colour has a role, designers stop guessing and the site stays coherent across fifty screens.

2. A type system with a voice

Display, body and detail faces are chosen for how they read at the sizes the site actually uses, on the devices the audience actually owns. We test headline sizes with real copy, not lorem ipsum, because a luxury brand's sentences are longer than a startup's.

3. Motion signatures

Two or three movements that belong to the brand: how images arrive, how a menu opens, how a number counts. Then we ban everything else. Motion is a signature when it repeats, and noise when it varies.

4. The competitive visual audit

We look at the ten sites a client's customers see most, list the patterns they all share, and deliberately avoid them. In coastal real estate that meant no drone-video hero and no floating WhatsApp button. Being recognisably different is a design decision made before Figma opens.

Why this matters commercially

A site built on an extracted system is faster to build, cheaper to extend and easier to hand over. More importantly, it reads as yours. That is the whole point of having a brand.