Overview
Layout design tokens provide standardized values that help ensure consistent spacing, sizing, and layout structure across Firefox experiences on Android.
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 |
Usage
Static tokens
Static tokens stay consistent across window sizes.
- Use for all spacing (top, bottom, left, right) in smaller components like Buttons, CFRs, and Chips.
- In larger full-width elements, use for top and bottom spacing.
- Use when text is paired with an icon.
Dynamic tokens
Dynamic tokens change across window sizes.
- Use for left and right spacing in full-width elements like app bars, banners, sheets, etc.
- Don't use for top and bottom spacing.
- Don't use when pairing text and icons that go together, as too much spacing can harm usability.
Space tokens
Space tokens define the padding inside elements and the spacing between them.
Size tokens
Size tokens define the height or width of images, illustrations, icons, or a fixed height of a component.
Max-width tokens
Max-width tokens define the maximum width of an element or container. This is to prevent components from stretching too wide on large-screen devices.
