# Système de design GOV.UK ## Aperçu de l’interface système de design GOV.UK Soumettez des champs vides, suivez les liens vers les erreurs, corrigez les réponses et modifiez une valeur depuis l’écran de récapitulatif. Aucune information ne quitte la page. ## Référence de conception système de design GOV.UK GOV.UK Frontend 6.5.1 et documentation v6 actuelle, vérifiés le 3 octobre 2026. Les valeurs hexadécimales constituent un instantané de référence ; en production, privilégiez les fonctions Sass nommées. L’aperçu charge les ressources locales officielles CSS et JavaScript avec une police alternative et une identité indépendante. ### Typographie et échelle responsive | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | govuk-heading-xl | 32px / 35px → 48px / 50px | Taille de police / interligne en dessous et au-dessus du seuil tablette ; titre de page. | | govuk-heading-l | 27px / 30px → 36px / 40px | Taille de police / interligne en dessous et au-dessus du seuil tablette ; titre de question. | | govuk-heading-m | 21px / 25px → 24px / 30px | Taille de police / interligne en dessous et au-dessus du seuil tablette ; titre de section. | | govuk-body-l | 21px / 25px → 24px / 30px | Taille de police / interligne en dessous et au-dessus du seuil tablette ; texte d’introduction. | | govuk-body | 19px / 25px → 19px / 25px | Taille de police / interligne en dessous et au-dessus du seuil tablette ; texte courant. | | govuk-body-s | 16px / 20px → 16px / 20px | Taille de police / interligne en dessous et au-dessus du seuil tablette ; texte complémentaire. | ### Éligibilité de la police | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | GDS Transport | service.gov.uk services | La police officielle est obligatoire pour les services hébergés sur ce sous-domaine. | | Independent preview | Helvetica Neue, Helvetica, Arial, sans-serif | Pile de polices alternative recommandée par les consignes Frontend sans marque ; aucun fichier Transport n’est chargé. | ### Espacement responsive et statique | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | unit 0 | 0px → 0px; static 0px | Responsive, de petit à grand ; govuk-spacing(unit) reste statique. | | unit 1 | 5px → 5px; static 5px | Responsive, de petit à grand ; govuk-spacing(unit) reste statique. | | unit 2 | 10px → 10px; static 10px | Responsive, de petit à grand ; govuk-spacing(unit) reste statique. | | unit 3 | 15px → 15px; static 15px | Responsive, de petit à grand ; govuk-spacing(unit) reste statique. | | unit 4 | 15px → 20px; static 20px | Responsive, de petit à grand ; govuk-spacing(unit) reste statique. | | unit 5 | 15px → 25px; static 25px | Responsive, de petit à grand ; govuk-spacing(unit) reste statique. | | unit 6 | 20px → 30px; static 30px | Responsive, de petit à grand ; govuk-spacing(unit) reste statique. | | unit 7 | 25px → 40px; static 40px | Responsive, de petit à grand ; govuk-spacing(unit) reste statique. | | unit 8 | 30px → 50px; static 50px | Responsive, de petit à grand ; govuk-spacing(unit) reste statique. | | unit 9 | 40px → 60px; static 60px | Responsive, de petit à grand ; govuk-spacing(unit) reste statique. | ### Noms de couleurs fonctionnels | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | govuk-functional-colour("text") | #0b0c0c | Contenu principal lisible | | govuk-functional-colour("secondary-text") | #484949 | Conseils et informations complémentaires | | govuk-functional-colour("link") | #1a65a6 | Liens courants | | govuk-functional-colour("link-hover") | #0f385c | Survol d’un lien | | govuk-functional-colour("link-visited") | #54319f | Destinations visitées | | govuk-functional-colour("border") | #cecece | Séparateurs structurels | | govuk-functional-colour("input-border") | #0b0c0c | Contour de saisie | | govuk-functional-colour("focus") | #ffdd00 | Focus clavier uniquement | | govuk-functional-colour("focus-text") | #0b0c0c | Texte jaune lors du focus | | govuk-functional-colour("error") | #ca3535 | Retour de validation | | govuk-functional-colour("success") | #0f7a52 | Confirmation de réussite | | govuk-functional-colour("body-background") | #ffffff | Surface de lecture | ### Principes de mise en page | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | govuk-width-container | 1020px maximum | Largeur par défaut du contenu extérieur ; peut être remplacée si le contenu le justifie réellement. | | govuk-grid-row + govuk-grid-column-two-thirds | 2/3 at wider widths | Gardez les questions et le texte dans une colonne lisible ; empilez les éléments sur les petites largeurs. | | govuk-main-wrapper | Main content region | À utiliser sur le repère principal, à l’intérieur du conteneur de largeur. | ### Points de rupture et contours des commandes | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $govuk-breakpoints.mobile | 320px | Clé de point de rupture Sass, et non mise en page supplémentaire obligatoire. | | $govuk-breakpoints.tablet | 641px | Point de rupture par défaut pour la typographie, l’espacement et la grille responsive ; la documentation des styles le décrit comme supérieur à 640px. | | $govuk-breakpoints.desktop | 769px | Point de rupture nommé supplémentaire. | | $govuk-focus-width | 3px | Épaisseur du contour de focus ; à associer au traitement du focus documenté. | ## Guide complet système de design GOV.UK Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Version et identité système de design GOV.UK ### Une référence v6 à l’identité indépendante > Cette référence s’appuie sur la documentation v6, notamment sur sa typographie plus grande sur petit écran et ses couleurs fonctionnelles révisées. Une ancienne capture d’écran peut donc afficher des valeurs différentes. Le tableau ci-dessus indique les valeurs par défaut documentées actuellement, sans mélanger discrètement les versions. L’étude en ligne porte sur une demande fictive concernant un événement communautaire. Elle n’utilise ni couronne, ni logotype GOV.UK, ni police Transport, ni véritable point de terminaison de soumission. Le contenu de la tâche et les règles de validation locale relèvent des choix de l’application ; la structure des composants s’appuie sur les exemples officiels associés. Consultez la spécification associée ### Choisir la bonne option typographique Pour un service éligible sur service.gov.uk, GDS Transport fait partie de l’implémentation officielle. Les services publics sur d’autres domaines doivent utiliser une autre police. Cette étude indépendante suit la solution recommandée Helvetica Neue, Helvetica, Arial, sans-serif ; changer de police ne nécessite pas d’abandonner la hiérarchie du système. Consultez la spécification associée ## Typographie et rythme de lecture système de design GOV.UK ### Utilisez la paire complète taille et interligne Utilisez govuk-heading-l pour la question et govuk-body pour le texte d’accompagnement. Sur les petits écrans, le titre est en 27/30px ; sur les écrans plus larges, il passe à 36/40px. En v6, le texte reste en 19/25px. Une taille de 16px pour le texte sur petit écran reproduirait le comportement d’une version antérieure plutôt que celui de cette référence. Le tableau des tailles présente les deux valeurs, car une capture d’écran prise à une seule taille de fenêtre ne permet pas d’établir la règle responsive. En production, CSS utilise des unités relatives. Une classe telle que govuk-heading-l détermine l’apparence, mais pas si l’élément sémantique doit être un h1 ou un h2. ``` .app-question-note { @include govuk-font($size: 19); } // Size and line-height only, without changing the font family: .app-existing-font { @include govuk-font-size($size: 19); } ``` Référence du code Consultez la spécification associée ## Système de design GOV.UK Espacement et largeur de page ### Les unités responsive ne correspondent pas à des pixels fixes L’unité 6 convient entre des groupes de questions : elle donne 20px sur un écran étroit et 30px au-delà du seuil tablette. L’utilitaire statique govuk-spacing(6) renvoie 30px quelle que soit la largeur. Choisir l’utilitaire modifie donc le comportement, même si les deux versions ont le même rendu sur ordinateur. ``` .app-question-group { @include govuk-responsive-margin(6, "bottom"); } .app-fixed-inset { padding: govuk-spacing(3); } ``` Référence du code Consultez la spécification associée ### Placez une colonne de lecture à l’intérieur du conteneur Le conteneur standard a une largeur maximale de 1020px. À l’intérieur, une colonne de grille occupant les deux tiers limite la largeur des questions tout en conservant l’alignement de la structure générale de la page. Sur petit écran, la présentation s’empile naturellement. Notre aperçu conserve cette hiérarchie de lecture au lieu d’étaler chaque champ dans une carte de tableau de bord. ```

