Design Spacing Scale Calculator
Itakda ang base spacing, ratio, starting step, at token count para gumawa ng malinaw na scale para sa interface.
Magtakda ng values para bumuo ng spacing scale.
Spacing tokens
Ni-round mula sa base × ratio^step.
Paano gamitin
Paano gamitin
- Maglagay ng positive base value, pumili ng px o rem, at magtakda ng ratio na higit sa 1.
- Pumili ng starting step at bilang ng token.
- Suriin ang rounded values, saka kopyahin o i-download ang CSS custom properties.
Geometric token ladder
Bawat token ay base × ratio^step. Kasama ang base kapag 0 ang starting step.
Malinaw na rounding
Ang px ay nearest whole pixel; ang rem ay hanggang apat na decimal places. Ipinapakita ng CSS comment ang formula.
Local na CSS output
Sa browser lang ginagawa ang calculation. Walang design value o project file na ina-upload.
Mga madalas itanong
Maaari mo ring alamin
Bakit niroround ang pixels?
Mas madaling gamitin ang whole pixels sa maraming token set.
Ano ang starting step?
Ang 0 ay base; ang 1 ay base × ratio. Ang negative step ay gumagawa ng mas maliit na value.
Pinipili ba nito ang best design system?
Hindi. Predictable mathematical scale lang ang ginagawa nito.