Skip to content

Home

Jump to bottom
rsamaroo-ss edited this page Feb 3, 2022 · 38 revisions

Welcome to the design system wiki!

What is the design system?

  • 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 (Starter kit, Extended GC Design Library - DECD, and GC Design system (CORE))
  • Design system documentation & guidance (this Wiki)
  • React components in a GitHub Repo

Figma libraries

Starter Kit

The Figma Starter kit file was designed to kick-start your product team's Figma designs for prototyping. It has templates that include our proposed Service Canada header and 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.

GC Design Library (Core)

This library contains the approved Canada.ca components. Check out the library here.

Extended GC Design Library- DECD

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.

Documentation

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.

React Components

Please see the Dev Resources page for more information and the Github Repo for the components.

How to use the design system

Designers - Getting Started

Download the Starter Kit:

  1. Copy this file or copy and paste the page templates from this file into your own file. Follow further instructions outlined in the 'Read me' page of the Figma, or as outlined in steps 2 and 3 below.

  2. If you choose to make a copy of the whole Figma file, rename the file. Do not work in this original file.

  3. Enable the 2 libraries in your working Figma file:

    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. You will automatically receive update notifications in your Figma file when changes are made to either component library.

    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.

Types of patterns in our design system

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.

Clone this wiki locally