Core Mathematical Parameters
Design Personalities
Foundation unit for all scaling calculations
Mathematical ratio for harmonic scaling (Major Third = 1.25)
Controls border radius intensity (0 = sharp, 1 = fully rounded)
Physics-based shadow opacity multiplier
📐 Grid System
16px
24px
Live Preview
Mathematical Harmony
This card demonstrates the mathematical relationships between padding, border radius, and shadow calculations based on harmonic ratios.
Input height and padding follow mathematical relationships
Mathematical Formulas
card.padding
harmonic('PERFECT_FIFTH')
button.height
baseUnit × scaleRatio2
shadow.blur
elevation × 2
radius
min(size × roundness, size ÷ 2)
Computed Values
Typography Scale
text-xs
10.24px
text-sm
12.80px
text-base
16.00px
text-lg
20.00px
text-xl
25.00px
Spacing Harmonics
space-1
16px
space-2
18px
space-3
20px
space-6
24px
space-12
32px
Component Values
button-height-md
31.25px
card-padding
24px
button-radius
8px
input-height
35.16px