Design tokens glossary

Last updated on August 27, 2024

A 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.

B.C. Design Tokens (version 3.1.1)
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 Primary theme colour for components and layout surface.color.primary.default #013366  
Surface Colour Hover variant of surface.color.primary.default surface.color.primary.hover #1E5189  
Surface Colour Selected/pressed variant of surface.color.primary.default surface.color.primary.pressed #01264C  
Surface Colour Disabled/inactive variant of surface.color.primary.default surface.color.primary.disabled #EDEBE9  
Surface Colour Secondary theme colour for components and layout surface.color.secondary.default #FFFFFF  
Surface Colour Hover variant of surface.color.secondary.default surface.color.secondary.hover #EDEBE9  
Surface Colour Selected/pressed variant of surface.color.secondary.default surface.color.secondary.pressed #E0DEDC  
Surface Colour Disabled/inactive variant of surface.color.secondary default surface.color.secondary.disabled #EDEBE9  
Surface Colour Tertiary theme colour for components and layout surface.color.tertiary.default #FFFFFF00  
Surface Colour Hover variant of surface.color.tertiary.default surface.color.tertiary.hover #ECEAE8  
Surface Colour Selected/pressed variant of surface.color.tertiary.default surface.color.tertiary.pressed #E0DEDC  
Surface Colour Disabled/inactive variant of surface.color.tertiary default surface.color.tertiary.disabled #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) Illustration of a drop shadow on a UI element
Surface Box shadow Reduced shadow for secondary UI elements surface.shadow.small Composite (x, y, blur, spread, colour) Illustration of a drop shadow on a UI element
Surface Box shadow Standard shadow for UI elements like cards and buttons surface.shadow.medium Composite (x, y, blur, spread, colour) Illustration of a drop shadow on a UI element
Surface Box shadow Larger shadow for emphasis. Use sparingly surface.shadow.large Composite (x, y, blur, spread, colour) Illustration of a drop shadow on a UI element
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.margin.hair 0.125rem (2px  
Layout Padding Padding for UI elements 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