Layout and spacing

Last updated on August 27, 2024

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

On this page:


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
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)
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 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

Accessibility

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