One scale. A whole design system.
Pick a base, a ratio, and how many notes to divide it into. Scale Composer derives the rest — type sizes, color ramps, spacing, and grid — from those same three numbers, so everything belongs together.
One ratio. Every panel answers at once — that is the whole idea.
Three tools, three logics, one system that doesn't hang together
A type scale from one calculator, a palette from another, spacing by feel. Each choice can be reasonable on its own and the whole still drifts — because nothing ties the parts to each other. When the sizes, the ramps and the gaps come from one scale, coherence stops being a matter of discipline and becomes a property of the system.
Three views, one scale underneath
-
Color
Seed one brand color and get full OKLCH ramps — brand, tinted neutrals, and the four functional colors — with semantic roles and WCAG floors derived automatically.
Try a live ramp ↗ -
Typography
Every font size comes off the scale, line heights sit on the baseline grid, and spacing between elements uses the same steps — one vertical rhythm throughout.
Try a live scale ↗ -
Grid
Breakpoints, columns, gutters and margins step through the same scale. Nudge a gutter with the arrow keys and it lands on a scale value, never an arbitrary pixel.
Try a live grid ↗
Deep dives: color scales · type scale · layout grids
You don't pick 17 colors. You pick one — the rest is derived.
Text on background, muted text, borders, button states, focus rings, the four functional colors: all named roles, derived from your seed with WCAG contrast floors enforced and APCA shown alongside. Dark mode is generated as its own derivation — its own lightness curve, not an inversion. How the contrast math works · why dark mode is a derivation.
One session, every format your stack reads
The same tokens leave the tool as any of these — generated, complete, and consistent with each other:
CSS custom propertiesTailwind v4 @themeTailwind v3 configshadcn/ui themeFigma VariablesGrid CSS
More on the token layer: design tokens guide
The theory behind the tool, in 152 guides
type scale
What a type scale is, how to choose a ratio, and how one scale can drive your whole design system. Guides, worked examples, and a live tool.
16 guidesspacing system
How spacing systems work — the 8pt grid, 4pt half-steps, baseline grids, and spacing scales that grow from one formula. Guides and a live tool.
14 guidesoklch
OKLCH explained for designers and developers — lightness, chroma, hue, gamuts, and why modern color tooling generates palettes in it. Guides and a live tool.
15 guidescolor scale
How color scales work — the 50–900 steps, ramps from one brand color, semantic roles, and palettes that pass contrast by construction. Guides and a live tool.
17 guideswcag contrast ratio
WCAG contrast ratios, APCA, color blindness and accessible palettes — what the rules require, why they exist, and how to pass them by construction.
13 guidesdesign tokens
What design tokens are, the DTCG format, naming layers, theming and the export path from one source to CSS, Tailwind and Figma. Guides and a live tool.
12 guides12 column grid
How layout grids work — 4/8/12 columns, gutters, margins, breakpoints and container widths, built with modern CSS instead of framework classes.
9 guidesfluid typography
Fluid typography with clamp() — sizes that scale smoothly with the viewport instead of jumping at breakpoints. The math, the accessibility rules, the guides.
11 guidesdark mode design
How dark mode actually works — derived palettes instead of inversion, chroma loss, elevation, contrast pitfalls and theme tokens. Guides and a live tool.
11 guidesbrand colors
How brand colors become working systems — choosing a color, surviving accessibility, print-to-screen translation, rebrands and audits. Guides and a live tool.
12 guidesfont pairing
The craft side of web typography — pairing fonts, serif vs sans, line length, readability, and what a typeface signals. Guides and a live tool.
13 guidesai design system
AI tools build interfaces and images fast but don't hold a system. How design tokens and a named palette keep AI output on-brand — guides and a live tool.
9 guidesCommon questions
Is it free?
Yes. The tool is free and requires no account. Your work lives in your browser, and a session is shared by copying a link — the whole state travels in the URL.
What is a design token?
A named design decision — like color.brand.500 or spacing.md — stored as data so every tool and platform reads the same value. Our design tokens guide covers the idea in depth.
Which formats can I export?
CSS custom properties, Tailwind v4 @theme and Tailwind v3 config, a shadcn/ui theme, Figma Variables, and grid CSS with media queries — all generated from the same session.
What makes this different from a palette generator?
A palette generator gives you colors; this derives a system. One scale shapes the color ramps, the type sizes, the spacing and the grid together, and semantic roles with WCAG contrast floors are derived from your choices instead of picked by hand.
Does it work for dark mode?
Yes — dark mode is generated as its own derivation with its own lightness curve, not as an inversion of the light theme. The dark mode guide explains why that distinction matters.
Can I use it for an existing brand?
Yes. Seed the brand palette with your exact brand color and the ramps, neutrals and semantic roles are derived around it — the scale adapts to your color, not the other way around.