It wasn’t that the old online experience was dated, though it was a few years old. It wasn’t a brand refresh, though the brand had evolved past it. It wasn’t even that I’d outgrown the messaging, though I had.

I rebuilt because what a Design Guidelines document needs to be has fundamentally changed in the last two years, and most of the practice hasn’t caught up. I wanted to build ahead of the shift, not behind it. And I wasn’t going to ask a client to invest in a foundation I hadn’t built for myself first.

So the rebuild started where every good rebuild starts. Not with the homepage. With the Guidelines underneath it.

What changed

Vibe coding became real. Tools like v0, Cursor, Lovable, and Claude Code now let people describe an interface and watch it build itself, developer or not. The output is only as coherent as the instructions the tool can be given. “Make it feel modern” produces slop. “Use the brand’s CTA pink only on the primary action, with the pink-wash ghost variant for secondary, on a soft neutral page” produces something usable.

AI landed in everyday creative tools, too. Custom GPTs, Claude Projects, Canva’s AI, Notion AI, Gemini in Docs and Slides: all now drafting copy and generating layouts for teams with no designer in the room. The output is on-brand only to the degree the brand has been described in language those tools can use. Hex codes and a logo file aren’t enough anymore.

And a single brand now lives across more surfaces than ever, a Canva post, a Figma file, a Notion page, a custom GPT, a printed card. A PDF that lives on someone’s hard drive can’t reach any of those without somebody manually translating it each time. Manual translation is where consistency goes to die.

That’s the shift. Most Design Guidelines I see weren’t built for it.

What Design Guidelines have to be now

The job has changed from visual reference to instructional system, a foundation a team, a freelancer, or an AI tool can draw from without losing the brand’s coherence.

  • Tokenized: --lki-cta: #FF6B9D; works for CSS, Figma, Tailwind, a GPT system prompt, a Canva brand kit. A hex code in a PDF only works for whoever’s looking at the PDF.
  • Articulable: AI tools don’t understand feel, they understand instructions. Pink earns the click. Italic earns its emphasis. Each of those is a sentence a human or an AI can actually apply.
  • Multi-surface: Visual examples for people, token names for tools, voice rules for writers, component logic for builders. None of these layers are optional anymore.
  • Portable: Built once, used everywhere the brand shows up.

Most Design Guidelines today are at most one of these. The ones that hold up over the next five years are all four.

What the LKI Guidelines actually look like now

The current Guidelines aren’t a document I wrote once and hope stays accurate. They’re a page on the live site, pulled straight from the same token file the site reads to render everything else. If a color changes, the Guidelines change with it. There’s no version of “the Guidelines say X but the site does Y,” because there’s only one source, read twice.

Logo, in both versions. Photography: editorial, real. Two icon systems: an animated set for section-level moments, a static Phosphor set, one weight, over fourteen hundred icons, for everything else. Colour: three surface roles doing most of the work, then mint and lime for accents, green-deep for the everyday work, one pink reserved for anything you can click. Type: Inter for structure, Instrument Serif italic once per page and never as decoration, JetBrains Mono for anything technical. A 4px spacing base. Two buttons, one dark pill and one flash of pink, nothing else competing for attention.

None of that is aspirational. It’s what the site is actually doing, which is the only kind of Guidelines that survives contact with real use.

Building the site on top

Once the Guidelines were solid, the online experience got built on top of them, not the other way around. The hero headline uses the italic accent exactly once, because the rule says it does. The CTAs are pink, only pink. None of these decisions get debated during the build. They’re already decided.

The site itself runs on plain files in a private repository, not settings locked inside a page builder’s own database, so an AI tool pointed at this site can actually reach what it’s built from instead of guessing. That’s the same foundation-first thinking behind the ongoing work of keeping it that way: my own site is where I test whether a foundation actually holds, before I build one for anyone else.

The through-line

The work I do hasn’t changed in twenty years: clear Guidelines, sensible structure, a brand voice documented well enough that anyone can use it without breaking the system. What’s changed is who “anyone” includes now, a new hire, a freelancer, a custom GPT, a vibe-coding tool.

The fundamentals haven’t moved. The job they have to do has expanded. If you’re trying to figure out whether your own brand foundation will hold up to what’s coming, that’s a good conversation to have now, not in two years, when fixing it costs a lot more.