Bolt Design System

spacing

Spacing

The spacing foundation of Bolt.

Vertical

Vertical Spacing

The base value of vertical spacing is based on the leading of base body text.

xxsmall: 0.2145rem

xsmall: 0.4125rem

small: 0.825rem

medium: 1.65rem

large: 3.3rem

xlarge: 6.6rem

xxlarge: 13.2rem

xxxlarge: 26.4rem

Horizontal

Horizontal Spacing

The base value of horizontal spacing is based on the gutter of the grid.

xxsmall: 0.25rem

xsmall: 0.5rem

small: 1rem

medium: 2rem

large: 4rem

xlarge: 8rem

xxlarge: 16rem

xxxlarge: 32rem

Tokens

Spacing Tokens

Vertical

	SCSS function	Spacing scale	Spacing size (at 1400px viewport)*
xxsmall	bolt-v-spacing(xxsmall)	0.2145rem	4px scales from 4px to 4px
xsmall	bolt-v-spacing(xsmall)	0.4125rem	7px scales from 6px to 8px
small	bolt-v-spacing(small)	0.825rem	14px scales from 12px to 15px
medium	bolt-v-spacing(medium)	1.65rem	27px scales from 24px to 30px
large	bolt-v-spacing(large)	3.3rem	53px scales from 47px to 60px
xlarge	bolt-v-spacing(xlarge)	6.6rem	106px scales from 93px to 119px
xxlarge	bolt-v-spacing(xxlarge)	13.2rem	212px scales from 185px to 238px
xxxlarge	bolt-v-spacing(xxxlarge)	26.4rem	423px scales from 370px to 476px

Horizontal

	SCSS function	Spacing scale	Spacing size (at 1400px viewport)*
xxsmall	bolt-spacing(xxsmall)	0.25rem	4px scales from 4px to 5px
xsmall	bolt-spacing(xsmall)	0.5rem	8px scales from 7px to 9px
small	bolt-spacing(small)	1rem	16px scales from 14px to 18px
medium	bolt-spacing(medium)	2rem	32px scales from 28px to 36px
large	bolt-spacing(large)	4rem	64px scales from 56px to 72px
xlarge	bolt-spacing(xlarge)	8rem	128px scales from 112px to 144px
xxlarge	bolt-spacing(xxlarge)	16rem	256px scales from 224px to 288px
xxxlarge	bolt-spacing(xxxlarge)	32rem	512px scales from 448px to 576px

*Spacing sizes in Bolt are responsive from 320px viewport to 1920px viewport. View Breakpoint System

Debug Panel