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 fondamentaux À propos des unités de styleNoms des unités de styleUtiliser les unités de style CouleurEspacementTypographie Nous contacterS'impliquerTrouvez 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 Participer à 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

  • À propos de Système de design GC
  • Équipes qui utilisent le système
  • Notre feuille de route
  • Nos tests d’accessibilité

S’impliquer

Participez à nos forums ou contribuez à nos prochaines priorités. 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.
Trois points horizontaux légèrement superposés dans des tons de bleu successivement foncés.
Raccourcis CSS 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.
Fondamentaux Explorez les lignes directrices et les décisions de design 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 :
  • Composants : Nouveau composant tableau et nouveau format de date ISO pour le champ de date
  • Documentation : Nouveaux exemples de code pour les attributs et emplacements de tous les composants, et nouveau guide d’utilisation sur la validation des composants de formulaire

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. Nous contacter
2026-11-02