The secret to making a website look organized, not random
AI-built websites often look almost right but not quite, because their spacing is random, like 13 pixels in one section and 27 in another. A uniform scale locks down the options, ensuring every margin and text size comes from the same system. You choose a base unit of 4 or 8 pixels, a base text size between 16 and 18, and a growth ratio of 1.2, 1.25, or 1.333. The tool generates ten spacing steps and eight text sizes, from footnotes to main headings, displaying each step visually. The copyable code is a :root block with CSS variables in rem units. Everything is calculated in your browser.
This is the standard unit in modern design systems. All spaces are multiples of it, which creates that organized feeling.
It is the ratio between one text size and the next. A higher ratio creates a more dramatic difference between headings and body text.
The rem unit is based on the font size the user set in their browser. Someone who enlarged text for accessibility reasons will get the whole site scaled up by the same ratio, which does not happen with pixels. The calculation is 16 pixels to one rem.
Paste the variables block and explicitly tell it that every space and text size must only use these variables. Without this instruction, it will keep inventing values.
A ratio of 1.25 fits most websites. Use 1.2 when there is a lot of continuous text, and 1.333 for a landing page with large headings. With a base of 16, the main heading comes out to 49 pixels at a 1.25 ratio and 67 at a 1.333 ratio.
Klix could not load
Try reloading the page first. If a new version just went out, a reload fixes it straight away.
If reloading did not help, your browser may be too old. Klix runs the tools on your own device rather than on a server, so it needs a browser from 2022 or later. What to do: update Chrome or Firefox, then open klixtools.com again.