Sizing

Width and height tokens — the numeric step scale, named container sizes, and layout keywords.

Sizing tokens set explicit widths and heights. They share the numeric step scale with spacing, then add named container sizes (xs–7xl), a prose reading measure, and layout keywords (full, min, max, fit, and the viewport units).

Token	Value	Pixels	Description
1	4px	4px	Extra small size (4px)
2	8px	8px	Small size (8px)
3	12px	12px	Medium-small size (12px)
4	16px	16px	Medium size (16px)
5	20px	20px	Medium-large size (20px)
6	24px	24px	Large size (24px)
7	28px	28px	Extra large size (28px)
8	32px	32px	2x large size (32px)
9	36px	36px	3x large size (36px)
10	40px	40px	40px
11	44px	44px	44px
12	48px	48px	48px
14	56px	56px	56px
16	64px	64px	64px
20	80px	80px	80px
24	96px	96px	96px
28	112px	112px	112px
30	120px	120px	120px
32	128px	128px	128px
36	144px	144px	144px
40	160px	160px	160px
44	176px	176px	176px
48	192px	192px	192px
50	200px	200px	200px
52	208px	208px	208px
56	224px	224px	224px
60	240px	240px	240px
64	256px	256px	256px
72	288px	288px	288px
80	320px	320px	320px
96	384px	384px	384px
px	1px	1px	Single hairline pixel
half	2px	2px	Half step (2px)
1.5	6px	6px	Between extra small and small (6px)
2.5	10px	10px	Between small and medium-small (10px)
3.5	14px	14px	Between medium-small and medium (14px)
full	100%	—	Full width of the parent container
min	min-content	—	Shrink to the minimum content size
max	max-content	—	Expand to the maximum content size
fit	fit-content	—	Fit to content size within available space
dvh	100dvh	—	Full dynamic viewport height, adjusts for mobile browser chrome
svh	100svh	—	Small viewport height, smallest possible viewport
lvh	100lvh	—	Large viewport height, largest possible viewport
dvw	100dvw	—	Full dynamic viewport width
svw	100svw	—	Small viewport width
lvw	100lvw	—	Large viewport width
vw	100vw	—	Full viewport width
vh	100vh	—	Full viewport height