Designing a brand before a line of code

This is a companion to the build story — the part about why I spent the first days of a one-week project not writing code, but deciding how the thing should look.

The reasoning is blunt: a content farm that looks like a content farm is dead on arrival. The moment a visitor — or a quality rater — clocks that a site is mass-produced, every other signal works against you. So before a single page was generated, I wanted SoiTarot to have the one thing most programmatic sites never get: a point of view you can see.

Three directions, then a decision

I didn't start by designing a homepage. I started by designing three, in Claude Design, on a single canvas I could look at side by side:

Each was a different bet on what the site is — a publication, an experience, or a serious tool. Generating three is the whole point. One direction is a guess you fall in love with; three is a decision you can actually make, because you're comparing real rendered screens instead of arguing about adjectives. I picked the deck-forward hero and kept the editorial restraint underneath it — and because the directions were real artboards, "picking" meant pointing, not redrawing.

One art direction, held everywhere

The thing that makes a generated site feel handmade isn't any single screen. It's consistency — a thousand assets that look like one hand made them. So I locked a single art direction and named it, because a named thing is easier to enforce: Engraved Celestial Etching. Deep navy, antique gold linework, lavender and ivory, the texture of an old astronomical plate.

The identity got a name too — The Crescent Eye — and a tight palette I refused to expand:

Type did three jobs and no more: Fraunces for display, Inter for the interface, JetBrains Mono for labels.

Every tarot card, every zodiac sign, every number later got generated to that one spec — which is the only reason a thousand AI images don't read as a thousand different moods.

You can open the whole design system in the open — brand guidelines, the color system, logo directions, the component kit, the motion spec. It's the actual working export, not a tidied-up case-study reconstruction.

A system a machine can't drift from

Here's where design stops being pictures and becomes infrastructure. A solo human can hold a look in their head. A pipeline of agents generating pages at scale cannot — they'll drift, and drift is exactly what reads as slop. So the design had to become rules, not vibes.

Everything went into a single token file — color, type, spacing, and especially motion — as the one source of truth. From there it fanned out to the places code actually reads: the component constants, the CSS variables, the Tailwind config. Change the token, and every surface moves together; there's no second place where a color or a timing can quietly disagree. That sounds like over-engineering for a one-week build. It's the opposite — it's what let the build be one week, because nothing downstream had to be re-decided.

The deeper half of that system — how motion was tokenized and then capped so it couldn't wreck performance across fifteen thousand pages — is its own story: motion under a Core Web Vitals budget.

What I'd take to the next one

Designing the brand before the code felt slow on day one and bought back the whole rest of the week. The lesson isn't "design first" as a platitude. It's that when a machine is going to do the making, your design isn't a mockup — it's the specification the machine obeys. Vague taste doesn't survive contact with a generator. Named directions, a locked palette, and tokens that can't be argued with do. Every locked choice becomes a default the whole system inherits — and defaults are the most powerful, least-examined decisions in software.

That's the same thread running through the whole experiment: the work moved from making things to deciding what's worth making and writing it down precisely enough that something else could execute it.