About
Dispersion Design Generator
A tool for mapping the design possibilities for a product brief. Instead of asking an AI to "give me 6 design directions," it runs a structured process that forces the outputs to be genuinely different from each other — not just different in color, but different in their underlying design values. The result is a map you can navigate.
Stage 1
Seed
Your brief is turned into a deliberately generic, forgettable design concept. This is intentional. The seed is the most uninspired version of your product a competent designer would produce by default — the safe choice, the Tuesday afternoon output. It becomes the baseline everything else is measured against. Any aesthetic direction in your brief is noted but not implemented.
Stage 2
Constellations
Six design forces are applied to the seed in pairs, each pair pulling the design in a distinct direction. The six calls run in parallel. Each produces a constellation — a design concept shaped by the tension between its two forces, with axis values, a tension field documenting where the forces conflicted, and a four-step mutation history.
Stage 3
Previews
Each constellation is rendered as a visual HTML preview — a nav, hero, and product section styled to express that constellation's specific design values. The renderer is constrained to system fonts and CSS-only visuals, which forces differentiation through structure, proportion, and type treatment rather than photography or custom assets.
Forces are not styles. Clarity doesn't mean "minimal." Emotion doesn't mean "colorful." Each force has specific opinions about layout, visual language, and interaction — and they often conflict with each other.
Clarity
Removes friction. Tightens hierarchy. Eliminates anything that doesn't directly help the user understand what to do. Clarity doesn't mean minimal — it means every element earns its presence.
Emotion
Adds warmth. Creates moments of human texture — the feeling that someone cared when they made this. Emotion doesn't mean colorful; it means the design acknowledges the person using it.
Novelty
Questions convention. Asks "why does this have to work this way?" and replaces inherited patterns when the alternative is genuinely better — not just different.
Performance
Strips everything that costs without returning value. No decorative elements. No loaded fonts. No transitions that don't communicate state. Ruthless about weight.
Brand
Aligns the design with an established identity. Treats the design system as the accumulation of trust — every deviation costs equity, every consistent application builds it.
Clarity
How easy it is to understand what to do and find what you need.
Emotion
How much felt connection and warmth the design creates.
Novelty
How far it departs from inherited conventions.
Cog Load
How much the design demands from the user's attention. High means demanding. This is a consequence, not a goal — no constellation is named for it.
Performance
How ruthlessly it eliminates weight and overhead.
Brand
How strongly it expresses a defined visual identity.
Every design is scored 0–100 on each axis. The six values must sum to exactly 300 — a fixed budget. Raising one axis requires lowering others. Trade-offs are structural, not optional.
Each constellation is named for its two dominant forces. Those two forces must together claim at least 160 of the 300 budget points, with everything else low. This is what makes them legible — you can see what they care about and what they don't.
Balanced
Clarity · Emotion
Warm and readable. Structured enough to be clear, human enough to feel personal.
Utilitarian
Clarity · Performance
Stripped to function. System fonts, no decoration, minimum steps. Looks like it was built by engineers who respect their users.
Functional
Clarity · Brand
Polished enterprise design. The design system does the work — the brand is visible but never decorative.
Editorial
Emotion · Novelty
Expressive, unconventional layouts. Feels like something with a point of view.
Premium
Emotion · Brand
Warm identity. Brand assets earn their presence by adding to the feeling, not just the recognition.
Experimental
Novelty · Performance
Breaks conventions without adding weight. Structurally strange, visually spare.