You've seen it. You ask an AI to build a dashboard, and it returns something that's… fine? Every component is individually competent. The button is a button. The card is a card. And yet the whole thing reads as generated — like a stock photo of a UI.

For a long time I assumed the fix was "better components" or "more taste in the prompt." It isn't. After digging through the actual design literature — Refactoring UI, Material Design 3, Apple's HIG, IBM Carbon, WCAG, the Financial Times' visual vocabulary — the real culprit has a name:

Incoherence.

The parts don't agree with each other. And once you can see it, you can't unsee it.

I've written before about why your vibe-coded app looks ugly and what I did about it. This post goes underneath that — the actual mechanism behind the "off" feeling, and the one principle that fixes it.

The tell: parts that don't agree

Here's a UI with nothing "wrong" in it:

• A card with sharp 2px corners
• Pill-shaped buttons inside it
• A blue primary action next to a purple "upgrade" link
• Icons: two from Lucide (outline), one filled emoji
• One shadow lit from the top-left, another from straight below

Every one of those choices is defensible in isolation. Together, they signal "assembled from parts," because a human designer would never make all of them on the same screen. A designer picks one corner style, one accent, one icon set, one light source — and repeats those decisions everywhere.

That repetition is what we read as "designed by one mind." Goran Paun (UX Collective) calls it visual coherence; Steve Schoger's whole Refactoring UI is, in a sense, a book about not introducing gratuitous variation. The principle is old. What's new is that AI breaks it by default, and understanding why tells you how to fix it.

Why AI specifically struggles with this

A language model generates UI locally. It writes the card, then the button, then the modal — each as a fresh, plausible snippet. It has no running memory that "the buttons 40 lines up were pill-shaped, so these must be too." Each component regresses to the mean of its training data, and the mean of "a button" and the mean of "a card" were never coordinated.

Humans don't work this way. We carry a tiny set of decisions in our head — this product is soft-cornered, blue-accented, 8px-grid — and every new element inherits them. The decisions are sticky.

So the fix isn't "make the model more tasteful." It's: write the sticky decisions down, and tell the model to copy them instead of inventing new ones.

The meta-law: one choice per axis

Here's the whole idea in one sentence:

For each design axis, pick exactly one value or family, encode it as a token, and apply it everywhere.

Coherence is not "every screen is identical." It's that the same decisions recur. A settings page and a dashboard can look very different and still feel like one product — as long as they share a radius personality, a shadow language, an accent, and a spacing unit.

These are the axes that have to stay unified:

The single best instinct I've heard a non-designer voice it as:

"If the corners are sharp, everything should be sharp."

Exactly right — and it generalizes to every row in that table. Treat a mixed axis as a lint error, not a style choice.

Let's make four of these concrete.

1. Pick one corner personality (and respect the nesting law)

First, radius is a token, never a magic number. Define a small scale and reference it everywhere:

:root {
  --radius-sm: 8px;   /* inputs, buttons   */
  --radius-md: 12px;  /* cards, menus      */
  --radius-lg: 16px;  /* modals, sheets    */
  --radius-full: 9999px;
}

Then pick one personality — all sharp, all soft, or all pill — and apply it across card / button / input / modal / image. Don't let the model freestyle a rounded-none panel with rounded-full buttons.

There's a subtle second rule most people miss: nested radii must share a center. When a rounded element sits inside a rounded container with padding, the inner radius should be smaller:

inner radius = outer radius − padding

.card {
  --pad: 16px;
  border-radius: var(--radius-lg);          /* 16px */
  padding: var(--pad);
}
.card > .thumbnail {
  /* 16 − 16 = 0; clamp so it never goes negative */
  border-radius: max(0px, calc(var(--radius-lg) - var(--pad)));
}

If you give the inner element the same radius as the outer one, its corner visibly bulges past the container's arc. Apple's new "Liquid Glass" system formalizes exactly this concentric-corner math; Cloud Four has the canonical write-up.

2. Layered shadows from a single light source

The fastest way to make depth look fake is one hard box-shadow. Real shadows are a gradient (a penumbra), so stack several low-opacity layers, and — critically — tint them toward the surface hue instead of using pure black, which goes muddy:

/* card — sits near the page */
--shadow-md:
  0 1px 2px  hsl(220 40% 20% / 0.08),
  0 2px 4px  hsl(220 40% 20% / 0.08),
  0 4px 8px  hsl(220 40% 20% / 0.08);

