// RATIO:
// BASE:
// SCALE:
// DIRECTION:
// STEPS:
↑
↓
// RATIO:
// BASE:
// SCALE:
// DIRECTION:
// STEPS:
↑
↓
Grid System
//BASE: 16px//RATIO: 1.25//SCALE: modular//STEPS: 2 down, 9 up
//MATHEMATICS: base × ratio^n (up) / base ÷ ratio^n (down)
// CONTROLS:
10.24px
12.8px
16px
20px
25px
31.25px
39.06px
48.83px
61.04px
76.29px
95.37px
119.21px
Calculated Values
Step
Value (px)
Rem
CSS Variable
Ratio
-2
10.24px
0.640rem
--space-n2
÷1.25^2
-1
12.8px
0.800rem
--space-n1
÷1.25
0
16px
1.000rem
--space-base
base
+1
20px
1.250rem
--space-1
×1.25
+2
25px
1.563rem
--space-2
×1.25^2
+3
31.25px
1.953rem
--space-3
×1.25^3
+4
39.06px
2.441rem
--space-4
×1.25^4
+5
48.83px
3.052rem
--space-5
×1.25^5
+6
61.04px
3.815rem
--space-6
×1.25^6
+7
76.29px
4.768rem
--space-7
×1.25^7
+8
95.37px
5.960rem
--space-8
×1.25^8
+9
119.21px
7.451rem
--space-9
×1.25^9