Calibrate Design System

Spacing

Calibrate’s spacing scale sets vertical and horizontal rhythm. Use these tokens for spacing in custom CSS; prefer the responsive vertical scale at page level.

Vertical

var(--clbr-spacing-vertical-100)

Vertical spacing step 100. Minimal vertical step.

var(--clbr-spacing-vertical-200)

Vertical spacing step 200.

var(--clbr-spacing-vertical-250)

Vertical spacing step 250.

var(--clbr-spacing-vertical-300)

Vertical spacing step 300.

var(--clbr-spacing-vertical-400)

Vertical spacing step 400.

var(--clbr-spacing-vertical-500)

Vertical spacing step 500.

var(--clbr-spacing-vertical-600)

Vertical spacing step 600.

var(--clbr-spacing-vertical-700)

Vertical spacing step 700. Default vertical step.

var(--clbr-spacing-vertical-775)

Vertical spacing step 775.

var(--clbr-spacing-vertical-800)

Vertical spacing step 800.

var(--clbr-spacing-vertical-900)

Vertical spacing step 900.

var(--clbr-spacing-vertical-950)

Vertical spacing step 950.

var(--clbr-spacing-vertical-1000)

Vertical spacing step 1000.

var(--clbr-spacing-vertical-1100)

Vertical spacing step 1100.

var(--clbr-spacing-vertical-1200)

Vertical spacing step 1200.

var(--clbr-spacing-vertical-1250)

Vertical spacing step 1250.

var(--clbr-spacing-vertical-1300)

Vertical spacing step 1300.

var(--clbr-spacing-vertical-1400)

Vertical spacing step 1400.

var(--clbr-spacing-vertical-1500)

Vertical spacing step 1500.

var(--clbr-spacing-vertical-1600)

Vertical spacing step 1600. Largest vertical step.

Vertical responsive

var(--clbr-layout-spacing-vertical-250)

Responsive layout vertical spacing 250. Minimal vertical block gap.

var(--clbr-layout-spacing-vertical-400)

Responsive layout vertical spacing 400.

var(--clbr-layout-spacing-vertical-500)

Responsive layout vertical spacing 500.

var(--clbr-layout-spacing-vertical-600)

Responsive layout vertical spacing 600.

var(--clbr-layout-spacing-vertical-700)

Responsive layout vertical spacing 700. Default layout vertical step.

var(--clbr-layout-spacing-vertical-800)

Responsive layout vertical spacing 800.

var(--clbr-layout-spacing-vertical-900)

Responsive layout vertical spacing 900.

var(--clbr-layout-spacing-vertical-950)

Responsive layout vertical spacing 950.

var(--clbr-layout-spacing-vertical-1000)

Responsive layout vertical spacing 1000.

var(--clbr-layout-spacing-vertical-1100)

Responsive layout vertical spacing 1100.

var(--clbr-layout-spacing-vertical-1200)

Responsive layout vertical spacing 1200. Largest vertical block gap.

Horizontal

var(--clbr-spacing-horizontal-100)

Horizontal spacing step 100. Minimal horizontal gap.

var(--clbr-spacing-horizontal-200)

Horizontal spacing step 200.

var(--clbr-spacing-horizontal-300)

Horizontal spacing step 300.

var(--clbr-spacing-horizontal-400)

Horizontal spacing step 400.

var(--clbr-spacing-horizontal-500)

Horizontal spacing step 500.

var(--clbr-spacing-horizontal-600)

Horizontal spacing step 600.

var(--clbr-spacing-horizontal-700)

Horizontal spacing step 700. Default horizontal step.

var(--clbr-spacing-horizontal-800)

Horizontal spacing step 800.

var(--clbr-spacing-horizontal-900)

Horizontal spacing step 900.

var(--clbr-spacing-horizontal-1000)

Horizontal spacing step 1000.

var(--clbr-spacing-horizontal-1100)

Horizontal spacing step 1100.

var(--clbr-spacing-horizontal-1200)

Horizontal spacing step 1200.

var(--clbr-spacing-horizontal-1300)

Horizontal spacing step 1300.

var(--clbr-spacing-horizontal-1400)

Horizontal spacing step 1400.

var(--clbr-spacing-horizontal-1500)

Horizontal spacing step 1500.

var(--clbr-spacing-horizontal-1600)

Horizontal spacing step 1600. Largest horizontal step.