Loading...
Generate a consistent spacing scale for your design system
A spacing scale is a predefined set of consistent spacing values (margins and paddings) based on a base unit, used in design systems to maintain visual rhythm and harmony across a UI.
--space-0: 0rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-9: 2.25rem; --space-10: 2.5rem; --space-11: 2.75rem; --space-12: 3rem;
spacing: {
'0': '0rem',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'7': '1.75rem',
'8': '2rem',
'9': '2.25rem',
'10': '2.5rem',
'11': '2.75rem',
'12': '3rem',
}The scale is generated by multiplying the base step by each step number. This creates a linear progression that's easy to remember and apply consistently.
space-0 = 4 x 0 = 0px
space-1 = 4 x 1 = 4px
space-2 = 4 x 2 = 8px
space-4 = 4 x 4 = 16px
...and so onFormula
space-n = baseStep × n | rem = px / 16baseStep = Base spacing unit in pixels (commonly 4px or 8px)
n = Step index (0, 1, 2, 3…) multiplied by the base step
rem = Root-relative unit — px value divided by browser base font size (16px)
Worked Example
8px base, step 4 → space-4
Did you know? The 8px grid system is popular because most screens have pixel densities that divide evenly by 8, making it easier to produce sharp, pixel-perfect UIs without antialiasing artifacts.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Convert width/height to aspect ratios, scale dimensions, and generate responsive embed CSS for any layout.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.