Designer

The Problem

If agents are going to build interfaces, they need design systems they can understand and constraints they can follow.

Most design systems are a list of constants and a hope.

The type scale is chosen by feel. Spacing is whatever the designer reached for that week. Border radii are 4,8, 16 because those numbers feel "right." Tokens are named consistently, but thevalues aren't related to each other in any structured way. The system holds together until the moment you try to push on it — a new role, a new breakpoint, a nested component — and then the cracks show.

Tokens drift. A type scale gets a new size for one screen, a spacing token gets nudged for one card, and now the rest of the system has to rationalize the addition. The tokens stop being a system and become a pile.

Nesting breaks visually. A rounded card with a rounded button inside it looks wrong because the inner radius doesn't mathematically match the outer radius minus the padding. Most teams notice the wrongness; few can articulate what would fix it.

Responsiveness is afterthought. Breakpoints scale the same scales. The system doesn't adapt to a wider viewport — it just stretches.

Color is a guess. Most palettes are picked in sRGB, then a designer eyeballs lighter and darker shades. Contrast against semantic uses is something the accessibility audit will check later.

The deeper problem: a design system isn't really a system. It's a vocabulary of disconnected words, each chosen reasonably, with no grammar tying them together.

The Workarounds Are Brittle

The industry has tried.

Modular scales — pick a ratio (1.25, 1.333, 1.618), multiply it forward, round to taste. Better than nothing. But the ratio only governs one dimension: type, usually. Spacing, radius, and sizing still get picked separately, by feel, and there's no reason for them to harmonize with the type scale you just generated.

Design token catalogs — Style Dictionary, W3C tokens, Tailwind themes. They're great at distributingtokens to platforms. They have nothing to say about whether the tokens make sense together. Garbage in, harmonized garbage out.

Eight-point grids — pick a base of 8px, multiply. Clean for spacing, but the moment you need a value between 8 and 16, you're back to inventing. And the scale doesn't compose: 8, 16, 24, 32 has no internal proportion that mirrors the type or radius systems.

Hand-tuned palettes — pick a hex, eyeball shades, run a contrast checker, fix what fails. Each color system is bespoke. None of them generalize. The L*a*b* / OKLCH revolution has made perceptual color possible, but most tools still ship as sRGB pickers with a thin polish.

The fix isn't another list. The fix is a generative rule the whole system obeys.

What Designer Does

Designer treats a design system as a single mathematical instrument with many strings — and tunes every string to the same key.

You pick one base ratio: a musical scale (major,minor, pentatonic, dorian,lydian, blues, chromatic), or a mathematical sequence (fibonacci,golden_ratio, golden_ratio_squared). That choice propagates through ten token scales — type, spacing, padding, border radius, sizing, border width, line height, letter spacing, elevation, timing — so every value in the system is a degree of the same scale.

On top of that you apply filters: which scale degrees are "active." Triads (1, 3, 5). Perfect fifths (1, 5). Pentatonic (1, 2, 3, 5, 6). Diatonic. Chromatic. Just as a composer chooses which notes to play, you choose which steps ship. The discipline is the design.

Color is generated in OKLCH for perceptual uniformity. Shade ramps come out balanced. Contrast grading (AA, AAA) is built in. Grids are laid out from the same scale using musical patterns — perfect fifths, triads, pentatonic, diatonic, chromatic — instead of arbitrary column counts.

One ratio. Ten scales. Every token in harmony.

The Math of Harmony

Pick a single ratio that governs the whole system. Most ratios produce a usable scale. A few produce nesting: scales where any step minus the previous step lands exactly on another step.

scale(n) - scale(n-1) = scale(n-2)

Solve for the ratio that makes this true and you get one answer: r² - r - 1 = 0 → r = (1 + √5) / 2 = 1.618… — the golden ratio. Fibonacci satisfies it too, because the ratio of consecutive Fibonacci numbers converges on φ.

That's why golden-ratio and Fibonacci scales feel right when you nest one rounded element inside another with padding: the inner radius equals the outer radius minus the padding, and that value already exists in the scale. Nothing is rounded by hand. The math nests for you.

Designer makes this generative. The same logic that produces a type ramp produces a radius ramp produces a spacing ramp. Anywhere one token interacts with another, the relationship is defined, not assumed.

Ten Token Scales, One Logic

Every primitive a UI needs, generated from the same source.

Type. Font size ramp from a base, anchored at a base index so increasing the base font size doesn't renumber the steps.

Spacing & padding. Margin/gap and container padding as separate but mathematically related ramps.

Border radius. Corner rounding on the same scale, so radii nest with padding by construction.

Sizing. Generic size ramp for icons, controls, avatars.

Border width. Stroke widths sized by the same progression.

Line height & letter spacing. Per-role typography multipliers and tracking, both generated, both constrained.

Elevation. Shadow ladders for depth, sized so one elevation step relates to the next the way a fifth relates to a root.

Timing. Motion durations on the scale, with easing curves applied later. Animations inherit the system's rhythm.

Each scale exposes the same controls: base value, step count, minimum value, base index, pattern, filter. Switch the pattern from major to fibonacci and every scale recalculates in harmony.

The Musical Grid System

Layout uses the same vocabulary as everything else. A grid isn't "12 columns." A grid is a pattern of scale degrees with a count.

