Skip to content
Design Token Authority

Spacing, radius and stroke

A 4px base. Figma scopes on the tokens (GAP, CORNER_RADIUS, STROKE_FLOAT) tell dta build to write these in px.

Spacing

Section titled “Spacing”
  • space-14px · --space-1Icon gaps, tight chips.
  • space-28px · --space-2Chip groups, inline gaps.
  • space-312px · --space-3Button groups.
  • space-416px · --space-4Grid paper pitch, small padding.
  • space-624px · --space-6Card padding.
  • space-832px · --space-8Page gutter on desktop.
  • space-1040px · --space-10Between columns of a grid.
  • space-1248px · --space-12Between blocks in a section.
  • space-1456px · --space-14Between a heading and its content.
  • space-1664px · --space-16Section padding on mobile.
  • space-2080px · --space-20Section padding on mobile, landing page.
  • space-2496px · --space-24Section padding on desktop.
  • space-36144px · --space-36Section padding on desktop, landing page.

Radius

Section titled “Radius”

Six for chips and inputs, ten for buttons, eighteen for cards, full only for status dots.

  • radius-sm6px · --radius-smChips, inputs, redline labels (4px allowed for labels).
  • radius-md10px · --radius-mdButtons, terminal command button.
  • radius-lg18px · --radius-lgCards, panels, grid-paper areas.
  • radius-full9999px · --radius-fullStatus dots only.

Stroke

Section titled “Stroke”

Hairline for surfaces, redline for measurements, ink for interactive outlines and the dashed rail, focus for the focus ring.

  • stroke-hairline1px · --stroke-hairlineSurface borders (border-default).
  • stroke-redline1.5px · --stroke-redlineRedline measurement lines (signal-bg).
  • stroke-ink2px · --stroke-inkInteractive outlines and rules (border-strong); dashed for the rail.
  • stroke-focus3px · --stroke-focusFocus ring width (action-subtle).

Layout

Section titled “Layout”

Maximum widths: page content, a section heading, the page title and running text.

  • layout-content1240px · --layout-contentMaximum width of page content.
  • layout-heading900px · --layout-headingMaximum width of a section heading.
  • layout-measure640px · --layout-measureMaximum width of running text (about 70 characters).
  • layout-title760px · --layout-titleMaximum width of the page title.