GC Design SystemStart to use
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind 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-09-02