Overview
Layout design tokens provide standardized values that help ensure consistent spacing, sizing, and layout structure across Firefox experiences on Android.
Currently, there are two systems of tokens, spacing and sizing. For both, there are static values (consistent across window sizes) and dynamic values (changes across window sizes).
Window size
We support three window sizes to match an Android API. Keep in mind that the Firefox app can be resized on large tablets, rescaled on foldables, and resized on Chromebooks.
Name |
Value |
Description |
---|---|---|
small |
<600 |
Most phones in portrait |
medium |
600-840 |
Most tablets in portrait, phones in landscape |
large |
>840 |
Most tablets in landscape, Chromebooks |
Space tokens
Space tokens define the white space and arrangement between elements.
Size tokens
Size tokens define the height or width of an element or container.