-
Notifications
You must be signed in to change notification settings - Fork 1
Home
Welcome to the design system wiki!
-
Set of tools to unite teams in creating consistent digital services through inclusive design, open-source code, and shared insights
-
Provides a framework and set of tools to help designers and developers build digital services more easily
-
Supports product teams to deliver a consistent experience for all digital service users in line with the Digital Service Standard
The design system is made up of three main parts:
- Figma libraries (Extended GC Design Library and GC Design system (CORE))
- Design system documentation & guidance (this Wiki)
- React components in a GitHub Repo
This library contains the approved Canada.ca components. Check out the library here.
This library contains the proposed components and are good for prototyping and user testing. Any components that have been alters, augments, or added can be found in this library. Check out the library here.
Each component, style, template, guideline, and article can be found by searching in the right-hand side menu or directly from the table of contents.
All component documentation follows a similar pattern that is designed to help you quickly and efficiently understand how to use the component, any variations, limitations, and customizations. See the documentation template to learn more.
Please see the Dev Resources page for more information and the Github Repo for the components.
After you have enabled the libraries:
- Components from both libraries can be found in the assets panel on the left.
- Styles can be selected from the right panel under the 4-dots icons beside each respective label.
- Use components and styles from the Extended GC Design Library first. Only use components and styles from the GC Design Library (Core) if you cannot find what you need in the Extended GC Design Library .
- This starter kit file contains basic screen templates (in both languages and both authenticated and non-authenticated) to provide a starting point for your designs.
- Refer to the documentation provided when implementing a component.
Articles
Content that supports the Design System. Examples include: About page, Using the DS, Support Devices, etc.
Styles
Content that describes the look & feel of the design system; providing rules, resources and visual standards that support the development of the Design System and using the components. Examples include: Type, Colour, Grid, Responsive Breakpoints, Images, Icons, etc.
Components
The designs and code that make up the building blocks of the design system. These generally follow the HTML elements. Examples include: Header (H1, H2..), Buttons, Form inputs, etc.) and some custom ones (Date Picker, Menu, Progress Bar, etc.)
Guidelines
Content that explains how to best choose or use components to achieve design goals and a repeatable, validated user experience. Examples include: What kind of form do you need? Designing engaging landing pages, Choosing the right header, Effective table design, etc.
Patterns
The interaction of components in a user flow to achieve design goals and repeatable, validated user experience. Examples include: consequential callout, exposed after, etc.
Templates
Content that explains how to bring components together to achieve design goals and repeatable, validated user experience. Examples include: Blog posts, Reports, Benefit details, Compliance statements, etc.