Spacing Scale Tokens

Quick implementation

:root {
  --space-1: 0.25rem;
  --space-2: 0.31rem;
  --space-3: 0.39rem;
  --space-4: 0.49rem;
  --space-5: 0.61rem;
  --space-6: 0.76rem;
  --space-7: 0.95rem;
  --space-8: 1.19rem;
  --space-9: 1.49rem;
  --space-10: 1.86rem;
  --space-11: 2.33rem;
  --space-12: 2.91rem;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Act as a senior CSS architect. Create a spacing scale using CSS custom properties (--space-1 through --space-12) based on a 1.25 ratio starting from 0.25rem. Output the variables in a :root block. Provide two usage examples: one for padding and one for gap in a grid layout. Ensure the values are rounded to two decimal places for consistency.

Why this matters in 2026

Consistent spacing is the backbone of modern layout systems, ensuring visual rhythm across complex interfaces. By using a mathematical ratio, you eliminate guesswork and maintain harmony between components. This approach scales effortlessly from mobile to ultra-wide displays without manual recalibration.

The logic

The 1.25 ratio (often called the Major Third in music theory) provides a balanced progression that feels natural to the human eye. Each step is calculated by multiplying the previous value by 1.25, creating a geometric sequence. This ensures that larger gaps feel proportionally larger, not just linearly increased.

Accessibility & performance

Using CSS custom properties ensures zero runtime performance cost as the browser resolves them during the initial paint. The scale supports reduced motion preferences by allowing developers to adjust spacing dynamically via media queries. This maintains readability and touch target sizes for users with motor impairments.