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
xsmall var(--bolt-spacing-x-xsmall) 0.3875rem
small var(--bolt-spacing-x-small) 0.775rem
medium var(--bolt-spacing-x-medium) 1.55rem
large var(--bolt-spacing-x-large) 3.1rem
xlarge var(--bolt-spacing-x-xlarge) 6.2rem
xxlarge var(--bolt-spacing-x-xxlarge) 12.4rem
xxxlarge var(--bolt-spacing-x-xxxlarge) 24.8rem
Vertical
CSS custom property Value in rem Value in px (at 1400px viewport)*
xxsmall var(--bolt-spacing-y-xxsmall) 0.1755rem
xsmall var(--bolt-spacing-y-xsmall) 0.3375rem
small var(--bolt-spacing-y-small) 0.675rem
medium var(--bolt-spacing-y-medium) 1.35rem
large var(--bolt-spacing-y-large) 2.7rem
xlarge var(--bolt-spacing-y-xlarge) 5.4rem
xxlarge var(--bolt-spacing-y-xxlarge) 10.8rem
xxxlarge var(--bolt-spacing-y-xxxlarge) 21.6rem
*Spacing sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System