About Scale Composer

Scale Composer derives a whole design system — type scale, color ramps, spacing, and grid — from one base size, one ratio, and a note count. Change the ratio and everything moves together, because everything is computed from the same three numbers.

Why one scale?

Most design systems are assembled from separate tools: a type scale calculator here, a palette generator there, spacing by convention. Each piece can be fine on its own and still not belong to the others. The premise of this tool is that the relationships are the system — so the numbers that space your headings should be the numbers that shape your color ramps and your grid.

How it works

The scale is the musical one: a base value multiplied by a constant ratio, subdivided into notes the way an octave divides into tones. Typography reads sizes straight off the scale. Color ramps use it to shape their lightness curves. Spacing and the layout grid take their steps from the same sequence. Semantic color roles — text, borders, buttons, states — are derived automatically, with WCAG contrast floors checked as you work, and dark mode generated as its own derivation rather than an inversion.

Everything exports without lock-in: CSS custom properties, Tailwind (v4 and v3), shadcn/ui themes, and Figma Variables. Sessions share as links — the whole state is encoded in the URL, no account involved.

This site runs on its own output

The pages you are reading are styled by the tool's own export: base 16, ratio 1.333, two notes. The greens, the neutrals, the radii, the shadows and the type sizes all come from one generated tokens file. If the design holds together, that is the argument working.

Who makes it

Scale Composer is built in Sweden, as part of a larger toolchain for building brand and design systems — the tool is the public face of machinery used in real client work. The guides in Learn are written to be useful on their own; the tool is there when you want to try the ideas with your own numbers.

Open Scale Composer — free, in the browser, no signup.