Important: The GCConnex decommission will not affect GCCollab or GCWiki. Thank you and happy collaborating!
Aurora
 |
This page is a work in progress. We welcome your feedback. Please use the discussion page for suggestions and comments. When the page is approved and finalized, we will send it for translation. |
 Aurora design system logo | |
| Aurora design system | |
|---|---|
| Developer | Digital Collaboration Division |
| Initial release | September 24, 2018 |
| Latest version | V1, September 24, 2018 |
| Website | design.gccollab.ca |
| UI kit | Download UI kit |
| GitHub repository | Github Repository |
Aurora design system is a central design guide developed in 2018 by the Digital Collaboration Division within the Treasury Board of Canada Secretariat of the Government of Canada. It was built through a collaborative effort between various designers, developers and writers across the Government of Canada.
Lead by the Digital Collaboration Division at the Treasury Board of Canada Secretariat, Aurora design system was created in collaboration with the Canadian Digital Service: Talent Cloud, Immigration, Refugees and Citizenship Canada, and other individuals within Government of Canada. Aurora design system was created to standardize the visual language and user experience of the Open Accessible Digital Workplace's online applications and tools.
Overview[edit | edit source]
Aurora design system is a catalogue of user interface elements, writing style, guiding principles, coding standards, visual design, etc. for use in the Open Accessible Digital Workplace's applications. It was built in the open with contributions from developers, designers, writers and data scientists. Aurora design system is an ongoing project. Future iterations will be made to increase the number of components available, expand its code and documentation, and improve its user experience attributes.
Mission Statement[edit | edit source]
Make a design system for the Government of Canada’s digital collaboration tools that can also be reused and applied to other public or internal digital services and products. This system will help to ensure a seamless experience for users across platforms, will be easy to use, and quick for developers and designers to implement. The design system will provide a basic framework with guiding principles and components, with the ability to be adapted to other brands and needs.
Principles[edit | edit source]
Aurora design system adheres to the following principles:
- Simple and flexible: Provides all necessary elements without being restrictive. Aurora Design System is a lightweight system that can be adapted to suit a specific product.
- Fun to use: Makes the job of developers and designers easier rather than add extra burdens or obligations to follow. Aurora Design System has an aesthetically pleasing design that is easy to navigate and adapt.
- Re-usable: Suits a variety of needs. All components and principles are generic enough to be applied to a wide range of digital products. Code and design elements can easily be extracted to create new products, and communications guidelines are easy to understand and follow.
- Diverse: Covers a variety of needs and types of products. Aurora Design System follows necessary Government of Canada obligations such as official languages and accessibility
- Technology agnostic: Applicable to any technologic framework that a team decides to use for their project.
- Open: To anyone who wishes to use it. All of Aurora Design System’s code is open source, and all other guidelines and elements are free to copy.
Project Team[edit | edit source]
| Role | Name(s) | Team | Contact Information |
|---|---|---|---|
| Project Leads | Genevieve Lemieux | Digital Collaboration Division | genevieve.lemieux@tbs-sct.gc.ca
sierra.duffey@tbs-sct.gc.ca |
| UX Researchers | Rebecca Jeong | Digital Collaboration Division | rebecca.jeong@tbs-sct.gc.ca
alex.mesley@tbs-st.gc.ca donna.monbourquette@tbs-sct.gc.ca |
| Front-End (UI) Developers | Ethan Wallace
Simon Roy Omar Nasr Daniel Spence |
Digital Collaboration Division
Health Canada Canada Revenue Agency |
ethan.wallace@tbs-sct.gc.ca
nicholas.pietrantonio@tbs-sct.gc.ca stephanie.lefebvre@tbs-sct.gc.ca simon.roy@tbs-sct.gc.ca omar.nasr@canada.ca daniel.spence@cra-arc.gc.ca |
| Graphic Designers | Michael Martel Sabrina Rowland Côté Chuma Asuzu |
Digital Collaboration Division IRCC |
michael.martel@tbs-sct.gc.ca sabrina.rowland-cote@tbs-sct.gc.ca michael.asuzu@cic.gc.ca |
| Technical Writers | Marianne Aubrey
Nneka Nnagbo |
Digital Collaboration Division
Canada Revenue Agency |
marianne.aubrey@tbs-sct.gc.ca
nneka.nnagbo@cra-arc.gc.ca |
| Partnership Liaison | Heather Laird | Digital Collaboration Division | heather.laird@tbs-sct.gc.ca |
| Consultants | Sean Boots
Thomas Gohard Paul Jackson Gerardo Escandon |
Canadian Digital Service
OneGC (TBS) OneGC (TBS) Talent Cloud |
sean.boots@tbs-sct.gc.ca
thomas.gohard@tbs-sct.gc.ca paul.jackson@tbs-sct.gc.ca |
Versions[edit | edit source]
Version 1[edit | edit source]
Released on September 24th, 2018, the first version of Aurora design system included components, as well as best practices for written content and data visualization.
Components in Version 1[edit | edit source]
Version 1 included HTML code, design elements and documentation for the following components:
| Component Type | Component |
|---|---|
| Visuals | Colour
Icons Typography |
| Standard | Avatars and thumbnails
Badges Buttons Cards Divider/rule Grids and spacing System messaging Tags, chips and pills Tooltips |
| Navigation | Breadcrumbs
Back to top Links Pagination and scrolling Search |
| Forms | Form design and labels
Button inputs Errors and validation File upload Progress indicators Text inputs |
Content and data[edit | edit source]
Aurora Version 1 contained content guidelines and data visualization styles, and best practices for the following topics:
| Category | Topic |
|---|---|
| Content guidelines | Reading level and plain language
Spelling Addressing users Referring to product owners and the Government of Canada Useful tools |
| Content formatting | Aurora follows the Canadian Press Style Guide:
Capitalization Dates, numbers and addresses Time Units of measurement Ampersands Commas, ellipses, colons Slashes and hyphens Bold and italics Quotation marks |
| Glossary | Containing definitions of words commonly used by the Digital Collaboration Division. |
| System vocabulary | Containing definitions of words appearing in Aurora and its tools. |
| Data overview | Best practices of data visualization
Multiple formats Labels Colours and textures Stylized numbers |
| Choosing visualizations | Tables
Bar and column graphs Line graphs Scatterplots |
| Legends and tooltips | Side aligned legend
Bottom aligned legend |
Future Updates[edit | edit source]
As Aurora is an iterative product, updates and fixes will be applied on a regular schedule. All versioning is subject to change based off of changing priorities and user feedback. Currently three iterations have been planned.
Version 1.2[edit | edit source]
Version 1.2 will fix known bugs, as well as add components and content that are in progress from Version 1.
Fixes[edit | edit source]
- Improvements to mobile navigation
- Review of all of the alternative text on the site
- Apply usability and accessibility fixes
- Add proper translations in code blocks
- Fix inconsistency in components
Updates[edit | edit source]
- Download page with distribution file and UI kit
- Contact page
- Help articles formatting
- Comments
- Menus
- Do and don't images
Version 1.3[edit | edit source]
Version 1.3 will update the navigation elements in Aurora, as well as address fixes from user feedback from Version 1.2.
Updates[edit | edit source]
- Drawers and accordions
- Header and Footer
- Sidebar
- Tabs
- Alternative Text article
- Research page for design system-related studies
Version 2[edit | edit source]
Version 2 will be a major update to Aurora design system. Content based off the Open Accessible Digital Workspace will be added, as well as additional resources and common layouts. Fixes from user feedback of Version 1.3 will be addressed.
Identity[edit | edit source]
- Values and mission statement
- Logo
- Brand colours
- Taglines
- Voice and tone
Resources[edit | edit source]
- Inclusive design
- Research and best practices
Layouts[edit | edit source]
- Site navigation
- App navigation
- Login page
- Stats dashboard
Research[edit | edit source]
Studies conducted by the Digital Collaboration Divison[edit | edit source]
- Mood Board Survey
- Card-Sorting: Information Architecture
- Report: Typography and Data Visualizations
- Final Architecture for Design System
Design systems used as inspiration and reference[edit | edit source]
