Semantic Scales
Interactive demo of the 8 mathematical spacing progressions: linear, fibonacci, golden ratio, modular, perfect fourth, augmented fourth, minor second, and major second.
This site uses a unified semantic scales system for spacing, border-radius, and animation duration. Each progression follows a different mathematical ratio, giving you distinct visual rhythms to choose from.
Use data-scale="..." on any container to switch progressions, or apply classes like .scale-phi or .scale-fib.
Mathematical Reference
See how each progression works mathematically. Select a scale to view its formula and step-by-step breakdown.
Scale Info
step × 0.25remLinear progression adds a constant amount at each step, creating evenly-spaced intervals.
Step Breakdown
| Step | Value | × Base | vs Prev |
|---|
Ratio Calculator
Compare any two steps to see their mathematical relationship.
At a Glance
Each progression distributes space differently. Dots show steps from smallest to largest.
Size Tokens
Spacing values from --size-3xs to --size-5xl
Radius Tokens
Border radius from --radius-xs to --radius-3xl
Duration Tokens
Animation timing from --duration-xs to --duration-3xl
Grid Gaps
Same 3×3 grid with different gap sizes using --size-*
Padding & Margins
Content boxes showing inner padding at each step
Inline Spacing
Horizontal gaps between elements (tags, buttons, icons)
Stack Spacing
Vertical rhythm between content blocks
Card Component
Full component using scale tokens for padding, gaps, and radius
This card uses --size-* for padding and gaps, --radius-* for corners, and --duration-* for hover transitions.
Compare All Scales
All 8 progressions side by side — same components, different rhythms
Grid Gaps --size-md
Padding --size-md
Tag Spacing --size-sm
Stack --size-md
Border Radius --radius-lg
Mini Card
Page Mockup
A realistic layout using the active scale. Switch scales above to see how spacing relationships change across the entire composition.
Design System Spacing
Consistent rhythm creates visual harmony. Notice how all spacing — from button padding to section gaps — maintains proportional relationships.
Recent Projects
Typography System
Modular scale for type hierarchy with consistent vertical rhythm.
Color Palette
Accessible color system with semantic tokens and dark mode.
Component Library
Reusable UI components built on the design token foundation.
Get in Touch
Form elements also follow the spacing scale for consistent rhythm.