Goodfolk Design Utilities
Spacing Scale Generator
Generate consistent spacing values in pixels and rems for UI layouts, CSS variables, and design systems.
A 4px or 8px spacing base keeps layouts consistent across padding, margin, gaps, cards, sections, and components.
Spacing scale
space-1
4px
0.250rem
space-2
8px
0.500rem
space-3
12px
0.750rem
space-4
16px
1.000rem
space-5
20px
1.250rem
space-6
24px
1.500rem
space-7
28px
1.750rem
space-8
32px
2.000rem
space-9
36px
2.250rem
space-10
40px
2.500rem
space-11
44px
2.750rem
space-12
48px
3.000rem
CSS variables
--space-1: 0.250rem; /* 4px */ --space-2: 0.500rem; /* 8px */ --space-3: 0.750rem; /* 12px */ --space-4: 1.000rem; /* 16px */ --space-5: 1.250rem; /* 20px */ --space-6: 1.500rem; /* 24px */ --space-7: 1.750rem; /* 28px */ --space-8: 2.000rem; /* 32px */ --space-9: 2.250rem; /* 36px */ --space-10: 2.500rem; /* 40px */ --space-11: 2.750rem; /* 44px */ --space-12: 3.000rem; /* 48px */
Tailwind-style spacing object
spacing: {
"1": "0.250rem",
"2": "0.500rem",
"3": "0.750rem",
"4": "1.000rem",
"5": "1.250rem",
"6": "1.500rem",
"7": "1.750rem",
"8": "2.000rem",
"9": "2.250rem",
"10": "2.500rem",
"11": "2.750rem",
"12": "3.000rem",
}Related tools
HEX Color Converter
Convert HEX colors to RGB and HSL, preview the color, and copy CSS-friendly values.
Color Contrast Checker
Check contrast between text and background colors and see basic WCAG-style pass/fail guidance.
Color Palette Generator
Generate color palettes from a base color, lock favorite colors, and copy HEX values or CSS variables.