Système de design GC Démarrer Aperçu des modèles de page Page de base Aperçu des composants Avis Barre de navigation latérale Barre de navigation supérieure Bascule de langue Bouton Boutons radio Carte Cases à cocher Champ de date Champ de saisie Chemin de navigation Conteneur Date de modification Détails En-tête Grille Icône Indicateur d'étape Jeu de champs Lien Masquage accessible Menu thématique Message d'erreur Pagination Pied de page Recherche Résumé des erreurs Signature Sélection Texte Titre Téléverseur de fichiers Zone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactive État Affichage Dimensionnement de la boîte Dimensionnement du conteneur Débordement Position Visibilité Alignement de texte Couleur de lien Couleur de texte Débordement de texte Décoration de texte de lien Famille de police Hauteur de ligne Police Saut de mot Style de liste Style de police Taille de lien Taille de police Transformation de texte Épaisseur de police Marge Marge intérieure Agencement de contenu Agencement des éléments Agencement individuel Alignement de contenu Alignement des éléments Alignement individuel Colonnes de grille Direction de l’élément flexible Dégagement Habillage de l’élément flexible Justification de contenu Justification des éléments Justification individuelle Lignes de grille Ordre Rétrécissement de l’élément flexible Élargissement de l’élément flexible Élément flexible Couleur de la bordure Couleur de l’arrière-plan Largeur de la bordure Rayon de la bordure Style de la bordure Image Noms des icônes Taille de l'icône Curseur Transition Événements de pointeur Aperçu des styles Unités de style Unités de style de couleur Unités de style d'espacement Unités de style typographie Contactez-nous Impliquez-vous Trouvez une démo

Système de design GC

Un système de design officiel et prêt pour la production destiné au gouvernement du Canada. Créez des services gouvernementaux modernes, accessibles et humains.

Démarrer Participez à une démo

Choisissez Système de design GC

Système de design GC aide les fonctionnaires à concevoir des sites Web et des produits du gouvernement du Canada. Créez plus rapidement, sans compromettre ni l’identité de marque, ni l’accessibilité, ni le bilinguisme. Trouvez du code prêt pour la production, des ressources de design et de la documentation en un seul et même endroit.

Pour en savoir plus

Renseignez-vous à propos de Système de design GC, des équipes qui l’utilisent, de nos tests réguliers en matière d’accessibilité et des façons d’améliorer l’accessibilité de vos produits et sites Web.

S’impliquer

Nous adaptons continuellement notre produit pour mieux répondre à vos besoins et vous offrir plus d’options.

S’impliquer

Des outils pour les problèmes courants

Appliquez ou combinez ces outils pour aborder les scénarios de services communs. Créez et construisez rapidement des expériences fiables et unifiées.

Trois formes distinctes, un rectangle rose à côté d'un carré vert et d'un carré jaune, forment le contour d'un plus grand carré.
Composants

Répondez aux besoins communs en matière d’interaction des services à l’aide du code, de la conception et des conseils pour la mise en œuvre de composants d’interface utilisateur.

Un rectangle vertical rempli d'un dégradé du rose au bleu.
Modèles de page

Commencez votre projet à l’aide de pages préconstruites offrant une expérience uniforme et reconnaissable pour Canada.ca.

Un badge en haut à gauche avec le mot nouveau. Trois points horizontaux légèrement superposés dans des tons de bleu successivement foncés.
Raccourcis CSS (Nouveau)

Appliquez des styles et des mises en page prédéfinis en ajoutant nos classes utilitaires CSS personnalisées à votre code HTML.

Un groupe de quatre points violets, bleus, verts et jaunes.
Styles

Explorez les décisions de marque et de design codées qui façonnent une expérience visuelle cohérente.

Nouveautés

Parcourez les dernières fonctionnalités et les derniers ajouts au code dans le journal des modifications dans GitHub.

Dernières versions :

  • Nouveau : Paquets stables v1.0.0 pour les composants et les unités de style
  • Mise à jour : Échelle de couleurs élargie avec de nouvelles unités de style de base
  • Nouveau : Bibliothèque Figma distincte pour les unités de style

À venir

Explorez notre feuille de route pour suivre nos progrès et voir sur quoi nous travaillerons prochainement.

Contactez-nous

Si vous avez des questions, si vous voulez vous impliquer ou si vous voulez vous inscrire à notre liste de diffusion, n’hésitez pas à communiquer avec nous.

Contactez-nous
2026-03-11