Spacing scale

Every space in Prism comes from one scale built on a 4px base unit. The number in the token name grows with its value: spacing.100 is 4px and spacing.400 is 16px. spacing.50 is a 2px half-step for the tightest spots.

How spacing is used

Pick a step by what the space does, not by how it looks. Small steps hold a component together, medium steps give content room, and the same scale sets the size of components and icons.

Inside components

Padding and gaps within a single component: around a button’s label, between an icon and its text, inside a badge. Not for layout. These steps are too tight to separate blocks of content.

spacing.50 – spacing.300

Around content

Padding inside containers and gaps between content blocks: card headers and bodies, the first and last table columns, list items, drawer footers. Not for component internals. At this size, the parts of a single control drift apart.

spacing.300 – spacing.500

Component sizes

Heights and icon sizes come from the same scale, so components line up with the space around them. Buttons, inputs, and selects are 32px by default and 24px small; large buttons are 40px. Icons are usually 12px to 24px. Sizes, not spacing. These steps mostly set dimensions; for padding, reach for the smaller steps first.

spacing.300 – spacing.1000

Tokens

Every spacing token, with its value and where Prism components use it. Use the CSS variable in code. The token name is what you’ll find in Figma.