Mobile Spacing Scale Generator
Build a spacing system for Android and iOS from one base unit, then preview how each token renders at common densities and Retina scales.
Generate a mobile spacing system
Start from a base unit, choose how aggressive the scale should be, and instantly preview the same spacing token in logical units plus Android and iOS pixel outputs.
Base 4 · Ratio 1.25 · 8 tokens
| Token | Logical unit | Android px | iOS px | Preview |
|---|---|---|---|---|
| 2xs | 4dp / pt | 8px | 12px | |
| xs | 5dp / pt | 10px | 15px | |
| sm | 6.5dp / pt | 13px | 19.5px | |
| md | 8dp / pt | 16px | 24px | |
| lg | 10dp / pt | 20px | 30px | |
| xl | 12.5dp / pt | 25px | 37.5px | |
| 2xl | 15.5dp / pt | 31px | 46.5px | |
| 3xl | 19.5dp / pt | 39px | 58.5px |
More Mobile Dev Tools
DP to PX Converter
Convert Android density-independent pixels into device pixels.
PX to DP Converter
Turn raw pixel measurements back into Android dp units.
SP to PX Converter
Preview Android typography values across density and font scale.
PX to SP Converter
Reverse Android text pixels into scale-independent units.
Start simple
Most product teams begin with a 4-point or 8-point base and then decide whether they want linear spacing or a slightly more expressive ratio for larger gaps.
Great for handoff
The table makes it easier to hand the same token set to design, Android, and iOS teams while still exposing the real pixel consequences on each platform.