Spacing Tokens Design tokens for Bolt’s spacing system, available as CSS custom properties. Horizontal
CSS custom property Value in rem Value in px (at 1400px viewport)*
xxsmall var(--bolt-spacing-x-xxsmall) 0.2015rem 3px scales from 3px to 4px
xsmall var(--bolt-spacing-x-xsmall) 0.3875rem 6px scales from 6px to 7px
small var(--bolt-spacing-x-small) 0.775rem 12px scales from 11px to 13px
medium var(--bolt-spacing-x-medium) 1.55rem 24px scales from 22px to 25px
large var(--bolt-spacing-x-large) 3.1rem 47px scales from 44px to 50px
xlarge var(--bolt-spacing-x-xlarge) 6.2rem 93px scales from 87px to 100px
xxlarge var(--bolt-spacing-x-xxlarge) 12.4rem 186px scales from 174px to 199px
xxxlarge var(--bolt-spacing-x-xxxlarge) 24.8rem 372px scales from 348px to 397px
Vertical
CSS custom property Value in rem Value in px (at 1400px viewport)*
xxsmall var(--bolt-spacing-y-xxsmall) 0.1755rem 3px scales from 3px to 3px
xsmall var(--bolt-spacing-y-xsmall) 0.3375rem 6px scales from 5px to 6px
small var(--bolt-spacing-y-small) 0.675rem 11px scales from 10px to 11px
medium var(--bolt-spacing-y-medium) 1.35rem 21px scales from 19px to 22px
large var(--bolt-spacing-y-large) 2.7rem 41px scales from 38px to 44px
xlarge var(--bolt-spacing-y-xlarge) 5.4rem 81px scales from 76px to 87px
xxlarge var(--bolt-spacing-y-xxlarge) 10.8rem 162px scales from 152px to 173px
xxxlarge var(--bolt-spacing-y-xxxlarge) 21.6rem 324px scales from 303px to 346px
*Spacing sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System