Skip to content

A central design system for all Digital Collaboration Division products. This repo includes development packages and design files.

License

Notifications You must be signed in to change notification settings

gctools-outilsgc/aurora-design-system

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Aurora design system

Introduction

We created Aurora design system to standardize the visual language and user experience of the Digital Enablement’s (GCTools) online applications and tools.

Aurora was built by a multi-disciplinary team of developers, designers, UX researchers, writers and data scientists. Combining the expertise of all of these roles allowed us to create a design system with a wide range of elements.

Work for Aurora was done entirely in the open. We wanted to keep the spirit of government, while providing the quality and fun seen in the private sector.

Using Aurora is complementary to the Web Experience Toolkit (WET), Canada.ca Style Guide, the Federal Identity Policy (FiP) and WCAG 2.1.

Aurora is available for anyone who wants to use it!

How to use

Every element in Aurora design system has a design component, code and documentation. By downloading our UI kit (for Adobe Illustrator) you have access to all of the components sketches in addition to the code provided on the site.

We recommend that while building a new product you begin by following the system as closely as possible, then you can adapt certain elements (i.e. colours, language style, icons) to suit your own product or brand.

Packages

Aurora-css A NPM component for Aurora Design System CSS. Installation:

$ npm install @gctools-components/aurora-css

To use in your project enter the following.

import '@gctools-components/aurora-css/css/aurora.min.css';

aurora-ds A NPM component for Aurora Design System CSS and JS files. Installation:

$ npm install @gctools-components/aurora-ds

To use in your project enter the following.

import '@gctools-components/aurora-ds/css/aurora.min.css';

Design

The design files folder includes Adobe Illustrator .ai files for the UI kit, the Aurora logo and the Aurora banner.

Contributing

This repository is for all Issues and comments related to the Aurora development packages, individual components and design files. You can submit contributions related to Aurora components via Issues or Pull Requests in this repository. If you wish to contribute new components or designs, please contact sierra.duffey@tbs-sct.gc.ca

For Issues or feedback related to the Aurora documentation website, please refer to the Aurora-website repository.


Système de conception Aurora

Introduction

Nous avons créé le système de conception Aurora pour normaliser le langage visuel et l’expérience utilisateur des applications et des outils en ligne de l’habilitation numérique (OutilsGC).

Aurora a été conçu par une équipe multidisciplinaire de développeurs, de concepteurs, de chercheurs sur l’expérience utilisateur, de rédacteurs et de scientifiques des données. La combinaison de l’expertise de toutes ces personnes nous a permis de créer un système de conception avec un vaste éventail d’éléments.

Le travail pour Aurora s’est fait entièrement dans l’environnement ouvert. Nous voulions garder l’esprit du gouvernement, tout en offrant la qualité et la convivialité caractéristiques du secteur privé.

L’utilisation d’Aurora est complémentaire à la Boîte à outils de l’expérience Web (BOEW), au Guide de rédaction canada.ca, à la Politique sur l’image de marque et aux WCAG 2.1.

Aurora est disponible pour tous ceux qui veulent l’utiliser!

Comment l’utiliser

Chaque élément du système de conception Aurora a une composante de conception, un code et de la documentation. En téléchargeant notre trousse de l’IU (pour Adobe Illustrator), vous avez accès à toutes les esquisses des composants en plus du code fourni sur le site.

Lors de l’élaboration d’un nouveau produit, nous vous conseillons de commencer par suivre le système à la lettre, dans la mesure du possible, puis d’adapter certains éléments (p. ex., couleurs, niveau de langue, icônes) à votre produit ou à votre marque.

Progiciels

Aurora-css Une composante NPM pour le système de conception Aurora CSS. Installation :

$ npm install @gctools-components/aurora-css

Pour l’utiliser dans le cadre de votre projet, saisissez ce qui suit.

import '@gctools-components/aurora-css/css/aurora.min.css';

aurora-ds Une composante NPM pour les fichiers CSS et JS du  système de conception Aurora. Installation :

$ npm install @gctools-components/aurora-ds

Pour l’utiliser dans le cadre de votre projet, saisissez ce qui suit.

import '@gctools-components/aurora-ds/css/aurora.min.css';

Conception

Le dossier des fichiers de conception comprend les fichiers Adobe Illustrator .ai pour la trousse d’IU, le logo Aurora et la bannière Aurora.

Contribution

Ce référentiel est destiné à toutes les questions et tous les commentaires liés aux progiciels de développement Aurora, aux éléments individuels et aux fichiers de conception. Vous pouvez présenter des contributions liées aux composantes d’Aurora au moyen de Problèmes ou Demande de fusion de branches dans ce répertoire. Si vous souhaitez ajouter de nouvelles composantes ou de nouvelles conceptions, veuillez communiquer avec sierra.duffey@tbs-sct.gc.ca.

Pour des questions ou des commentaires concernant le site Web de documentation Aurora, veuillez consulter le référentiel du site Web Aurora.

About

A central design system for all Digital Collaboration Division products. This repo includes development packages and design files.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages