GC Design System Start to use
GC Design System 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

Set up GC Design System library

You’ll need a Figma account to use the GC Design System library and the token library. It can be a free account. Go to Figma.com to create an account if you do not already have one.

Setup instructions

  1. Go to GC Design System library in Figma.
    Go to the library
  2. Copy the library to your account.
  3. Publish the library internally so your team can use it too. This step is for paid accounts only.
  4. Add the published library to the Figma file you’re using. This step is for paid accounts only.
  5. Start designing by searching components and templates by name and dragging them into your project. For an overview of component names, visit our components page.

Also available

  • Token library: Follow the same steps to use our design tokens variables.
  • French component library: Use if you prefer to work in French.

Keep the library up-to-date

We update our library as we add components or improve their functionality. To keep your project up-to-date with the latest designs, you’ll need to update your library too by following the 2. Copy, 3. Publish and 4. Add steps above.

You can always check if you have the latest version by visiting our changelog. If you sign up to our mailing list, we’ll email you when we make updates to the design system.

2026-02-12