FoundationsSize & spacing

Size & spacing

The important layout tokens in GDS are size and space from core.ts — available as theme.gds.core.size and theme.gds.core.space.

  • Size — widths, heights, and icon/control dimensions
  • Space — padding, margin, and gaps inside components

Size

Core size

Live values from theme.gds.core.size — control and icon dimensions in component themes.

size[8]8px
size[16]16px
size[18]18px
size[20]20px
size[24]24px
size[32]32px
size[34]34px
size[40]40px
size[48]48px
size[56]56px
size[69]69px
size[83]83px
size[93]93px

Space

Core space

Live values from theme.gds.core.space — padding, margin, and gap steps inside GDS components.

space[2]2px
space[4]4px
space[8]8px
space[12]12px
space[16]16px
space[24]24px

Usage

How to use them

Size is for measuring boxes; space is for the air between them. Both ship from core.ts and show up on theme.gds.core.

01

Size

Control dimensions — icon boxes, control heights, min-widths. Read from theme.gds.core.size (e.g. size[24] → 24px).

02

Space

Control padding, margin, and gaps inside component themes via theme.gds.core.space (e.g. space[16] → 16px).

03

Product layout

In apps, p / m / spacing still use MUI's ×8 unit. Prefer those for page layout; use size/space tokens when matching component chrome.

sx={(theme) => ({
  width: theme.gds.core.size[24],
  height: theme.gds.core.size[24],
  padding: theme.gds.core.space[8],
  gap: theme.gds.core.space[16],
})}

For page layout with GdsBox / GdsStack, you can still use MUI’s ×8 props (p={2}, spacing={3}). See Layout primitives.

TypographyElevation