# Spacing, sizing and elevation
Package: @commenda/pathfinder@0.1.0
Page: /docs/foundations/sizing-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.
## Spacing [#spacing]
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 radius [#corner-radius]
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 heights [#control-heights]
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 sizes [#icon-sizes]
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 widths [#container-widths]
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 strokes [#border-strokes]
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 |
## Breakpoints [#breakpoints]
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.
## Elevation [#elevation]
| Job | CSS variable | Shadow |
| ------- | --------------------- | ------------------------------------------------ |
| flat | `--pf-shadow-flat` | `none` |
| control | `--pf-shadow-control` | `0 1px 2px 0 #1212120a, 0 1px 4px 0 #12121208` |
| raised | `--pf-shadow-raised` | `0 1px 2px 0 #12121205, 0 2px 12px 0 #1212120d` |
| soft | `--pf-shadow-soft` | `0 1px 2px 0 #12121205, 0 1px 16px 0 #12121214` |
| menu | `--pf-shadow-menu` | `0 1px 2px 0 #12121205, 0 4px 20px 0 #12121214` |
| panel | `--pf-shadow-panel` | `0 1px 2px 0 #12121205, 0 8px 32px 0 #12121214` |
| modal | `--pf-shadow-modal` | `0 1px 4px 0 #12121205, 0 16px 48px 0 #1212121a` |
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 guidance [#design-guidance]
Read [Design principles](/docs/foundations/design-rules) for shared usage guidance and motion recipes.
Source: [The System](https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System). Snapshot: 2026-10-12.