A Crisis Response Centre is open and Victim Services are available for people impacted by the tragic events in Vancouver.

Call or text 1-800-563-0808.

Skip to main content
Skip to main navigation
Accessibility Statement

Layout and spacing

Last updated on January 14, 2025

Understand how to lay out and space B.C. Design System components.

Layout principles

If needed, use the Bootstrap v5.x grid system and breakpoints as a reference.

The B.C. Design System does not use a hard grid. It provides a set of standardized spacing and sizing measures to help users structure layouts consistently. You can access and use these measures using design tokens.

Sizing and spacing is modelled on an 8-point grid, to:

Help ensure a harmonious relationship between user interface elements
Make it easy to assemble layouts that work well across common screen sizes and layouts

The design system currently defines 't-shirt size' options for:

Margins
Padding
Border radius
Border width
Icon sizing

Sizing and spacing measures

This list of tokens is provided as a reference. To use tokens, you need to install the package as a dependency and use the appropriate variables for your tech stack.

Most sizing and spacing measures are defined in relative (rem) units. Pixel values assuming a root font size of 16px (the default for most browser user agents) are shown in brackets for reference.

Design tokens for sizing and spacing
Property	Usage notes	Token	Value
Border radius		layout.borderRadius.none	0px
Border radius		layout.borderRadius.small	2px
Border radius	Default border radius	layout.borderRadius.medium	4px
Border radius		layout.borderRadius.large	6px
Border radius	Circular border radius	layout.borderRadius.circular	9999px
Border width		layout.borderWidth.none	0px
Border width		layout.borderWidth.small	1px
Border width	Default border width	layout.borderWidth.medium	2px
Border width		layout.borderWidth.large	4px
Icon size		icons.size.xsmall	14px
Icon size		icons.size.small	16px
Icon size	Default icon size. Assumes icon is a square image	icons.size.medium	20px
Icon size		icons.size.large	24px
Icon size		icons.size.xlarge	32px
Margin	No margin	layout.margin.none	0rem (0px)
Margin		layout.margin.hair	0.125rem (2px)
Margin		layout.margin.xsmall	0.25rem (4px)
Margin	Default margin value for layout	layout.margin.medium	0.5rem (8px)
Margin		layout.margin.large	1rem (16px)
Margin		layout.margin.xlarge	1.5rem (24px)
Margin		layout.margin.xxlarge	2rem (32px)
Margin		layout.margin.xxxlarge	2.5rem (40px)
Margin		layout.margin.huge	3rem (48px)
Padding	No padding	layout.padding.none	0rem (0px)
Padding		layout.padding.hair	0.125rem (2px)
Padding		layout.padding.xsmall	0.25rem (4px)
Padding		layout.padding.small	0.5rem (8px)
Padding	Default padding value for layout	layout.padding.medium	1rem (16px)
Padding		layout.padding.large	1.5rem (24px)
Padding		layout.padding.xlarge	2rem (32px)

Accessibility

Refer to the simplified WCAG guidance to help you ensure your product is accessible:

Support portrait and landscape display orientation (WCAG Success Criterion 1.3.4, Level AA)
Use responsive design to avoid losing content or context (WCAG Success Criterion 1.4.10, Level AA)

Did you find what you were looking for?

The B.C. Public Service acknowledges the territories of First Nations around B.C. and is grateful to carry out our work on these lands. We acknowledge the rights, interests, priorities, and concerns of all Indigenous Peoples - First Nations, Métis, and Inuit - respecting and acknowledging their distinct cultures, histories, rights, laws, and governments.

More topics

Layout and spacing

On this page:

Layout principles

Sizing and spacing measures

Accessibility