Spacing Scale Example

This example demonstrates how to create a consistent spacing system using arrays, functions, and calculations.

Basic Spacing Scale

Spacing Scale as Array

Using Functions for Spacing

Semantic Spacing Tokens

Responsive Spacing

Complete Spacing System

Best Practices

• Use a consistent base: Choose a base unit (4px or 8px) and build from it
• Create arrays for scales: Arrays make it easy to access values by index
• Use functions for calculations: Functions help maintain consistency
• Define semantic tokens: Create named tokens (xs, sm, md) for better readability
• Consider theme variants: Create compact or comfortable spacing themes

Related

• Tokens Reference
• Functions Reference
• Typography Example