StyleSeed
How it thinks

Every pixel here has a reason.

Most design repos hand your AI a pile of components and hope for the best. StyleSeed hands it the judgment — the rules and the reasoning behind them — so the output looks designed, not generated.

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.

Same content, two cards: a 'mixed' card with three accent colors and mixed corner radii looks off; a 'one system' card with one accent and one radius looks designed. The only difference is coherence.
Total balance

$3.84M

+12.4% vs last month
1The decision

The balance is huge; its unit is half its size.

Rule 4 · Numbers 2:1 with units

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.'

Send a transfer

Only the primary action is colored — the eye never has to choose.

2The decision

One blue. Everything else is grey.

Rule 2 · Single accent + VISUAL-CRAFT §C0 · Coherence

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.

Acme Corp
Downt<wbr/>own · 2:14 PM
+$8,400
Northwind
Refund · 1:09 PM
−$320
3The decision

Content sits in cards, separated by tone — not borders.

Rule 1 · Everything in cards + Rule 7 · Shadows ≤ 8%

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.

This week
Payroll−$12,480.00
Stripe payout+$3,209.50
AWS−$842.16
4The decision

Numbers are tabular and right-aligned. Every decimal lines up.

VISUAL-CRAFT §C2/§C5 · Tabular numerals

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.

Card · 16px
Thumbnail · 16 − 4 pad = 12px
5The decision

One corner personality — the card, its thumbnail, and its button all agree.

VISUAL-CRAFT §C0 · One radius, nested law

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.

No transactions yet
Your activity will show up here.
6The decision

The empty state is designed, not a blank rectangle.

Rule 71 · Empty / loading / error states

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.

CTA press → Spring (stiffness 300, damping 18)
Card entrance → near-zero, content-first
Balance → no motion; the number is the point
7The decision

Motion is one named seed — confident on the CTA, invisible on a balance.

Motion system · named seeds, not ad-hoc fades

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.

None of those decisions are about taste.

Each one is a rule with a reason — and reasons are something an AI can read, apply, and repeat. That’s the whole idea: not a library of parts, but a framework for the judgment that arranges them. Beautiful parts don’t make a beautiful UI. Agreeing parts do.

Go deeper