Awesome
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.