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 Foundations overview About design tokensToken namingUsing tokens ColourSpacingTypography Contact usGet InvolvedFind a demo Install GC Design System
Create a new project
Use our command-line interface (CLI) tool to create a new project configured with GC Design System. It also installs the required packages for you.
Create a new project
Add GC Design System to a project
Select the framework you use to get instructions on how to install GC Design System components into your project.
View installation instructions for React or React-based projects. This includes Next.js, Gatsby, and Remix. View installation instructions for Angular or Angular-based projects. View installation instructions for Vue or Vue-based projects. This includes Nuxt, VuePress, and Quasar.
Not using any of those?
If you’re not using any of the above, choose the “Other” option below.
View installation instructions for all other projects. This includes static sites, CMS platforms, Node.js, Java, Svelte, .NET.
If you need help, reach out to us and we’ll help you get started. 2026-10-28