Spacing Scale Generator
Linear or modular spacing tokens in px or rem
The 1× step every other step is derived from. 4px and 8px are the common grid bases; md always equals this value.
How many stops the ladder has. Fewer steps force clearer decisions; more steps risk neighbours that are visually identical.
Multiples of the base: 0.5×, 1×, 2×, 3×… Even gaps that map cleanly onto a pixel grid.
rem is computed at the 16px browser default, so tokens scale with the user's font-size preference.
Keep this scale. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
:root {
--space-sm: 0.125rem; /* 2px */
--space-md: 0.25rem; /* 4px */
--space-lg: 0.5rem; /* 8px */
--space-xl: 0.75rem; /* 12px */
--space-2xl: 1rem; /* 16px */
--space-3xl: 1.25rem; /* 20px */
--space-4xl: 1.5rem; /* 24px */
--space-5xl: 1.75rem; /* 28px */
}// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'sm': '0.125rem',
'md': '0.25rem',
'lg': '0.5rem',
'xl': '0.75rem',
'2xl': '1rem',
'3xl': '1.25rem',
'4xl': '1.5rem',
'5xl': '1.75rem',
}
}
}
}{
"sm": "0.125rem",
"md": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"3xl": "1.25rem",
"4xl": "1.5rem",
"5xl": "1.75rem"
}Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
- Token GeneratorBuild the CSS custom properties every block in the catalog is styled against — a full light and dark set in the shadcn convention. Colour maths in OKLCH, so one lightness scale works across every hue.
- Typography PlaygroundPick from 11 curated font pairings — each with the reasoning written down — tune weight / line-height / letter-spacing / paragraph-spacing, and generate a modular type scale with one of 5 ratio presets. Emits next/font, which self-hosts.
- Grid GeneratorPaint a page layout onto a grid and copy the CSS, with grid-template-areas checked for the rectangle rule as you go — the rule that silently voids the whole declaration when you break it. Explicit tracks or a responsive auto-fit wall.