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, and who writes the guides

Scale Composer is built and published in Sweden by a working designer, not by a content studio. The tool is the public face of machinery used in real client work — brand and design systems built for paying clients, where the token file this tool exports is consumed by the systems that render the finished sites.

Every guide in Learn is written by the same hand that builds the tool. That is deliberate, and it is why the guides can be specific where most articles on these topics are general: the contrast floors, the chroma ceilings and the rounding rules described there are the ones implemented in the generator, tested against fixed expected values, and corrected whenever the tool proved them wrong. Where a guide states a formula, that formula is running a few hundred pixels further down the page.

Guides are dated and revised rather than republished. If a browser ships a change, a specification moves, or a reader points at a sentence that is wrong, the article is corrected and the date updated — corrections are welcome and are made in the article itself.

License

What you export is yours. The tokens, CSS, Tailwind config, shadcn theme and Figma variables you generate are free to use for anything — personal projects, commercial products, client work. No attribution, no fee, no account. They are derived from the numbers you chose, so they belong to you.

The tool itself is not open source. Scale Composer's generation logic, this site and its guides are © Scale Composer. Free to use, not free to copy, redistribute or resell.

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