GC Design system Components Installation Contact us Get involved

GC Design System

Build modern, accessible, human government services people can use.

About us

Start using GC Design System

A design system just for you

Take a look around. Tell us what you think.

  • Components

    User interface building blocks address different user objectives.

    Select reusable code for common components, paired with best practice advice, for the framework you're using.

    View components
  • Page templates

    Reusable page layouts combine components into common page types.

    Start your project with basic, pre-built pages that provide a consistent, recognizable Canada.ca experience.

    Coming soon

  • Design tokens

    Brand and design decisions built into code.

    Learn how encoded decisions shape the design of government services for a consistent visual experience.

    View tokens
  • What's new

  • Get involved

    Check out what we're working on.

  • Release notes

    Read about the latest additions.

  • Featured component

    Card

    A card is a box containing structured, actionable content on a single topic.

    The card component shows a box containing a rectangular image in the top half. Immediately below is a blue rectangular bar running across three quarters of the box representing the card title. Two longer grey bars are stacked just below the blue bar, representing the card description and context area/metadata sections. Read more about card

    Date input

    A date input is a space to enter a known date.

    Thick grey lines at the top represent the legend and hint text. A white box with a thin grey border and a grey line and grey arrow inside of it represents the select input for the month. Beside this are two smaller white boxes with thin grey outlines representing the text inputs for the day and year. Read more about date input

    Help us improve

    Have questions? Something you'd change or you'd like to see? Share your feedback with us to help improve GC Design System.

    Give feedback
    2024-10-17