Design tokens glossary
Last updated on July 12, 2024A searchable list of all tokens included in the B.C. Design Tokens library, and their associated values.
This list is provided as a reference. Designers can access these tokens via Figma. Developers should install the package as a dependency and import the appropriate variables for their tech stack.
| Category | Property | Description | Token | Value | Preview |
|---|---|---|---|---|---|
| Buttons | Colour | Default fill colour for primary buttons | surface.color.primary.button.default | #013366 | |
| Buttons | Colour | Fill colour used when user hovers over primary button | surface.color.primary.button.hover | #1E5189 | |
| Buttons | Colour | Fill colour for inactive primary buttons | surface.color.primary.button.disabled | #EDEBE9 | |
| Buttons | Colour | Fill colour for secondary buttons | surface.color.secondary.button.default | #FFFFFF | |
| Buttons | Colour | Fill colour used when user hovers over secondary button | surface.color.secondary.button.hover | #EDEBE9 | |
| Buttons | Colour | Fill colour for inactive secondary buttons | surface.color.secondary.button.disabled | #EDEBE9 | |
| Buttons | Colour | Default fill colour for tertiary buttons | surface.color.tertiary.button.default | #FFFFFF | |
| Buttons | Colour | Fill colour used when user hovers over tertiary button | surface.color.tertiary.button.hover | #ECEAE8 | |
| Buttons | Colour | Fill colour for inactive tertiary buttons | surface.color.tertiary.button.disabled | #EDEBE9 | |
| Buttons | Colour | Default fill colour for buttons in danger/warning state | surface.color.primary.dangerButton.default | #CE3E39 | |
| Buttons | Colour | Fill colour used when user hovers over danger/warning button | surface.color.primary.dangerButton.hover | #A2312D | |
| Buttons | Colour | Default fill colour for disabled danger/warning button | surface.color.primary.dangerButton.disabled | #EDEBE9 | |
| Forms | Colour | Default fill colour for form/input fields | surface.color.forms.default | #FFFFFF | |
| Forms | Colour | Fill colour used when user hovers over form/input field | surface.color.forms.hover | #EDEBE9 | |
| Forms | Colour | Fill colour for inactive/disabled form/input fields | surface.color.forms.disabled | #EDEBE9 | |
| Menus | Colour | Default fill colour for menu items | surface.color.menus.default | #FFFFFFF | |
| Menus | Colour | Fill colour used when user hovers over a menu item | surface.color.menus.hover | #EDEBE9 | |
| Surface | Colour | White background | surface.color.background.white | #FFFFFF | |
| Surface | Colour | Default background colour for layout | surface.color.background.lightGray | #FAF9F8 | |
| Surface | Colour | Light blue background | surface.color.background.lightBlue | #F1F8FE | |
| Surface | Colour | Dark blue background | surface.color.background.darkBlue | #013366 | |
| Surface | Colour | Lighter border colour for UI elements | surface.color.border.light | #D8D8D8 | |
| Surface | Colour | Default border colour for UI elements | surface.color.border.medium | #898785 | |
| Surface | Colour | Used as a hover colour for form fields and inputs | surface.color.border.dark | #353433 | |
| Surface | Colour | Used as the active stroke colour for UI elements | surface.color.border.active | #2E5DD7 | |
| Surface | Colour | Background overlay colour for images and modal dialogues | surface.color.overlay.default | #00000073 | |
| Surface | Box shadow | Default shadow for most content and UI elements | surface.shadow.none | Composite (x, y, blur, spread, colour) |  |
| Surface | Box shadow | Reduced shadow for secondary UI elements | surface.shadow.small | Composite (x, y, blur, spread, colour) |  |
| Surface | Box shadow | Standard shadow for UI elements like cards and buttons | surface.shadow.medium | Composite (x, y, blur, spread, colour) |  |
| Surface | Box shadow | Larger shadow for emphasis. Use sparingly | surface.shadow.large | Composite (x, y, blur, spread, colour) |  |
| Theme | Colour | Primary blue | theme.primaryBlue | #013366 | |
| Theme | Colour | Primary gold | theme.primaryGold | #FCBA19 | |
| Theme | Colour | Gold colour scale — lightest | theme.Gold10 | #FEF8E8 | |
| Theme | Colour | Gold colour scale | theme.Gold20 | #FEF0D8 | |
| Theme | Colour | Gold colour scale | theme.Gold30 | #FDE9C4 | |
| Theme | Colour | Gold colour scale | theme.Gold40 | #FCE2B0 | |
| Theme | Colour | Gold colour scale | theme.Gold50 | #FBDA9D | |
| Theme | Colour | Gold colour scale | theme.Gold60 | #FBD389 | |
| Theme | Colour | Gold colour scale | theme.Gold70 | #FACC75 | |
| Theme | Colour | Gold colour scale | theme.Gold80 | #F9C462 | |
| Theme | Colour | Gold colour scale | theme.Gold90 | #F8BA47 | |
| Theme | Colour | Gold colour scale — darkest | theme.Gold100 | #FCBA19 | |
| Theme | Colour | Blue colour scale — lightest | theme.Blue10 | #F1F8FE | |
| Theme | Colour | Blue colour scale | theme.Blue20 | #D8EAFD | |
| Theme | Colour | Blue colour scale | theme.Blue30 | #C1DDFC | |
| Theme | Colour | Blue colour scale | theme.Blue40 | #A8D0FB | |
| Theme | Colour | Blue colour scale | theme.Blue50 | #91C4FA | |
| Theme | Colour | Blue colour scale | theme.Blue60 | #7AB8F9 | |
| Theme | Colour | Blue colour scale | theme.Blue70 | #5595D9 | |
| Theme | Colour | Blue colour scale | theme.Blue80 | #3470B1 | |
| Theme | Colour | Blue colour scale | theme.Blue90 | #1E5189 | |
| Theme | Colour | Blue colour scale — darkest | theme.Blue100 | #013366 | |
| Theme | Colour | White | theme.gray.white | #FFFFFF | |
| Theme | Colour | Greyscale — lightest | theme.gray10 | #FAF9F8 | |
| Theme | Colour | Greyscale | theme.gray20 | #F3F2F1 | |
| Theme | Colour | Greyscale | theme.gray30 | #ECEAE8 | |
| Theme | Colour | Greyscale | sheme.gray40 | #E0DEDC | |
| Theme | Colour | Greyscale | theme.gray50 | #D1CFCD | |
| Theme | Colour | Greyscale | theme.gray60 | #C6C5C3 | |
| Theme | Colour | Greyscale | theme.gray70 | #9F9D9C | |
| Theme | Colour | Greyscale | theme.gray80 | #605E5C | |
| Theme | Colour | Greyscale | theme.gray90 | #3D3C3B | |
| Theme | Colour | Greyscale | theme.gray100 | #353433 | |
| Theme | Colour | Greyscale — darkest | theme.gray110 | #252423 | |
| Support | Colour | Background colour for general/informational messages | support.surfaceColor.info | #F7F9FC | |
| Support | Colour | Background colour for error, failure or danger messages | support.surfaceColor.danger | #F4E1E2 | |
| Support | Colour | Background colour for success messages | support.surfaceColor.success | #F6FFF8 | |
| Support | Colour | Background colour for warning messages | support.surfaceColor.warning | #FEF1D8 | |
| Support | Colour | Border stroke for general/informational messages | support.borderColor.info | #053662 | |
| Support | Colour | Border stroke for error, failure or danger messages | support.borderColor.danger | #CE3E39 | |
| Support | Colour | Border stroke for success messages | support.borderColor.success | #42814A | |
| Support | Colour | Border stroke for warning messages | support.borderColor.warning | #F8BB47 | |
| Typography | Colour | Default colour for all body text and headings | typography.color.primary | #2D2D2D | |
| Typography | Colour | Alternative colour for secondary/miscellaneous text | typography.color.secondary | #474543 | |
| Typography | Colour | Use only for text in inactive user interface elements | typography.color.disabled | #9F9D9C | |
| Typography | Colour | Use for placeholder text in forms | typography.color.placeholder | #9F9D9C | |
| Typography | Colour | Use for hyperlinks in body text and headings | typography.color.link | #255A90 | |
| Typography | Colour | Use for error, failure or danger message text | typography.color.danger | #CE3E39 | |
| Typography | Colour | Default colour for text on dark backgrounds | typography.color.primaryInvert | #FFFFFF | |
| Typography | Colour | Secondary colour for text on dark backgrounds | typography.color.secondaryInvert | #ECEAE8 | |
| Typography | Text styles | Label and captions | typography.regular.label | 0.75rem (12px) | |
| Typography | Text styles | Smaller body text | typography.regular.smallBody | 0.875rem (14px) | |
| Typography | Text styles | Default body text | typography.regular.body | 1rem (16px) | |
| Typography | Text styles | Larger body text | typography.regular.largeBody | 1.125rem (18px) | |
| Typography | Text styles | Alternate (unbolded) style for Heading 6 | typography.regular.H6 | 1.125rem (18px) | |
| Typography | Text styles | Alternate (unbolded) style for Heading 5 | typography.regular.H5 | 1.25rem (20px) | |
| Typography | Text styles | Alternate (unbolded) style for Heading 4 | typography.regular.H4 | 1.5rem (24px) | |
| Typography | Text styles | Alternate (unbolded) style for Heading 3 | typography.regular.H3 | 1.75rem (28px) | |
| Typography | Text styles | Alternate (unbolded) style for Heading 2 | typography.regular.H2 | 2rem (32px) | |
| Typography | Text styles | Alternate (unbolded) style for Heading 1 | typography.regular.H1 | 2.25rem (36px) | |
| Typography | Text styles | Extra-large body text size. Do not use for headings | typography.regular.display | 3rem (48px) | |
| Typography | Text styles | Label and captions (bolded) | typography.bold.label | 0.75rem (12px) | |
| Typography | Text styles | Smaller body text (bolded) | typography.bold.smallBody | 0.875rem (14px) | |
| Typography | Text styles | Default body text (bolded) | typography.bold.body | 1rem (16px) | |
| Typography | Text styles | Larger body text (bolded) | typography.bold.largeBody | 1.125rem (18px) | |
| Typography | Text styles | Default style for Heading 6 | typography.bold.H6 | 1.125rem (18px) | |
| Typography | Text styles | Default style for Heading 5 | typography.bold.H5 | 1.25rem (20px) | |
| Typography | Text styles | Default style for Heading 4 | typography.bold.H4 | 1.5rem (24px) | |
| Typography | Text styles | Default style for Heading 3 | typography.bold.H3 | 1.75rem (28px) | |
| Typography | Text styles | Default style for Heading 2 | typography.bold.H2 | 2rem (32px) | |
| Typography | Text styles | Default style for Heading 1 | typography.bold.H1 | 2.25rem (36px) | |
| Typography | Text styles | Extra-large body text size (bolded). Do not use for headings | typography.bold.display | 3rem (48px) | |
| Typography | Text styles | Label and captions (italic) | typography.italic.label | 0.75rem (12px) | |
| Typography | Text styles | Smaller body text (italic) | typography.italic.smallBody | 0.875rem (14px) | |
| Typography | Text styles | Default body text (italic) | typography.italic.body | 1rem (16px) | |
| Typography | Text styles | Larger body text (italic) | typography.italic.largeBody | 1.125rem (18px) | |
| Typography | Text styles | Alternate (italic) style for Heading 6 | typography.italic.H6 | 1.125rem (18px) | |
| Typography | Text styles | Alternate (italic) style for Heading 5 | typography.italic.H5 | 1.25rem (20px) | |
| Typography | Text styles | Alternate (italic) style for Heading 4 | typography.italic.H4 | 1.5rem (24px) | |
| Typography | Text styles | Alternate (italic) style for Heading 3 | typography.italic.H3 | 1.75rem (28px) | |
| Typography | Text styles | Alternate (italic) style for Heading 2 | typography.italic.H2 | 2rem (32px) | |
| Typography | Text styles | Alternate (italic) style for Heading 1 | typography.italic.H1 | 2.25rem (36px) | |
| Typography | Text styles | Extra-large body text size (italic). Do not use for headings | typography.italic.display | 3rem (48px) | |
| Typography | Font family | Requires the BC Sans package | typography.fontFamilies.bc-sans | BC Sans | |
| Typography | Font weight | System token, used to generate text styles. Not for general use | typography.fontWeights.regular | regular | |
| Typography | Font weight | System token, used to generate text styles. Not for general use | typography.fontWeights.italic | italic | |
| Typography | Font weight | System token, used to generate text styles. Not for general use | typography.fontWeights.bold | bold | |
| Typography | Line height | Line height — smallest | typography.lineHeights.xxdense | 1.13rem | |
| Typography | Line height | Line height — smaller | typography.lineHeights.xdense | 1.688rem | |
| Typography | Line height | Line height — small | typography.lineHeights.dense | 1.913rem | |
| Typography | Line height | Line height — default | typography.lineHeights.regular | 2.125rem | |
| Typography | Line height | Line height — large | typography.lineHeights.sparse | 2.25rem | |
| Typography | Line height | Line height — larger | typography.lineHeights.xsparse | 3rem | |
| Typography | Line height | Line height — largest | typography.lineHeights.xxsparse | 3.375rem | |
| Typography | Line height | System token, used to generate text styles. Not for general use | typography.lineHeights.auto | AUTO | |
| Typography | Paragraph spacing | System token, used to generate text styles. Not for general use | typography.paragraphSpacing.0 | 0px | |
| Typography | Letter spacing | System token, used to generate text styles. Not for general use | typography.letterSpacing.0 | 0px | |
| Typography | Text decoration | System token, used to generate text styles. Not for general use | typography.textDecoration.none | none | |
| Typography | Paragraph indent | System token, used to generate text styles. Not for general use | typography.paragraphIndent.0 | 0px | |
| Layout | Margin | No margin | layout.margin.none | 0rem (0px) | |
| Layout | Margin | Margin for UI elements — smallest | layout.margin.hair | 0.125rem (2px) | |
| Layout | Margin | Margin for UI elements | layout.margin.xsmall | 0.25rem (4px) | |
| Layout | Margin | Margin for UI elements | layout.margin.small | 0.5rem (8px) | |
| Layout | Margin | Margin for UI elements — default | layout.margin.medium | 1rem (16px) | |
| Layout | Margin | Margin for UI elements | layout.margin.large | 1.5rem (24px) | |
| Layout | Margin | Margin for UI elements | layout.margin.xlarge | 2rem (32px) | |
| Layout | Margin | Margin for UI elements | layout.margin.xxlarge | 2.5rem (40px) | |
| Layout | Margin | Margin for UI elements | layout.margin.xxxlarge | 3rem (48px) | |
| Layout | Margin | Margin for UI elements — largest | layout.margin.huge | 3.5rem (56px) | |
| Layout | Padding | No padding | layout.padding.none | 0rem (0px) | |
| Layout | Padding | Padding for UI elements — smallest | layout.padding.xsmall | 0.25rem (4px) | |
| Layout | Padding | Padding for UI elements | layout.padding.small | 0.5rem (8px) | |
| Layout | Padding | Padding for UI elements — default | layout.padding.medium | 1 rem (16px) | |
| Layout | Padding | Padding for UI elements | layout.padding.large | 1.5rem (24px) | |
| Layout | Padding | Padding for UI elements — largest | layout.padding.xlarge | 2rem (32px) | |
| Layout | Border radius | No corner rounding | layout.borderRadius.none | 0px | |
| Layout | Border radius | Smaller corner rounding | layout.borderRadius.small | 2px | |
| Layout | Border radius | Default corner rounding for UI elements | layout.borderRadius.default | 4px | |
| Layout | Border radius | Larger corner rounding | layout.borderRadius.large | 6px | |
| Layout | Border width | No border | layout.borderWidth.none | 0px | |
| Layout | Border width | Thin border | layout.borderWidth.small | 1px | |
| Layout | Border width | Default border | layout.borderWidth.medium | 2px | |
| Layout | Border width | Thick border | layout.borderWidth.large | 4px | |
| Icons | Colour | Default colour for icons | icons.color.primary | #2D2D2D | |
| Icons | Colour | Default colour for icons on dark backgrounds | icons.color.primaryInvert | #FFFFFFF | |
| Icons | Colour | Alternative colour for secondary/miscellaneous icons | icons.color.secondary | #474543 | |
| Icons | Colour | Use only for inactive/disabled icons | icons.color.disabled | #9F9D9C | |
| Icons | Colour | Use for hyperlinked icons | icons.color.link | #255A90 | |
| Icons | Colour | Emphasis colour for icons in general/informational state | icons.color.info | #053662 | |
| Icons | Colour | Emphasis colour for icons in error, failure or danger state | icons.color.danger | #CE3E39 | |
| Icons | Colour | Emphasis colour for icons in success state | icons.color.success | #42814A | |
| Icons | Colour | Emphasis colour for icons in warning state | icons.color.warning | #F8BB47 | |
| Icons | Size | Smallest icon size | icons.size.xsmall | 14px | |
| Icons | Size | Small icon size | icons.size.small | 16px | |
| Icons | Size | Default icon size | icons.size.medium | 20px | |
| Icons | Size | Large icon size | icons.size.large | 24px | |
| Icons | Size | Largest icon size | icons.size.xlarge | 32px |