Layout

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.

Space static
4px
4px
50
8px
8px
100
12px
12px
150
16px
16px
200
24px
24px
300
32px
32px
400
40px
40px
500
48px
48px
600
Space dynamic
4px
4px
8px
8px
50
8px
8px
12px
12px
100
12px
12px
16px
16px
150
16px
16px
24px
24px
200
24px
24px
32px
32px
300
32px
32px
40px
40px
400
40px
40px
48px
48px
500
48px
48px
56px
56px
600

Size tokens

Size tokens define the height or width of an element or container.

Size static
8px
8px
100
16px
16px
200
20px
20px
250
24px
24px
300
32px
32px
400
48px
48px
600
64px
64px
800
80px
80px
1000
96px
96px
1200
104px
104px
1300
112px
112px
1400
Size dynamic
8px
8px
16px
16px
100
16px
16px
24px
24px
200
20px
20px
24px
24px
250
24px
24px
32px
32px
300
32px
32px
48px
48px
400
48px
48px
64px
64px
600
64px
64px
80px
80px
800
80px
80px
96px
96px
1000
96px
96px
104px
104px
1200
104px
104px
112px
112px
1300
112px
112px
120px
120px
1400
Max width
400px
400px
small
600px
600px
medium
800px
800px
large