Tell us about the event

``` Référence du code Consultez la spécification associée ## Système de design GOV.UK Couleurs et focus ### Utilisez des rôles plutôt que d’imiter d’anciennes captures d’écran Dans v6, la couleur fonctionnelle des liens est #1a65a6 et celle des erreurs est #ca3535. Dans une véritable compilation Sass, utilisez govuk-functional-colour("link") et govuk-functional-colour("error") afin qu’une mise à niveau puisse reprendre la palette en amont. Ces rôles fonctionnels ne se confondent pas avec le choix d’une couleur générale rouge ou bleue pour une illustration. Le jaune est réservé au focus. Il ne doit pas devenir la couleur par défaut d’une sélection ou d’un accent promotionnel. L’aperçu associe le jaune à un texte sombre et à un contour sombre bien visible ; une erreur reste identifiable par son texte et son emplacement, pas uniquement par le rouge. ``` .app-supporting-text { color: govuk-functional-colour("secondary-text"); } .app-custom-error { color: govuk-functional-colour("error"); } ``` Référence du code Consultez la spécification associée ## Système de design GOV.UK Composants de question ### Un champ est un ensemble cohérent L’exemple de saisie combine govuk-form-group, govuk-label, govuk-hint et govuk-input. Le libellé cible l’ID du champ ; aria-describedby pointe vers l’indication. En cas d’erreur, ajoutez également l’ID du message d’erreur, ainsi que les classes d’erreur. Une bordure rouge sans cette relation ne constitue pas une reproduction complète. Cette demande regroupe le nom de l’événement et l’adresse e-mail de contact. Il s’agit de deux valeurs avec leurs propres libellés, réunies dans une courte démarche, et non d’une consigne visant à placer chaque champ sur une page distincte. Dans l’aperçu, les deux champs sont obligatoires uniquement pour illustrer la validation ; cela ne définit aucune exigence réelle de permis. - Libellé permanent : Nom de l’événement. - Indication permanente : Utilisez le nom indiqué dans les informations sur votre événement. - Message d’erreur permettant de corriger la saisie : Saisissez un nom d’événement. Consultez la spécification associée ### Le balisage natif et le comportement de l’application ont des rôles différents GOV.UK Frontend met en forme les composants et les enrichit. Il ne détermine pas quelles adresses e-mail sont acceptées par ce service, n’enregistre pas de brouillon et ne reçoit pas les demandes. Dans l’aperçu, JavaScript valide les deux champs et stocke leurs valeurs uniquement sur la page en cours. Le rechargement efface les données de l’étude. Consultez la spécification associée ## Système de design GOV.UK Correction des erreurs par lien ### Faites du résumé un raccourci vers la correction Après une action Continuer qui échoue à la validation, affichez le résumé des erreurs avant le formulaire et déplacez le focus dessus. Chaque lien de la liste cible la réponse correspondante. Pour un champ de texte unique, ciblez son ID ; pour un choix groupé, ciblez le premier contrôle approprié, conformément aux recommandations officielles. Le résumé natif utilise data-module="govuk-error-summary" pour son amélioration progressive. L’aperçu n’insère le résumé qu’en cas d’échec de la validation, puis instancie ErrorSummary à partir du module local 6.5.1. La bibliothèque gère le focus et la navigation par liens ; l’application fournit les messages, conserve les valeurs et supprime les erreurs obsolètes. Consultez la spécification associée ### Essayez le parcours de correction Cliquez sur Continuer en laissant les deux champs vides. Suivez le lien de l’erreur sur le nom de l’événement, saisissez un titre fictif, puis une adresse e-mail non valide. Cliquez de nouveau sur Continuer : seule l’erreur restante doit s’afficher et le titre doit être conservé. Corrigez l’adresse pour accéder à la vérification. Le comportement attendu est ainsi visible, au lieu d’afficher une erreur permanente dans un exemple. Consultez la spécification associée ## Système de design GOV.UK Vérifier les réponses et les modifier ### Utilisez une liste de définitions, pas un tableau de données L’écran de vérification des réponses contient un govuk-summary-list. Chaque ligne comprend une clé dt, une valeur dd et une zone d’actions dd. Un libellé masqué après Modifier précise la réponse concernée. Les noms d’événement longs passent à la ligne dans la valeur sans masquer le lien de modification. L’action de modification réaffiche le formulaire et place le focus sur le champ sélectionné. En continuant, la validation est relancée et la vérification affiche les réponses mises à jour. Le retour au formulaire relève du code de l’application ; le système de design fournit la structure de présentation. Consultez la spécification associée ### Arrêtez-vous à la limite de ce qui est réellement pris en charge Cette étude s’arrête à la vérification, car aucun service ne reçoit les données. Une véritable page de vérification précède l’action d’envoi et doit afficher les informations qui seront envoyées. Une application comportant des déclarations ou une confirmation côté serveur nécessite une logique de service supplémentaire ; un panneau vert ne peut pas produire ce résultat. 1. Complétez les deux réponses fictives, puis passez à la vérification. 2. Choisissez Modifier le nom de l’événement ; ne modifiez que cette réponse. 3. Continuez et vérifiez que le titre corrigé et l’adresse e-mail conservée sont tous deux présents. Consultez la spécification associée ## Système de design GOV.UK Intégration frontend ### Compilez le fichier Sass d’entrée sans marque La configuration ci-dessous utilise govuk-frontend@6 et Dart Sass avec l’importateur de paquets Node. Elle compile la configuration de polices sans marque documentée et copie la distribution du navigateur JavaScript. Validez le fichier de verrouillage résolu afin que la version exacte soit consignée dans un véritable projet. L’exemple ne charge pas Transport et n’utilise pas d’images gouvernementales. Un service utilisant une marque officielle doit également servir les ressources officielles via le chemin d’accès documenté. Les applications qui utilisent un autre outil de compilation peuvent conserver le même module Sass et le même point d’entrée initAll, en adaptant leur empaquetage. Consultez la spécification associée ### Initialisez les composants une fois leur balisage en place Pour une page statique, chargez le module copié et appelez initAll. Dans une application rendue côté client, initialisez une région nouvellement insérée avec initAll({ scope: element }) une fois cette région disponible. N’initialisez pas au démarrage un exemple d’erreur masqué en le prenant pour un parcours de validation actif. L’aperçu autonome utilise les versions officielles copiées localement de CSS et JavaScript, en version 6.5.1. Une surcharge typographique de portée limitée remplace Transport dans toute l’étude. La validation du formulaire et l’écran de récapitulatif relèvent du code de l’application, tandis que l’amélioration de Button et d’ErrorSummary provient de la bibliothèque. La recette de compilation Sass distincte décrit la configuration configurable recommandée ; cette compilation n’a pas été exécutée ici. Consultez la spécification associée ## Exemples de composants du système de design système de design GOV.UK ### Champ de saisie : libellé, texte d’aide et erreur en ligne L’état d’exemple ajoute le modificateur d’erreur au groupe et au champ de saisie. La description du champ associe, par leurs ID, le texte d’aide persistant et l’erreur actuelle. ```
Use the name shown on your event information.

