Visual Direction

Slop has no thesis. A generated UI is a bag of defaults because nothing forced its decisions to agree. Before any token, you make three calls: the dials, the industry bucket, and the thesis sentence. Every downstream decision must trace back to them.

An existing product already has a direction, stated or not. Read it off the current interface and name it. Write a new direction only when the work explicitly reopens it.

The inputs — nothing aesthetic is arbitrary

Every visual decision derives from four inputs, gathered before touching the dials:

• Brand: the identity that already exists: hue, voice, what's shipped. The thesis names an existing brand or creates a missing one; it never ignores one.
• Audience: who looks at this, in what state. An on-call engineer at 3am and a first-time gift shopper need different surfaces.
• Task: is the thing used, read, contemplated, or browsed, how often, and at what stakes. Frequency and stakes set density and motion harder than taste does.
• Category conventions: what the audience's other tools look like: the industry bucket below. Breaking a convention is a decision with a stated reason, never a default.

A decision you can't trace to one of these four is decoration. "It looks premium" is not an input.

The three dials

Defaults: V=5 / M=3 / D=5. Dial values constrain every downstream decision. A finance app at V=3/M=1/D=9 never gets pill buttons or decorative gradients. A creative agency at V=8/M=6/D=3 never gets a 12-column symmetric grid.

Variance levels. 1–3: strict grid, equal gutters, predictable. 4–7: intentional offset, overlapping elements, mixed aspect ratios, left-aligned headers over centered data. 8–10: asymmetric, masonry, massive empty zones; broken symmetry is the point. Above 3, any asymmetric layout collapses to single-column on small viewports. Horizontal scrolling is always a failure.

Motion levels. 1–3: static; hover and active states via CSS only. 4–7: purposeful transitions on state changes and loading, cubic-bezier(0.16, 1, 0.3, 1), transform and opacity only. 8–10: choreographed, spring physics, scroll-triggered reveals. The motion skill carries the full animation budget.

Density levels. 1–3: gallery, 3–5 elements per viewport, body 18px+, massive gaps. 4–6: standard app; most products land here. 7–9: cockpit, compact rows, 1px dividers, tabular numerals, no cards.

Combinations that fight themselves

Each dial is a material signal. When the signals contradict, the interface feels wrong without the user being able to say why. Clamp the outlier:

1. D≥7 with M≥7: clamp M to 4. Density wins; in a cockpit every pixel is working, and animation steals pixels from their job.
2. V≤2 with M≥8: clamp M to 5. A rigid grid says "engineered steel", spring physics says "rubber". Pick one material.
3. V≥8 with D≥8: works only when the asymmetry encodes information priority (largest widget = most important metric). Decorative asymmetry at cockpit density: clamp V to 6.
4. All three dials at extremes: always wrong. Move at least one toward center.

Industry bucket

The bucket sets the default dial range and the forbidden patterns. The stricter constraint always wins.

Regulated and safety-critical domains carry hard ceilings that override any preference: finance and banking M≤2 and V≤4, healthcare M≤3 and V≤3, legal and government M≤2 with D≥5, safety-critical operations M≤1 with D≥7. The ceiling is not the floor; you can always go calmer.

The style thesis — one sentence before any token

A thesis is an image, not adjectives. "Clean, modern, minimal" is not a thesis: you can't picture it, so it constrains nothing. "A flight cockpit at midnight" is: it fixes darkness, density, instrument-grade type, zero decoration.

The test: could a stranger pick your UI out of a lineup from the sentence alone?

Name the material and the light; the rest follows:

Worked derivations, to imitate, not copy:

• "A flight cockpit at midnight" (observability tool). V=3/M=1/D=8. Surfaces oklch(14% 0.01 250), cold hue. Tabular numerals everywhere, mono for data, no display font. Radius 4px, no gradients, state changes instant.
• "Field notes on cream paper" (journaling, learning). V=6/M=3/D=4. Warm surfaces oklch(97% 0.01 85), ink-dark text. Editorial serif display over humanist sans body, oldstyle figures in prose. Radius 8–12px, diffusion shadows only: paper casts soft shadows, it doesn't glow.
• "A concrete showroom in daylight" (luxury e-commerce). V=8/M=5/D=2. Near-white neutrals; the product carries all the color. One type family, extreme weight contrast. Massive whitespace, full-bleed imagery, sparse choreographed motion.

A token you can't justify from the thesis is a default in disguise.

Aesthetic directions — the named categories

The thesis is the sentence; the direction is its category. Naming it anchors downstream decisions.

Research — where to look, what to refuse

Fetch real design work before generating tokens. Sources chosen for evidence quality, not visual impressiveness:

Excluded: Dribbble and Awwwards. Both optimize for a thumbnail or a jury, not for what ships. Inspiration from either leads straight back to the AI-tell patterns (oversaturated gradients, dramatic shadows, interactions that collapse under real content).

When the user attaches a reference image, extract signals, never facts: dominant hue and temperature, surface lightness, font category, spacing rhythm, CTA style, density. Then synthesize original values. Copying hex codes from a screenshot is theft with worse contrast.

Order of operations

1. Industry bucket and dials bound what's allowed.
2. Research supplies the raw material.
3. Write the thesis inside those bounds. If the thesis fights the dials, resolve it now, not in CSS.
4. Derive: hue and surface lightness from material and light, type personality from role, motion from whether the thing is used or contemplated.
5. Name the direction category, then hand off: color skill for the palette, typography skill for the type system, layout skill for hierarchy and spacing, motion skill for the animation budget.