Rhythm and roundness.

Two scales govern the shape of a layout. Space sets the rhythm and forks by density, so a Compact table tightens without a single component rebinding. Radius sets the roundness and routes through the brand tier, because how round a corner is is a house decision, not a product one.

Space

Ten steps, used for padding and gaps alike. The scale forks by density. Every value below is listed in both Comfortable and Compact, and a component gets the right one from the mode on its container. Density is the reason spacing is a token rather than a number.

  • td.space.2xsSpacing 2xs - gaps and padding. Forks by density (Comfortable/Compact), not brand.Comfortable 4pxCompact 4px
  • td.space.xsSpacing xs - gaps and padding. Forks by density (Comfortable/Compact), not brand.Comfortable 8pxCompact 8px
  • td.space.smSpacing sm - gaps and padding. Forks by density (Comfortable/Compact), not brand.Comfortable 12pxCompact 12px
  • td.space.mdSpacing md - gaps and padding. Forks by density (Comfortable/Compact), not brand.Comfortable 16pxCompact 16px
  • td.space.lgSpacing lg - gaps and padding. Forks by density (Comfortable/Compact), not brand.Comfortable 20pxCompact 20px
  • td.space.xlSpacing xl - gaps and padding. Forks by density (Comfortable/Compact), not brand.Comfortable 24pxCompact 24px
  • td.space.2xlSpacing 2xl - gaps and padding. Forks by density (Comfortable/Compact), not brand.Comfortable 32pxCompact 32px
  • td.space.3xlSpacing 3xl - gaps and padding. Forks by density (Comfortable/Compact), not brand.Comfortable 40pxCompact 40px
  • td.space.4xlSpacing 4xl - gaps and padding. Forks by density (Comfortable/Compact), not brand.Comfortable 48pxCompact 48px
  • td.space.5xlSpacing 5xl - gaps and padding. Forks by density (Comfortable/Compact), not brand.Comfortable 56pxCompact 56px

Radius

Nine steps, from a square corner to a fully round one. Unlike space, radius resolves through the brand tier, so the two houses can differ in how soft they feel without any component knowing.

  • td.radius.noneCorner radius none.0px
  • td.radius.2xsCorner radius 2xs.4px
  • td.radius.xsCorner radius xs.8px
  • td.radius.smCorner radius sm.12px
  • td.radius.mdCorner radius md.16px
  • td.radius.lgCorner radius lg.20px
  • td.radius.xlCorner radius xl.24px
  • td.radius.2xlCorner radius 2xl.32px
  • td.radius.roundCorner radius round.9999px