spacing-scale

Name: spacing-scale
Author: dylantarre

33stars3forks

How to install spacing-scale?

dylantarre/design-system-skills/spacing-scale

$npx -y skills add dylantarre/design-system-skills --skill spacing-scale

Installs into the current project.

Summary

Generates consistent spacing tokens using base values and ratios. Use when creating margin/padding systems, gap tokens, or layout spacing. Outputs CSS custom properties, Tailwind config, or JSON tokens.

Files · 1

View on GitHub

SKILL.md

1	# Spacing Scale Generator
2
3	## Overview
4
5	Generate consistent spacing scales using a base value and ratio. Creates exponentially distributed values centered around a base unit for harmonious layouts.
6
7	## When to Use
8
9	- Setting up spacing tokens for a new project
10	- Standardizing padding and margin values
11	- Creating a gap/grid system
12	- Migrating from arbitrary spacing to tokens
13
14	## Quick Reference
15
16	\| Naming Style \| Example Names \| Best For \|
17	\|--------------\|---------------\|----------\|
18	\| T-shirt \| xs, sm, md, lg, xl \| Semantic, readable \|
19	\| Numeric \| 100, 200, 300... \| Precise, extensible \|
20
21	\| Unit \| When to Use \|
22	\|------\|-------------\|
23	\| px \| Fixed layouts, pixel-perfect designs \|
24	\| rem \| Scalable, respects user font settings \|
25	\| em \| Component-relative spacing \|
26
27	## The Process
28
29	1. Get base value: Default 4px or 0.25rem (common base unit)
30	2. Get ratio: How much each step grows (1.5 is balanced, 2 is dramatic)
31	3. Ask steps: How many spacing values (8-12 is typical)
32	4. Ask naming: T-shirt sizes (xs, sm, md, lg) or numeric (100, 200, 300)?
33	5. Ask unit: px, rem, or em?
34	6. Ask format: CSS, Tailwind, or JSON?
35	7. Generate: Create scale centered on base, expanding in both directions
36
37	## Common Ratios
38
39	\| Ratio \| Character \| Example (base 4px) \|
40	\|-------\|-----------\|-------------------\|
41	\| 1.25 \| Tight \| 2, 2.5, 3, 4, 5, 6, 8 \|
42	\| 1.5 \| Balanced \| 1.8, 2.7, 4, 6, 9, 13.5 \|
43	\| 1.618 \| Golden \| 1.5, 2.5, 4, 6.5, 10.5, 17 \|
44	\| 2 \| Dramatic \| 1, 2, 4, 8, 16, 32 \|
45
46	## Output Formats
47
48	CSS Custom Properties:
49	```css
50	:root {
51	--spacing-xs: 2px;
52	--spacing-sm: 4px;
53	--spacing-md: 8px;
54	--spacing-lg: 16px;
55	--spacing-xl: 32px;
56	}
57	```
58
59	Tailwind Config:
60	```js
61	module.exports = {
62	theme: {
63	spacing: {
64	'xs': '2px',
65	'sm': '4px',
66	'md': '8px',
67	'lg': '16px',
68	'xl': '32px',
69	}
70	}
71	}
72	```
73
74	JSON Tokens:
75	```json
76	{
77	"spacing": {
78	"xs": "2px",
79	"sm": "4px",
80	"md": "8px",
81	"lg": "16px",
82	"xl": "32px"
83	}
84	}
85	```
86
87	## Algorithm
88
89	The scale is centered on the base value at the midpoint:
90
91	```
92	value = baseValue * (ratio ^ (step - midpoint))
93	```
94
95	For a 10-step scale with base 4 and ratio 1.5:
96	- Step 0 (5 below mid): 4 * 1.5^-5 = 0.53
97	- Step 5 (midpoint): 4 * 1.5^0 = 4
98	- Step 9 (4 above mid): 4 * 1.5^4 = 20.25
99
100	## T-shirt Size Mapping
101
102	Full range: 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl
103
104	The midpoint of your scale maps to "md" and expands outward.

