Space and size Helix has two scales. The space scale sets the gaps between things. The size scale sets how big a control is. If you use one for the other, a button can end up one step of padding taller than the input beside it. Space TokenValue--helix-space-none0rem--helix-space-2xscalc(0.25rem * var(--helix-seed-density, 1))--helix-space-xscalc(0.5rem * var(--helix-seed-density, 1))--helix-space-smcalc(0.75rem * var(--helix-seed-density, 1))--helix-space-mdcalc(1rem * var(--helix-seed-density, 1))--helix-space-lgcalc(1.5rem * var(--helix-seed-density, 1))--helix-space-xlcalc(2rem * var(--helix-seed-density, 1))--helix-space-2xlcalc(3rem * var(--helix-seed-density, 1))--helix-space-3xlcalc(4rem * var(--helix-seed-density, 1))--helix-space-controlvar(--helix-space-md) The scale has nine steps, named like t-shirt sizes. Numbered steps suggest arithmetic, such as space-4 being twice space-2. That stops being true as soon as the scale is tuned, and it leads to a space-4.5 the first time something does not fit. --helix-space-control is a tenth token of a different kind. It is the inset a control uses, and it follows the region's density. It is not a step on the scale. See Size and density. Use the space tokens for gap, padding, and margin: .toolbar { display: flex; gap: var(--helix-space-sm); padding: var(--helix-space-md); } Size The size scale has forty-one tokens, and almost all of them name a specific thing: --helix-size-control --helix-size-checkbox --helix-size-switch --helix-size-avatar --helix-size-icon --helix-size-tag --helix-size-header --helix-size-progress --helix-size-meter Most come in a -sm, -md, and -lg set beside the unsuffixed token. The unsuffixed token is the live one. The suffixed tokens are the values the density axis picks between. A component reads --helix-size-control, and the region's [data-density] sets whether that resolves to -sm, -md, or -lg. The loader is the exception. It has -sm, -md, and -lg and no unsuffixed token, because nothing reads a loader's size from the density. This is why a component has no size property. The region sets the size once, so you cannot write a row of controls with different heights. Focus ring tokens --helix-size-focus-ring the ring's own thickness --helix-size-focus-offset the gap between the control and the ring --helix-size-focus-reach ring plus offset, for reserving room A ring drawn outside a control needs room. --helix-size-focus-reach holds that sum, so each component that draws a ring does not compute it again. Use reach to reserve the room, and the other two to draw the ring. What not to do Do not use a size token for a gap. --helix-size-control is a height. A gap that uses it changes when the region's density changes. Do not use a raw value when the scale has no step for it. If a gap really falls between sm and md, note it and do not write 11px. It usually means the two things it separates belong at different levels of the layout.