/* modal — floats toward the user */
--shadow-xl:
  0 2px 4px   hsl(220 40% 20% / 0.06),
  0 8px 16px  hsl(220 40% 20% / 0.06),
  0 16px 32px hsl(220 40% 20% / 0.06),
  0 32px 64px hsl(220 40% 20% / 0.06);

The coherence rule: one light direction for the whole page (convention: above and slightly left), with vertical offset roughly 2× the horizontal. As elevation rises, offset and blur go up while opacity goes down. A card and a modal then read as the same light hitting objects at different heights — not two unrelated effects. (Josh Comeau and Tobias Ahlin both have excellent deep-dives on this.)

In dark mode, shadows nearly vanish, so switch to tonal elevation — lighter surfaces for higher elevation — and never use pure #000 as your base (Material recommends #121212 with white overlays per level).

3. One accent, everything else greyscale

Most "AI rainbow" UIs come from reaching for a new hue every time something needs emphasis. The discipline:

• One accent for interactive emphasis.
• A full tinted-grey ramp (not pure grey — nudge it 5–15% toward the brand hue) for text, surfaces, and borders.
• Only four semantic colors — success / warning / error / info — used strictly by meaning, never decoration.

:root {
  --accent: #5b5bd6;
  /* greys tinted slightly toward the accent's hue, not 0-saturation */
  --grey-50:  hsl(240 20% 98%);
  --grey-200: hsl(240 14% 90%);
  --grey-500: hsl(240 8%  55%);
  --grey-900: hsl(240 12% 14%);  /* body text — NOT #000 */
}

And one accessibility floor you don't get to negotiate (WCAG 2.2 AA): 4.5:1 contrast for body text, 3:1 for large text and UI components. Never convey information by color alone — pair it with an icon, text, or shape. A red border on an invalid field is not enough; add the icon and the message.

4. One spacing grid, with proximity doing the grouping

Snap every margin, padding, and gap to a single scale — 4, 8, 12, 16, 24, 32, 48, 64 — and let proximity carry meaning. The rule from Gestalt (and Refactoring UI's "avoid ambiguous spacing"): the space around a group must be clearly larger than the space within it.

A concrete ladder for forms:

label → input        : 4–8px
input → input         : 12–16px
group → group (section): 24–32px

When everything is evenly spaced, the eye can't tell what belongs together. The doubling at each level is what makes a label bind to its field and a section separate from the next.

Make the machine check itself

Writing the decisions down is half the battle; the other half is catching violations. This is where AI can actually help — if you give it the rubric.

I bake all of the above into an open-source design engine (StyleSeed) that Claude Code and Cursor read automatically, but the idea is tool-agnostic. The most useful piece turned out to be a coherence grader: a check that scores a file and flags mixed axes as real deductions.

A trimmed example of what that output looks like:

## Design Score: 70 / 100   (Dashboard.tsx)

Color discipline   13/18  ▓▓▓░  #000 headings; 3 accent hues
Cards & elevation   8/12  ▓▓░░  1px borders doing separation
Coherence           6/12  ▓▓░░  sharp cards (l.22) + pill buttons (l.48); 3 accents

### Fix first (highest score gain)
1. Unify radius (pick soft 8–12px) + collapse to one accent  → +9
2. Add empty + loading states to the orders list            → +7
3. Drop 1px borders, use tone + ≤8% shadow                  → +4

The "Coherence" category is the one that most predicts "looks AI-generated," precisely because it measures system-wide consistency rather than per-component prettiness. A component can be beautiful and still wrong — if it disagrees with its neighbors.

The takeaway

If you remember one thing:

Beautiful parts don't make a beautiful UI. Agreeing parts do.

Pick one value per axis — radius, shadow, accent, spacing, icons, type, motion — write it down as a token, and make every new element inherit it instead of inventing a fresh choice. That single discipline is the difference between "a robot made this" and "a designer made this," and it's the cheapest, highest-leverage thing you can do for an AI-built interface.

The corners are sharp? Then everything is sharp. All the way down.

Want the practical side? I covered the one-file fix that makes your vibe-coded app stop looking ugly in a companion post. And the full research-backed version — concrete spacing numbers, a type recipe per app type, layered-shadow and nested-radius recipes, all grounded in Refactoring UI / Material 3 / Apple HIG / WCAG — is open source (MIT): github.com/bitjaru/styleseed. A ⭐ helps more devs (and more AI tools) find it.