Every pixel here has a reason.
StyleSeed aims to make expert design judgment repeatable by coding agents: recorded decisions, their reasons, and checks on the implementation. Experts keep ownership of intent and acceptance.
Below is one screen. We’ll walk every decision in it: what we chose, which rule it follows, and why that makes it work. This is the framework your AI is reading.
$3.84M
The balance is huge; its unit is half its size.
Why it works · The eye locks onto magnitude first. A 48px number over a 24px unit creates instant hierarchy — make them the same size and the value flattens into noise. The 2:1 ratio is the difference between 'a number' and 'the number that matters.'
Only the primary action is colored — the eye never has to choose.
One blue. Everything else is grey.
Why it works · A second accent splits the question 'where do I look?' Scarcity is what makes the primary action unmissable — the accent earns its meaning by being the only thing wearing it. The rest goes greyscale so the one colored thing is always the answer.
Content sits in cards, separated by tone — not borders.
Why it works · Borders everywhere read as busy and cluttered. A soft tonal background plus a faint shadow separates surfaces without adding a single line — the page feels calm because nothing is fighting for an edge. Reach for a border only when space and tone can't do the job.
Numbers are tabular and right-aligned. Every decimal lines up.
Why it works · With tabular figures every digit is the same width, so columns and decimals stack into a clean vertical edge you can scan in one pass. Proportional numbers jitter the alignment and make a money table feel untrustworthy. For finance this isn't polish — it's legibility.
One corner personality — the card, its thumbnail, and its button all agree.
Why it works · Mixing sharp and round corners is the #1 tell of un-designed UI. Pick one personality and apply it everywhere. And a nested element uses inner = outer − padding, so its corner shares a center with the card's — otherwise it visibly bulges past the arc.
The empty state is designed, not a blank rectangle.
Why it works · A data surface has three states besides 'full,' and the AI that forgets them ships a screen that looks broken the moment there's no data. An empty state with an icon, a sentence, and the next action turns a dead end into a starting point.
Motion is one named seed — confident on the CTA, invisible on a balance.
Why it works · A random fade on everything is the motion equivalent of a rainbow palette. One named seed (here: Spring on press) gives every interaction the same personality, and motion never delays the thing the user came to see — you never bounce a balance into view. Consistent feel, zero latency where it counts.
You can act from the label alone — no guessing what “Submit” does.
The button says what happens — not “Submit.”
Why it works · The words are part of the design too. “Submit” / “OK” / “Confirm” make the user guess what they're agreeing to; a button that reads “Send $2,400” is its own confirmation. Copy that sounds like a system — “Invalid input,” “An error occurred” — reads as AI-made exactly like the wrong color does. StyleSeed writes the verbal judgment down too (buttons name the action, errors help instead of blame, one term per concept) — and you pick the voice, the rules are the floor.
Decisions need reasons and boundaries.
An agent needs to know when a decision applies and how to implement it, not just which style to imitate. Coherence matters, but is not sufficient evidence of design quality. Human review still matters.