Difference between revisions of "Aurora"

	; Aurora design system logo
Aurora design system
Developer	Digital Collaboration Division
Initial release	September 24, 2018
Latest version	V1, September 24, 2018
Website	[1]
GitHub repository	Github Repository

Revision as of 13:40, 26 September 2018

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

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 and will continue to be iterated on to increase the number of components available, expand its code and documentation, and improve its user experience attributes.

Mission Statement

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

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

Role	Name(s)	Team	Contact Information
Project Leads	Genevieve Lemieux Sierra Duffey	Digital Collaboration Division	genevieve.lemieux@tbs-sct.gc.ca sierra.duffey@tbs-sct.gc.ca
UX Researchers	Rebecca Jeong Alex Mesley Donna Monbourquette	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 Nick Pietrantonio 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-Cote 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

Version one

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 one

Version one included HTML code, design elements and documentation for the following components:

Example of Tags component with HTML code

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

Aurora contained content guidelines and data visualization styles, and best practices for the following topics:

Category	Topic
Content	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

Research

Studies conducted by the Digital Collaboration Divison

Design systems used as inspiration and reference

Shopify Polaris

Designers Italia

Oracle Alta UI

List of awesome design systems

@@ Line 159: / Line 159: @@
 ==Versions==
-===Version One===
+===Version one===
+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.
-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.  Version one included HTML code, design elements and documentation for the following components:
+====Components in version one====
+Version one included HTML code, design elements and documentation for the following components:
 [[File:Tagsdesignsystem.PNG|700px|thumb|right|Example of Tags component with HTML code]]
@@ Line 170: / Line 172: @@
 |-
 |'''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====
+Aurora contained content guidelines and data visualization styles, and best practices for the following topics:
+{| class="wikitable"
+!Category
+!Topic
+|-
+|'''Content'''
 |Colour
 Icons