yukt.tools
design tokens

Spacing Scale Generator

Generate linear CSS spacing variables, scan the rhythm, and copy the token block that matches your rem base.

12 tokens ready

Scale recipe

4px base / 12 steps / 16px rem base

--space-1

Positive pixel value. Blank uses 4 px.

px

Whole number from 1 to 128. Blank uses 12.

steps

Positive pixel value. Blank uses 16 px.

px per rem

Starts with a letter. Numbers and single hyphens are supported.

css var

--space-1, --space-2, --space-3

Generated scale

12 spacing tokens from 4px to 48px using a 4px base and 16px rem base.

Tokens

12

space

Range

4px to 48px

linear scale

Base

4px

0.25rem first step

REM base

16px

3rem final step

Token scan

12 tokens with px and rem values.

  1. --space-1
    4px0.25rem
  2. --space-2
    8px0.5rem
  3. --space-3
    12px0.75rem
  4. --space-4
    16px1rem
  5. --space-5
    20px1.25rem
  6. --space-6
    24px1.5rem
  7. --space-7
    28px1.75rem
  8. --space-8
    32px2rem
  9. --space-9
    36px2.25rem
  10. --space-10
    40px2.5rem
  11. --space-11
    44px2.75rem
  12. --space-12
    48px3rem
Related tools and guides
design

Aspect Ratio Calculator

Simplify aspect ratios and calculate scaled width or height.

open
design

CSS Clamp Calculator

Generate a responsive CSS clamp() value from minimum and maximum sizes and viewport widths.

open
design

Color Converter

Convert HEX, RGB, and HSL colors into copy-ready values.

open
design

Contrast Checker

Check foreground and background colors against WCAG AA and AAA contrast thresholds.

open