Spacing, sizing and elevation

Lengths are rem at a 16px baseline, except strokes and full radius, which stay in px. Use control sizes as minimum heights when content must grow for wrapping or enlarged text. Spacing 8xl and above is for page layout, never component interiors.

SpacingCopy Anchor Link

Token values and CSS variables

Token	CSS variable	Value
none	--pf-spacing-none	0rem
xxs	--pf-spacing-xxs	0.125rem
xs	--pf-spacing-xs	0.25rem
sm	--pf-spacing-sm	0.375rem
md	--pf-spacing-md	0.5rem
lg	--pf-spacing-lg	0.75rem
xl	--pf-spacing-xl	1rem
2xl	--pf-spacing-2xl	1.25rem
3xl	--pf-spacing-3xl	1.5rem
4xl	--pf-spacing-4xl	2rem
5xl	--pf-spacing-5xl	2.5rem
6xl	--pf-spacing-6xl	3rem
7xl	--pf-spacing-7xl	4rem
8xl	--pf-spacing-8xl	5rem
9xl	--pf-spacing-9xl	6rem
10xl	--pf-spacing-10xl	8rem
11xl	--pf-spacing-11xl	10rem

Corner radiusCopy Anchor Link

Token values and CSS variables

Token	CSS variable	Value
none	--pf-radius-none	0rem
xs	--pf-radius-xs	0.25rem
sm	--pf-radius-sm	0.375rem
md	--pf-radius-md	0.5rem
lg	--pf-radius-lg	0.625rem
xl	--pf-radius-xl	0.75rem
2xl	--pf-radius-2xl	1rem
full	--pf-radius-full	9999px

Control heightsCopy Anchor Link

Token values and CSS variables

Token	CSS variable	Value
xs	--pf-control-xs	1.5rem
sm	--pf-control-sm	1.75rem
md	--pf-control-md	2rem
lg	--pf-control-lg	2.25rem
xl	--pf-control-xl	2.5rem

Icon sizesCopy Anchor Link

Token values and CSS variables

Token	CSS variable	Value
xs	--pf-icon-xs	0.75rem
sm	--pf-icon-sm	1rem
md	--pf-icon-md	1.25rem
lg	--pf-icon-lg	1.5rem

Container widthsCopy Anchor Link

Token values and CSS variables

Token	CSS variable	Value
xxs	--pf-width-xxs	20rem
xs	--pf-width-xs	24rem
sm	--pf-width-sm	30rem
md	--pf-width-md	35rem
lg	--pf-width-lg	40rem
xl	--pf-width-xl	48rem
2xl	--pf-width-2xl	64rem
3xl	--pf-width-3xl	80rem
4xl	--pf-width-4xl	90rem
5xl	--pf-width-5xl	100rem
6xl	--pf-width-6xl	120rem

Border strokesCopy Anchor Link

Token values and CSS variables

Token	CSS variable	Value
hairline	--pf-stroke-hairline	0.5px
control	--pf-stroke-control	1px
focus	--pf-stroke-focus	2px

BreakpointsCopy Anchor Link

Token values and CSS variables

Token	CSS variable	Value
sm	--pf-breakpoint-sm	40rem
md	--pf-breakpoint-md	48rem
lg	--pf-breakpoint-lg	64rem
xl	--pf-breakpoint-xl	80rem
2xl	--pf-breakpoint-2xl	96rem

Breakpoints describe viewport widths. CSS custom properties cannot be used in media-query conditions; use explicit media queries from these reviewed values or the package's own Tailwind build. Product desktop-only routing is an application decision, not a restriction built into these tokens.

Buttons use radius md (8px); inputs use sm (6px); menus use lg (10px); cards, dialogs and panels use xl (12px); large sheets use 2xl (16px); pills use full. The older xxs, 3xl, 4xl and circle radius names are not part of the new Figma scale.

ElevationCopy Anchor Link

Flat is the default: background fill, Soft Pearl 300 hairline, radius xl and no shadow. Elevation/control uses radius md; the documentation's other specimens use xl. Component geometry can specify a different radius (for example menu lg), so choose that component's radius when composing a surface. Shadows are neutral #121212. Floating surfaces always pair a shadow with a hairline; a shadow token alone is not a full surface recipe.

Controls use stroke/control (1px), containers stroke/hairline (0.5px). Control borders use Soft Pearl 400, hover 500, strong 600. Selected and focus use Blue 700; invalid uses Red 600. Focus is 2px with a 2px offset.

Design guidanceCopy Anchor Link

Read Design principles for shared usage guidance and motion recipes.

Source: The System. Snapshot: 2026-10-12.