Error: Enter an event name

``` Référence du code - Dans l’état valide, supprimez le paragraphe d’erreur, les modificateurs d’erreur et l’ID de l’erreur dans aria-describedby. - Conservez la valeur réelle en cas d’échec de la validation ; utilisez une sortie serveur échappée ou l’affectation de texte/valeur au DOM. ### Récapitulatif des erreurs : accéder à la réponse Placez le récapitulatif avant le contenu de la question. Son message correspond à l’erreur en ligne et son lien cible le champ de saisie, et non un conteneur sans rapport. ```

There is a problem

``` Référence du code - Dans une implémentation native, l’initialisation du frontend fournit le comportement de mise au focus du récapitulatif. - Dans l’étude interactive, un nouvel ErrorSummary est créé après l’insertion de chaque récapitulatif d’échec de validation ; la validation de l’application reste distincte. ### Vérifier les réponses : une liste récapitulative sémantique Une liste de définitions associe le libellé de la réponse à sa valeur et à une destination de modification précise. Le suffixe masqué permet de distinguer les liens « Modifier » répétés. ```
Event name
Riverside community picnic
Change event name
``` Référence du code - Le paramètre returnTo est une convention de l’application utilisée ici, et non un élément de Frontend API. - Revenez de la modification au récapitulatif en conservant toutes les autres réponses. ### Exemple autonome complet Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via HTTP. ``` Event enquiry — OpenDesign component study Skip to main content

