How to get off Tailwind's scale without breaking anything.

Six font sizes, not twenty

Pick six sizes and use nothing else: one for labels, one for body text and four for headings. Make the jumps between them obvious. An 86 px heading over 17 px text tells you what matters; a 30 px heading over 16 px text barely does.

A starting point: pick your body size and multiply by 1.5 for each heading level. With 17 px text you get 25, 38, 57 and 86 px, plus 14 px for labels. It's not a sacred formula. Try it with your own copy and adjust the largest heading until your most important line fits on two lines.

Spacing that comes from your text

Same with spacing, and seven values are plenty. Instead of picking them from a list, derive them from a line of your text: at 17 px with 1.5 line height, a line is about 26 px tall. Its fractions and multiples give you the scale: 6, 13, 26, 39, 52, 104 and 156 px.

What matters is that distance means something. Little space between things that belong together (a heading and its subhead), lots between things that don't (one section and the next). If everything sits 24 or 32 px apart, everything looks equally related and the page has no rhythm.

Put it in variables, not one-off classes

Write the scale once, in one place, and use only that:

:root {
  /* type: 17 px body, each level x1.5 */
  --t-label: 14px;
  --t-body: 17px;
  --t-3: 25px;
  --t-2: 38px;
  --t-1: 57px;
  --t-0: 86px;

  /* spacing: one line (17 x 1.5 = 26 px), its fractions and multiples */
  --s-1: 6px;
  --s-2: 13px;
  --s-3: 26px;
  --s-4: 39px;
  --s-5: 52px;
  --s-6: 104px;
  --s-7: 156px;
}

If you use Tailwind, move these values into its theme and reset the defaults, so the model has nowhere else to pull values from.

The prompt

To make the AI stick to the scale, give it the numbers and the rule for when to use each:

Only use these font sizes: 14, 17, 25, 38, 57 and 86 px (--t-* variables). Only use these spacing values: 6, 13, 26, 39, 52, 104 and 156 px (--s-* variables). Don't use any other size or spacing value, including Tailwind's default classes. Things that belong together sit close: heading and subhead 13 px apart. Things that don't sit far apart: 156 px between sections. If a design needs a value that isn't on the list, ask me before making one up.

Then check your site with the Slop Score: among other things, it flags when almost all your spacing is the same value. And if you want more prompts like this one, one per change, they're in the prompts guide.