Système de design GC
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Démarrer

Que vous soyez à l’étape de la conception ou du codage, commencez à utiliser Système de design GC.

Conception

Utilisez les bibliothèques de Système de design GC dans Figma pour créer des expériences front-end cohérentes et accessibles pour les outils et services du gouvernement du Canada. Nos composants sont conçus pour les sites statiques et les applications dynamiques. La bibliothèque de composants est offerte en français et en anglais, selon votre préférence de langue de travail. Elle comprend :
  • Composants accessibles
  • Modèles de page de démarrage rapide
  • Éléments de marque obligatoires pour Canada.ca
Une bibliothèque facultative d’unités de style est également offerte. Elle comprend les styles fondamentaux utilisés dans nos composants, notamment pour les couleurs, l’espacement, la typographie, et autres.

Fonctionnement

Système de design GC héberge ses composants et ses unités de style dans Figma. Figma est un outil qui permet de créer des prototypes cliquables d’applications et de sites Web en utilisant la bibliothèque de Système de design GC. Configurer une bibliothèque Figma

Développement

Que vous construisiez des pages HTML statiques ou des applications dynamiques faisant appel à un cadre JavaScript, Système de design GC peut vous aider.
  • Simplifiez votre livraison numérique.
  • Travaillez dans le cadre que vous souhaitez utiliser.
  • Créez des expériences numériques reconnaissables et dignes de confiance du gouvernement du Canada.
  • Construisez des produits qui répondent aux normes d’accessibilité du GC ou qui les surpassent.

Fonctionnement

Système de design GC propose des composants Web réutilisables et personnalisables. Les composants sont autosuffisants, combinant leur propre HTML, CSS et JavaScript pour l’encapsulation et la réutilisation.
  • Les composants sont agnostiques sur le plan technologique et peuvent être utilisés dans n’importe quel projet Web, quel que soit le cadre sous-jacent.
  • Système de design GC utilise des unités de style pour capturer les décisions de marque et de design dans le code pour des éléments de style comme les couleurs, la typographie et l’espacement.
  • Les changements y sont apportés dans le cadre de mises à jour uniques qui englobent les unités de style, les composants et les changements non rétrocompatibles.
  • Système de design GC est indépendant de la Boîte à outils de l’expérience Web (BOEW) et de GCWeb.
Installer Système de design GC 2026-09-02