People who liked this also viewed

6 picks

Type

spacing-scale

33stars3forks

View on GitHub

How to install spacing-scale?

dylantarre/design-system-skills/spacing-scale

$npx -y skills add dylantarre/design-system-skills --skill spacing-scale

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Spacing Scale Generator
2
3	## Overview
4
5	Generate consistent spacing scales using a base value and ratio. Creates exponentially distributed values centered around a base unit for harmonious layouts.
6
7	## When to Use
8
9	- Setting up spacing tokens for a new project
10	- Standardizing padding and margin values
11	- Creating a gap/grid system
12	- Migrating from arbitrary spacing to tokens
13
14	## Quick Reference
15
16	\| Naming Style \| Example Names \| Best For \|
17	\|--------------\|---------------\|----------\|
18	\| T-shirt \| xs, sm, md, lg, xl \| Semantic, readable \|
19	\| Numeric \| 100, 200, 300... \| Precise, extensible \|
20
21	\| Unit \| When to Use \|
22	\|------\|-------------\|
23	\| px \| Fixed layouts, pixel-perfect designs \|
24	\| rem \| Scalable, respects user font settings \|
25	\| em \| Component-relative spacing \|
26
27	## The Process
28
29	1. Get base value: Default 4px or 0.25rem (common base unit)
30	2. Get ratio: How much each step grows (1.5 is balanced, 2 is dramatic)
31	3. Ask steps: How many spacing values (8-12 is typical)
32	4. Ask naming: T-shirt sizes (xs, sm, md, lg) or numeric (100, 200, 300)?
33	5. Ask unit: px, rem, or em?
34	6. Ask format: CSS, Tailwind, or JSON?
35	7. Generate: Create scale centered on base, expanding in both directions
36
37	## Common Ratios
38
39	\| Ratio \| Character \| Example (base 4px) \|
40	\|-------\|-----------\|-------------------\|
41	\| 1.25 \| Tight \| 2, 2.5, 3, 4, 5, 6, 8 \|
42	\| 1.5 \| Balanced \| 1.8, 2.7, 4, 6, 9, 13.5 \|
43	\| 1.618 \| Golden \| 1.5, 2.5, 4, 6.5, 10.5, 17 \|
44	\| 2 \| Dramatic \| 1, 2, 4, 8, 16, 32 \|
45
46	## Output Formats
47
48	CSS Custom Properties:
49	```css
50	:root {
51	--spacing-xs: 2px;
52	--spacing-sm: 4px;
53	--spacing-md: 8px;
54	--spacing-lg: 16px;
55	--spacing-xl: 32px;
56	}
57	```
58
59	Tailwind Config:
60	```js
61	module.exports = {
62	theme: {
63	spacing: {
64	'xs': '2px',
65	'sm': '4px',
66	'md': '8px',
67	'lg': '16px',
68	'xl': '32px',
69	}
70	}
71	}
72	```
73
74	JSON Tokens:
75	```json
76	{
77	"spacing": {
78	"xs": "2px",
79	"sm": "4px",
80	"md": "8px",
81	"lg": "16px",
82	"xl": "32px"
83	}
84	}
85	```
86
87	## Algorithm
88
89	The scale is centered on the base value at the midpoint:
90
91	```
92	value = baseValue * (ratio ^ (step - midpoint))
93	```
94
95	For a 10-step scale with base 4 and ratio 1.5:
96	- Step 0 (5 below mid): 4 * 1.5^-5 = 0.53
97	- Step 5 (midpoint): 4 * 1.5^0 = 4
98	- Step 9 (4 above mid): 4 * 1.5^4 = 20.25
99
100	## T-shirt Size Mapping
101
102	Full range: 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl
103
104	The midpoint of your scale maps to "md" and expands outward.

People who liked this also viewed

6 picks

Type