Spacing Token Designer

Plan component spacing and density. Sample width warnings and minimum heights do not replace final UI testing.

1. Spacing steps

CSS pixels at a default 16px root. Steps 1–6 must be positive integers and each step must exceed the previous one.

Minimum viewport (240–1600 px)Maximum viewport (up to 2400 px)

Spacing at both viewport bounds
Token	Minimum value	Maximum value
--space-0	0px	0px
--space-1
--space-2
--space-3
--space-4
--space-5
--space-6

Component sample requirements
Component	Minimum content width (1–2000 px)	Content height (1–400 px)
Button
Input field
List row
Card

These planning values apply to both densities. Height sets the preview’s minimum size; real text can wrap beyond it. Width warnings compare inner space with your minimum.

Changing settings updates the table and preview.

2. Spacing by viewport

Calculated pixel values at the default 16px root. Space 0 is fixed at zero.

Token	320px	880px	1440px
--space-0	0px	0px	0px
--space-1	4px	5px	6px
--space-2	8px	10px	12px
--space-3	12px	15px	18px
--space-4	16px	20px	24px
--space-5	24px	30px	36px
--space-6	32px	40px	48px

Cross-width density audit

Checks all four components in both densities at the minimum, midpoint and maximum widths using your sample requirements. Counts show content-width shortages and minimum-height expansion.

Viewport	Preview density	Minimum-height growth
320px	Compact	3
320px	Comfortable	3
880px	Compact	3
880px	Comfortable	1
1440px	Compact	3
1440px	Comfortable	0

3. Component density and constraints

Both densities assign different padding and gap steps from the same tokens. Your sample requirements drive the checks and preview minimum heights.

Preview width: 360 px

Button · Comfortable

Save changes

Input field · Comfortable

NameExample value

List row · Comfortable

Preferences item

Card · Comfortable

Project cardCheck component spacing alongside real content.Updated

Component usage at 360px
Component	Vertical / horizontal padding	Gap	Estimated height	Constraint check
Button	8.14px / 12.21px	4.07px	44px	Expanded to touch target
Input field	8.14px / 12.21px	8.14px	44px	Expanded to touch target
List row	8.14px / 12.21px	8.14px	44px	Expanded to touch target
Card	16.29px / 16.29px	12.21px	128.57px	Pass

4. Export CSS and JSON

CSS includes --space-0–6 and component rules for both densities; comments record your planning sample sizes. JSON includes the scale, samples and assignments. Test actual fonts, labels and zoom.

/* Pixel examples assume a 16px root. rem bounds follow user font settings; test browser zoom and text wrapping in the final layout. */
:root {
  --space-0: 0;
  --space-1: clamp(0.25rem, calc(0.214286rem + 0.178571vw), 0.375rem);
  --space-2: clamp(0.5rem, calc(0.428571rem + 0.357143vw), 0.75rem);
  --space-3: clamp(0.75rem, calc(0.642857rem + 0.535714vw), 1.125rem);
  --space-4: clamp(1rem, calc(0.857143rem + 0.714286vw), 1.5rem);
  --space-5: clamp(1.5rem, calc(1.285714rem + 1.071429vw), 2.25rem);
  --space-6: clamp(2rem, calc(1.714286rem + 1.428571vw), 3rem);
}
/* Apply data-density="compact" or "comfortable" to a .spacing-kit ancestor. */
/* button sample requirement: 96px minimum content width; 20px content height. Planning values only. */
/* field sample requirement: 128px minimum content width; 24px content height. Planning values only. */
/* list sample requirement: 144px minimum content width; 24px content height. Planning values only. */
/* card sample requirement: 160px minimum content width; 96px content height. Planning values only. */
.spacing-kit { box-sizing: border-box; padding-inline: var(--space-2); }
.spacing-kit * { box-sizing: border-box; min-width: 0; }
.spacing-kit :is(.space-button, .space-field, .space-list, .space-card) { display: flex; }
.spacing-kit :is(.space-button, .space-field, .space-list) { align-items: center; }
.spacing-kit .space-card { flex-direction: column; }
.spacing-kit[data-density="compact"] .space-button { padding: var(--space-1) var(--space-2); gap: var(--space-1); min-height: 44px; }
.spacing-kit[data-density="compact"] .space-field { padding: var(--space-1) var(--space-2); gap: var(--space-1); min-height: 44px; }
.spacing-kit[data-density="compact"] .space-list { padding: var(--space-1) var(--space-2); gap: var(--space-1); min-height: 44px; }
.spacing-kit[data-density="compact"] .space-card { padding: var(--space-3) var(--space-3); gap: var(--space-2); }
.spacing-kit[data-density="comfortable"] .space-button { padding: var(--space-2) var(--space-3); gap: var(--space-1); min-height: 44px; }
.spacing-kit[data-density="comfortable"] .space-field { padding: var(--space-2) var(--space-3); gap: var(--space-2); min-height: 44px; }
.spacing-kit[data-density="comfortable"] .space-list { padding: var(--space-2) var(--space-3); gap: var(--space-2); min-height: 44px; }
.spacing-kit[data-density="comfortable"] .space-card { padding: var(--space-4) var(--space-4); gap: var(--space-3); }

Spacing Token Designer

A list of spacing values alone does not show whether a button becomes crowded or a card wastes room. Enter six spacing steps at minimum and maximum viewport widths, and check for zero, negative, out-of-order or shrinking values. Set minimum content width and content height for each button, field, list row and card sample. Intermediate sizes are linearly interpolated. Compare compact and comfortable assignments across the four components, including your sample requirements and a 44px minimum touch height. Export CSS rules and a JSON plan. Width warnings use your planning thresholds; test real labels, fonts, browser zoom and accessibility in the finished product.

Key features

Fixed zero token plus six positive, ordered and non-shrinking steps

Editable minimum content width and height for four component samples

Spacing and density audit at minimum, midpoint and maximum viewport widths

Compact and comfortable previews with 44px touch-height signals

Copy or download CSS clamp tokens, or download the settings as JSON

How to use

Set minimum and maximum viewport widths and enter spacing steps 1–6 in pixels at each bound.

Set each component sample’s minimum content width and content height.

Resolve invalid viewport, step or sample values.

Review the width table and switch between compact and comfortable component density.

Change the preview width and inspect touch-height and content-width signals.

Copy or download CSS, or download JSON; then test with real labels and browser zoom.

Frequently asked questions

Why can I not edit the zero step?

--space-0 is fixed at zero for elements that need no gap. Each of the other six steps must be positive and larger than the preceding step.

How do values change between viewport bounds?

The corresponding values at the two bounds are linearly interpolated. At the default 16px root, CSS clamp holds a bound value outside the configured interval.

What changes between compact and comfortable density?

Both use the same spacing scale. They assign different token steps to padding and gaps for button, field, list and card components. The exported CSS includes both.

Does the minimum height guarantee an accessible touch target?

The sample button, field and row rules have a 44px CSS minimum height. Verify the actual clickable area, text wrapping and zoom settings in the finished interface.

Is a content-width warning a measured overflow error?

No. It compares calculated inner width with the minimum content width you enter for each sample. Real text, icons and font metrics may need a different width.

1. Spacing steps

2. Spacing by viewport

Cross-width density audit

3. Component density and constraints

4. Export CSS and JSON

Comments & questions

Key features

How to use

Use cases

Frequently asked questions

Privacy

Related Tools