© 2024 AI Usage by Countries. Spacing scale - what is the purpose?

Spacing Scale | mysimulator.uk

Q: &copy; 2024 AI Usage by Countries. Spacing scale - what is the purpose?

&copy; 2024 AI Usage by Countries. Spacing scale.

Consistent spacing steps for layout, components, and density modes

Use a 4px base step. Standard scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64. Keep no half-pixels; use multiples for rhythm.

This provides a flexible system for creating consistent spacing throughout the design.

Use tokens, never ad-hoc values.

Vertical rhythm: maintain consistent top/bottom spacing between sections.

Tokens are reusable and ensure consistency across projects. Avoid manually setting spacing values.

live demo · related simulation● LIVE

Internal vs external spacing: use larger values for section separation

Support default and compact. Compact reduces by ~20% (except minimum 8px touch targets remain ≥44px overall with padding).

This allows for clear visual hierarchy while maintaining a consistent scale.

Frequently asked questions

What is the recommended approach to reducing spacing gaps on smaller mobile screens?

On mobile, reduce large gaps by one step (e.g., 64→48, 48→40). Keep gutters at least 16px.

How should I manage CSS variables and JSON tokens related to the spacing system?

Expose CSS variables and JSON tokens (space-1..space-10). In Figma, set spacing tokens and auto-layout presets. Enforce in linting for design handoff.

What is the last updated date for this Design System?

Last updated: 2024 | Design System

▶ Try it live

Everything above runs in your browser — open Hash Function Avalanche Visualizer and change the parameters while it is running. Nothing is installed, nothing is uploaded, the whole model lives in one tab.

▶ Open Hash Function Avalanche Visualizer simulation