OpenDesign · Component studyGOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.

Tell us about the event

Enter fictional details to try linked validation and the check-answers pattern.

Use the name shown on your event information.
For example, organiser@example.com. Use a fictional address.
``` Référence du code - Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement. - Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu. ## Configuration de l’agent IA système de design GOV.UK ### Point de départ de l’implémentation Placez séparément les commandes shell, le contenu de app.scss et les fragments HTML aux emplacements indiqués. L’aperçu utilise des ressources officielles 6.5.1 copiées localement, avec une surcharge typographique ; cette recette de compilation Sass est documentée, mais n’a pas été compilée dans cet espace de travail. L’archive ZIP complète de l’exemple fonctionnel, disponible dans Sources, fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-la, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/gov-uk.html. N’ouvrez pas les exemples utilisant des modules via file://. ``` # Run in a project directory npm install govuk-frontend@6.5.1 npm install --save-dev sass mkdir -p public/assets # Save the following as app.scss @use "pkg:govuk-frontend" as * with ( $govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif) ); # Compile, then copy the browser module npx sass --pkg-importer=node app.scss public/assets/app.css cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/ ``` ### Un prompt pour votre projet ``` Mettez en œuvre le formulaire de demande d’événement à deux champs avec GOV.UK Frontend v6 et la configuration de police Helvetica sans identité de marque décrite dans ce guide. Utilisez les structures réelles form-group/input/error-summary et summary-list, des erreurs en ligne associées, la conservation des réponses, des liens « Modifier » ciblés et une finalisation limitée au récapitulatif. Appliquez les règles typographiques et d’espacement adaptatives documentées au moyen des classes Frontend. Conservez l’identité réelle du projet et ne créez ni soumission officielle ni résultat de backend inventé. Vérifiez les états : champs vides, adresse e-mail invalide, correction, récapitulatif et modification d’une réponse. ``` ## Sources et périmètre système de design GOV.UK Étude indépendante d’une application OpenDesign utilisant les composants CSS et JavaScript de GOV.UK Frontend 6.5.1. Aucun logo gouvernemental, aucune police Transport, aucun service officiel, aucune soumission réelle ni certification de conformité ne sont sous-entendus. Les règles du formulaire et la navigation du récapitulatif sont du code original de l’application. - Échelle typographique v6 Paires taille/interligne pour les petits et les grands écrans. - Espacement adaptatif Unités fixes et adaptatives et fonctions Sass. - Couleurs fonctionnelles Rôles actuels et accesseurs Sass. - Mise en page Composition du conteneur et de la grille. - Champ de saisie Structure du libellé, du texte d’aide et de l’erreur. - Récapitulatif des erreurs Correction par lien et comportement de mise au focus. - Liste récapitulative Clés, valeurs et actions de modification contextuelles. - Sans identité visuelle GOV.UK Police, identité et configuration Sass. - Inclure CSS Dart Sass et intégration du package. - Importer JavaScript Modules du navigateur et initAll. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Ressources associées système de design GOV.UK ### HarvardSites système de design Découvrez HarvardSites en tant que plateforme éditoriale : comparez les styles de site, choisissez des associations de polices documentées et composez des pages universitaires à partir de composants de contenu conçus à cet effet. ### Helsinki Composez des groupes de sélection HDS natifs, des couleurs de retour sémantiques et des résumés d’erreurs liés, avec un parcours complet de vérification et de correction en local. ### Rivet Créez des pages universitaires avec l’échelle de tokens réelle de Rivet, l’anatomie de ses composants HTML et des interactions clavier natives. Découvrez une page de présentation compacte d’atelier avec des onglets accessibles pour les informations pratiques. - [Référence de mise en œuvre](https://design-system.service.gov.uk/components/error-summary/) - [Source](https://design-system.service.gov.uk/styles/type-scale/) - [Source](https://design-system.service.gov.uk/styles/typeface/) - [Source](https://design-system.service.gov.uk/styles/spacing/) - [Source](https://design-system.service.gov.uk/styles/colour/) - [Source](https://design-system.service.gov.uk/styles/layout/) - [Source](https://frontend.design-system.service.gov.uk/sass-api-reference/) - [Consultez la spécification associée](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [Consultez la spécification associée](https://design-system.service.gov.uk/styles/typeface/) - [Référence du code](https://design-system.service.gov.uk/styles/type-scale/) - [Consultez la spécification associée](https://design-system.service.gov.uk/styles/type-scale/) - [Référence du code](https://design-system.service.gov.uk/styles/spacing/) - [Consultez la spécification associée](https://design-system.service.gov.uk/styles/spacing/) - [Référence du code](https://design-system.service.gov.uk/styles/layout/) - [Consultez la spécification associée](https://design-system.service.gov.uk/styles/layout/) - [Référence du code](https://design-system.service.gov.uk/styles/colour/) - [Consultez la spécification associée](https://design-system.service.gov.uk/styles/colour/) - [Consultez la spécification associée](https://design-system.service.gov.uk/components/text-input/) - [Consultez la spécification associée](https://design-system.service.gov.uk/patterns/question-pages/) - [Consultez la spécification associée](https://design-system.service.gov.uk/components/error-summary/) - [Consultez la spécification associée](https://design-system.service.gov.uk/components/summary-list/) - [Consultez la spécification associée](https://design-system.service.gov.uk/patterns/check-answers/) - [Consultez la spécification associée](https://frontend.design-system.service.gov.uk/include-css/) - [Consultez la spécification associée](https://frontend.design-system.service.gov.uk/import-javascript/) - [Référence du code](https://design-system.service.gov.uk/components/text-input/) - [Référence du code](https://design-system.service.gov.uk/components/error-summary/) - [Référence du code](https://design-system.service.gov.uk/components/summary-list/) - [Échelle typographique v6 Paires taille/interligne pour les petits et les grands écrans.](https://design-system.service.gov.uk/styles/type-scale/) - [Espacement adaptatif Unités fixes et adaptatives et fonctions Sass.](https://design-system.service.gov.uk/styles/spacing/) - [Couleurs fonctionnelles Rôles actuels et accesseurs Sass.](https://design-system.service.gov.uk/styles/colour/) - [Mise en page Composition du conteneur et de la grille.](https://design-system.service.gov.uk/styles/layout/) - [Champ de saisie Structure du libellé, du texte d’aide et de l’erreur.](https://design-system.service.gov.uk/components/text-input/) - [Récapitulatif des erreurs Correction par lien et comportement de mise au focus.](https://design-system.service.gov.uk/components/error-summary/) - [Liste récapitulative Clés, valeurs et actions de modification contextuelles.](https://design-system.service.gov.uk/components/summary-list/) - [Sans identité visuelle GOV.UK Police, identité et configuration Sass.](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [Inclure CSS Dart Sass et intégration du package.](https://frontend.design-system.service.gov.uk/include-css/) - [Importer JavaScript Modules du navigateur et initAll.](https://frontend.design-system.service.gov.uk/import-javascript/)