Disclaimer for 2022: this was developed in 2019/2020 as an exploration and proof of concept, but not formally adopted by Xbox or the XDS system :) Refer to everything with caution and reach out to laweldon@microsoft.com for any questions!
In short, we can use the 8pt grid system to inform units for rem, pixels,
and time. Grids for each platform are designed from these units, and
components often utilize these units for padding and margins. One
exception to these units is with the vertical centering of text. For
example, with Bahnschrift, there can be slight adjustments to best
achieve perceived uniformity in vertical justification.
To summarize: 1x = 1.00 = 1rem = 8px = 8sec = 8000ms.
| Unit | Decimal | REM | Pixels | Seconds | Milliseconds |
|---|---|---|---|---|---|
| 1/128x | 0.0078125 | 0.0625sec | 62.5ms | ||
| 1/64x | 0.0156 | 0.125sec | 125ms | ||
| 1/48x | 0.166 | 0.666sec | 666ms | ||
| 1/32x | 0.03125 | 0.25sec | 250ms | ||
| 1/24x | 0.0146667 | 0.333sec | 333ms | ||
| 1/16x | 0.0625 | 0.5sec | 500ms | ||
| 1/8x | 0.125 | 0.125rem | 1px | 1sec | 1000ms |
| 1/4x | 0.25 | 0.25rem | 2px | 2sec | |
| 1/2x | 0.5 | 0.5rem | 4px | 4sec | |
| 1x | 1 | 1rem | 8px | 8sec | |
| 3/2x | 1.5 | 1.5rem | 12px | ||
| 2x | 2 | 2rem | 16px | ||
| 3x | 3 | 3rem | 24px | ||
| 4x | 4 | 4rem | 32px | ||
| 5x | 5 | 5rem | 40px | ||
| 6x | 6 | 6rem | 48px | ||
| 7x | 7 | 7rem | 56px | ||
| 8x | 8 | 8rem | 64px | ||
| 9x | 9 | 9rem | 72px | ||
| 10x | 10 | 10rem | 80px | ||
| 11x | 11 | 11rem | 88px | ||
| 12x | 12 | 12rem | 96px | ||
| 13x | 13 | 13rem | 104px | ||
| 14x | 14 | 14rem | 112px | ||
| 15x | 15 | 15rem | 120px | ||
| 16x | 16 | 16rem | 128px | ||
| ... | ... | ... |
