-
Notifications
You must be signed in to change notification settings - Fork 1
Home
Welcome to the design system wiki!
The design system was created to unite teams in creating consistent digital services through inclusive design, open-source code and shared insights.
The design system system provides a framework and set of tools to help designers and developers build digital services more easily.
It 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 of three main parts:
- Figma libraries (Starter kit, Extended GC Design Library- DECD, and GC Design system (CORE))
- Design system documentation & guidance
- React components in a GitHub Repo
The Figma Starter kit file was designed to kick-start your product team's Figma designs for prototyping. It has the two key GC design systems component libraries enabled: GC Design Library (Core) and the Extended GC Design Library- DECD. Check out the starter kit here.
This library contains the approved Canada.ca components. Check out the library here.
This library contains the proposed components that have not been approved but 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.
Download the Starter Kit:
-
Copy this file.
-
Rename the file. Do not work in this original file.
-
Enable the 2 libraries:
a. Go to the "Assets" panel on the left and click the book icon at the top and a pop-up will display.
b. Under "Libraries used in this file" switch both toggles to ON. By using a copy of the starter kit these two libraries you will automatically receive updates to the component libraries.
c. Switch the DECD "Adriana's team" library to OFF.
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- DECD first. Only use components and styles from the GC Design Library (Core) if you cannot find what you need in the DECD 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 [Front of Lego Box] Content that supports the Design System. Examples include: About page, Using the DS, Support Devices, etc.
Styles [Back of Lego Box] 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.
Elemental components [Lego Bricks] 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.)
Composite components [Lego Sets] The designs and code that are made up of the building blocks to achieve design goals and a repeatable user experience. Examples include: Form, Table, Card, List, etc.
Component families [Lego Theme] A group of components with a similar design goal. Examples include: Forms, Tables, Reports, Cards, User, etc.
Guidelines [Lego Coach] 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.
Templates [Lego Instructions] 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.