GC Design System
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

CSS Shortcuts

Every digital product needs some custom styling. We did the work for you.

CSS Shortcuts is a CSS utility framework built to match GC Design System (GCDS) styles and Canada.ca standards. It provides predefined CSS utility classes that apply core design elements, like colours, spacing, and typography, to your HTML. The classes align with our GCDS design tokens for consistency and ease of use.

How to use CSS Shortcuts

  1. Select the framework you're working with and follow the steps to add the CSS Shortcuts stylesheet. If you've already installed components, skip ahead to the CSS Shortcuts instructions.
  2. Explore the different styling options in the menu.
  3. Add the classes to their corresponding HTML to adjust the styling to meet your needs.

Benefits

Match styles

CSS Shortcuts lets you apply predefined design tokens directly to your HTML elements. These design tokens are used throughout GCDS, so your custom code will match our components.

Faster development, less maintenance

Your code becomes simpler, clearer, and easier to maintain. We handle the updates, not you.

No third-party dependency

CSS Shortcuts is built to meet the needs of the Government of Canada. Unlike other commonly used utility frameworks like Bootstrap or Tailwind, CSS Shortcuts is fully under our control.

Accessibility built in

Add custom code to meet your specific needs, with the reassurance of knowing it’s been built to meet GC accessibility standards.

Browse CSS Shortcuts

Defaults

  • Reset styles

    • Conditional styling

  • Responsive layout
  • State

    • Layout

  • Box sizing
  • Container sizing
  • Display
  • Overflow
  • Position
  • Visibility

    • Typography

  • Font family
  • Font size
  • Font style
  • Font weight
  • Font
  • Line height
  • Link colour
  • Link size
  • Link text decoration
  • List style
  • Text align
  • Text colour
  • Text overflow
  • Text transform
  • Word break

    • Spacing

  • Margin
  • Padding

    • Flexbox and grid

  • Align content
  • Align items
  • Align self
  • Flex direction
  • Flex grow
  • Flex shrink
  • Flex wrap
  • Flex
  • Gap
  • Grid columns
  • Grid rows
  • Justify content
  • Justify items
  • Justify self
  • Order
  • Place content
  • Place items
  • Place self

    • Background and border

  • Background colour
  • Border colour
  • Border radius
  • Border style
  • Border width

    • Icon and image

  • Icon names
  • Icon size
  • Image

    • Interactive

  • Cursor
  • Pointer events
  • Transition

    • Help us improve

    Have questions or a request? Give feedback on our contact form.

    Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

    Give feedback Report an issue on GitHub

    2025-10-02