Column pattern: Major Triad (1, 3, 5) → 1fr, 3fr, 5fr
Column count: 7 → 1fr, 3fr, 5fr, 1fr, 3fr, 5fr, 1fr

Pick a different pattern and the layout changes character without changing the math:

Perfect Fifth (1, 5) — two columns, strong duality. Forces minimalism.

Major Triad (1, 3, 5) — three harmonious proportions. The default of musical layout.

Pentatonic (1, 2, 3, 5, 6) — five always- consonant degrees. Versatile, never clashes.

Diatonic (1–7) — the full expressive scale. Complex compositions, still harmonic.

Chromatic (12) — maximum density and control, same scale, more notes.

Rows can mirror columns or use an independent pattern. Canvas height is measured in octaves, not pixels. The grid isn't a container of cells — it's a composition.

Color in OKLCH

Designer works natively in OKLCH: a perceptually uniform color space where a fixed change in lightness or chroma looks like a fixed change to the eye. sRGB hex is the export, not the source of truth.

Generated shade ramps. From a single base color, Designer derives an 11-step ramp (50–950) by sweeping lightness on a perceptually balanced curve and scaling chroma with it, so light tints don't wash out and dark shades don't muddy.

Base step detection. Designer figures out where the input color naturally sits on the ramp (e.g. "this one is your 600") instead of forcing you to anchor at 500.

Contrast built in. Every pairing reports a WCAG contrast ratio and grade (AAA, AA, fail). Accessibility isn't a post-hoc audit; it's a constraint the picker enforces as you work.

Semantic roles. Colors are roles (primary, accent, surface) bound to ramps, not raw hexes scattered through components. Swap the underlying color and every role updates.

Adaptive, Not Responsive

Responsive design takes one set of scales and squeezes them to fit. Designer treats each breakpoint as its own composition.

Every scale — type, spacing, radius, sizing, the grid pattern, even the active color roles — can be configured independently per breakpoint. A phone might run a Perfect Fifth grid in a Pentatonic type scale; a 1440 desktop might run a Diatonic grid in a Major scale with a wider spacing ramp. Same system, different instrument settings.

Disabled breakpoints inherit from smaller ones. Base breakpoints anchor the whole stack. The inheritance is explicit, visible, and editable.

The result: layouts that adapt to a viewport with a new compositional choice, not respond by stretching the same one.

Nesting Harmony

Designer ships a nesting analyzer that does the math on every radius / padding combination in your system and tells you which combinations nest cleanly.

outer_radius - container_padding == inner_radius

For each outer radius step, it finds every spacing step that produces a valid inner radius — one that already exists in the scale and retains enough of the original curvature to read as consistent. Pairings are scored. The full system gets anesting harmony score that tells you, at a glance, how composable the radii really are.

Designer also identifies the musical intervalbetween any two values — perfect fifth, major third, tritone — and grades the relationship as perfect, consonant, mildly dissonant, or dissonant. The system tells you what it's actually doing under the hood.

You don't need a designer to feel the wrongness anymore. You can read the score.

Tokens That Ship Anywhere

A design system is only as useful as the place it lands. Every token in Designer is part of a versioned Token Contract — a single canonical artifact that captures every scale, breakpoint, color role, typography role, and typeface.

From the contract, Designer exports to the formats your stack already speaks:

CSS custom properties. Drop into any codebase. Per-breakpoint variables under media queries.

SCSS variables and maps. Authoring-friendly for teams still on a Sass pipeline.

Tailwind preset. A generated config that treats your scales as Tailwind's spacing, radius, type, shadow, and animation primitives.

JavaScript / TypeScript. A typed object for runtime systems, RN, or design-tool plugins.

The contract is the source of truth. The exports are regenerated, never edited by hand. Update the system, redeploy the tokens, every consumer is in sync.

Stay in Control

Designer is opinionated about how tokens relate, and transparent about which relationships are in play.

Every value cites a reason. A spacing token isn't 24. It's degree 5 of the major scale at the current base. Hover the token, see the derivation.

Patterns are switchable. Change the scale from major to pentatonic and watch the whole system retune in place. You can preview a new ratio against an existing UI before committing.

Filters constrain. Restrict a scale to triads, fifths, or octaves to enforce a stricter visual vocabulary. Less choice produces more coherence.

Themes are first-class. A design system can host multiple themes, each with its own scales, breakpoints, and color roles, all derived from the same theory.

Auditable history. Token contracts are versioned. Diff two contracts to see exactly what changed between releases.

Get Started

Designer is a hosted workspace. Sign in, create a design system, choose a base scale, and start composing.

DESIGNER.ATHEORY.AI →

Or run it locally — the workspace ships as a Next.js application with Storybook, Playwright, and a typed token contract you can fork and extend.

Philosophy

Design systems aren't decoration. They're the grammar of every interface a team will ever ship. If the grammar is a pile of constants, the interfaces will look like a pile of constants — technically consistent, atmospherically incoherent.

Music solved this thousands of years ago. A scale is a small set of notes chosen so that any combination of them sounds right. A composition is the act of choosing whichnotes, in what order, with what rhythm. The constraint is what makes the freedom legible.

Designer treats type, spacing, radius, color, motion, and layout as the scale; the product team's interface decisions as the composition. Pick the key once. Let the system enforce the harmony. Spend your attention on the part that actually needs taste.

The math should be on your side. It usually isn't. With Designer, it is.