What is a spacing token?

A spacing token is a named CSS custom property (like --space-md: 1rem) that you reference throughout your stylesheet instead of hardcoding pixel values. Tokens keep margin and padding consistent and make global spacing changes a one-line edit.

What base unit should I use?

4px is the most common design system base (Tailwind, Material, and most Figma templates use it). 8px produces a coarser scale that works well for larger, content-heavy layouts. Use 4px if unsure.

What ratio produces a natural spacing scale?

A ratio of 2 doubles each step (4, 8, 16, 32…) and is the most common choice. A ratio of 1.5 grows more gently (4, 6, 9, 13.5…). A ratio of 1 creates a simple linear scale where every step adds the base value.

What is the difference between T-shirt and numeric naming?

T-shirt names (2xs, xs, sm, md, lg, xl, 2xl, 3xl) communicate intent — a designer can look at --space-sm and understand its role. Numeric names (1 through 9) are more flexible when you need more steps or want to insert values later.

How do I use these tokens in CSS?

Paste the :root block into your global stylesheet, then reference variables anywhere: padding: var(--space-md). To change the scale globally, edit the :root values once and every usage updates automatically.

Can I change the token prefix?

Yes. The prefix field lets you use --space, --spacing, --gap, or any custom name. This is useful when integrating with an existing codebase that already has a naming convention.

Spacing Token Generator

Name: Spacing Token Generator
Availability: InStock
Author: Nham Vu

Set a base unit and ratio to generate named CSS spacing tokens (--space-xs, --space-sm, etc.) ready to paste into your design system.

Base Unit (px)

Tailwind default is 4px. Common: 4, 8.

Scale Ratio

Each step multiplied by this ratio.

Naming Scheme

T-shirt (2xs, xs, sm, md, lg, xl, 2xl, 3xl) Numeric (1 through 9)

Token Prefix

e.g. --space, --spacing, --gap

Root Font Size (px)

Browser default is 16px. Used for rem values.

Output Format

CSS custom properties (:root) SCSS variables ($space-*) Tailwind config (spacing: {})

Token Preview

base 4px · ratio 2×

Token	px	rem	Visual

Copy-Ready Output

Usage Example

Copied!

Summary

Set a base unit and ratio to generate named CSS spacing tokens (--space-xs, --space-sm, etc.) ready to paste into your design system.

How it works

Enter a base unit in pixels — 4px and 8px are common design system defaults.
Choose a scale ratio: 1 gives linear steps, 1.5 or 2 gives exponential growth.
Select a naming scheme: T-shirt sizes (xs → 3xl) or numeric (1–9).
Set a token prefix such as --space or --spacing to match your codebase convention.
Pick CSS custom properties, SCSS variables, or Tailwind config as output format.
Click Copy to grab the complete token block and paste it into your project.

Use cases

Bootstrap a spacing system for a new design system or component library.
Generate margin and padding tokens that match a Figma spacing scale.
Export CSS variables to use as --space-sm, --space-md across a stylesheet.
Create Tailwind-compatible spacing tokens with semantic names instead of numbers.
Preview how a ratio-based scale grows before committing to it in production.
Quickly produce SCSS variables to share with a Sass-based stylesheet.
Match a 4px or 8px grid system with consistent named spacing tokens.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu