# Système de design ONS ## Aperçu de l’interface système de design ONS Essayez plusieurs modes de déplacement, la réponse contradictoire, la validation d’une réponse vide, l’évaluation locale et la conservation des modifications. ## Référence de conception système de design ONS ONS Design System 73.13.1 compilé CSS, JavaScript et variables Sass, vérifiés par rapport au manuel de service public. L’exemple utilise les comportements natifs Checkbox et Mutually Exclusive. Dans l’exemple autonome, Arial remplace OpenSans ; la procédure de copie pour la production inclut les polices fournies dans le package. La question sur les déplacements et l’évaluation locale sont des contenus de démonstration originaux. ### Matrice typographique | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Primary family | OpenSans, Helvetica Neue, Arial, sans-serif | Les recommandations officielles sur les polices indiquent Open Sans, variante stylistique 1 ; la démo utilise intentionnellement Arial. | | ons-u-fs-3xl | 32/44px → 48/56px | Du petit au grand au point de rupture moyen ; graisse 700. | | ons-u-fs-2xl | 28/40px → 36/48px | Graisse 700 ; hiérarchie de la taille des titres. | | ons-u-fs-xl / ons-u-fs-l | 26/36 → 30/40px; 24/32 → 26/36px | Tailles et interlignages adaptatifs natifs, sans clamp fluide. | | ons-u-fs-m | 20/28px → 22/32px | Graisse 700. | | ons-u-fs-r / ons-u-fs-s | 18/28px / 14/20px | Normal 400 ; les variantes --b utilisent 700. | ### Rôles des couleurs sémantiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ons-color-text | #222 | Correspond à --ons-color-black. | | --ons-color-text-link | #206095 | Bleu océan ; bleu nuit au survol/à l’activation #003c57. | | --ons-color-focus | #fbc900 | Indication du focus jaune soleil. | | --ons-color-button | #0f8243 | Vert feuille ; distinct de la couleur des liens. | | --ons-color-errors | #d0021b | Erreurs en rouge rubis, accompagnées d’une explication écrite. | | --ons-color-info-tint | #e9eff4 | Arrière-plan du panneau d’information ; ne remplace pas une case à cocher sélectionnée. | ### Valeurs réelles des utilitaires d’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | ons-u-mb-xs / s / m | 12px /16px /20px | Valeurs des utilitaires de marge inférieure avec une racine de 16px. Elles comprennent des incréments qui ne figurent pas dans la grille de base documentée de 8px. | | ons-u-mb-l / xl | 24px /32px | Utilisez les utilitaires de la version publiée ; ne déduisez pas toutes les valeurs d’une simple indication sur la grille de base. | ### Modèle de mise en page et d’adaptation | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Grid | 12 percentage-width columns | ons-grid > ons-grid__col avec des classes de colonnes adaptatives. | | Medium column | ons-col-8@m | Huit colonnes à partir de740px ; pleine largeur en dessous. | | Breakpoints | 300,400,500,740,980,1300,1600px | 2xs,xs,s,m,l,xl,2xl. | | Baseline | Multiples of8px | Rythme documenté de la grille ; ne supposez pas que chaque bordure ou police le respecte. | | Documented gutters | 16px below600;24px at600+ | Vérifiez la version CSS avant de remplacer les classes de grille. | | Default container | 64.6256rem maximum;1rem horizontal padding | CSS 73.13.1 vérifié, environ1034px avec une racine de 16px. | ### Points d’ancrage de l’exclusion mutuelle | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Group root | ons-js-mutually-exclusive | Le script natif repère ce conteneur lorsque le DOM est prêt. | | Regular options | ons-js-exclusive-group-item | Peuvent être combinés ; la sélection de l’un efface l’option exclusive opposée. | | Opposing choice | ons-js-exclusive-option | La sélection de cette option efface les valeurs du groupe standard. | | Explanation | data-deselect-message | Texte d’avertissement pour le choix opposé. | | Announcement | ons-js-exclusive-alert | Région dynamique avec data-group-adjective et data-option-adjective. | | State updates | click for checkbox/radio;input for text | Le contrôleur met en cache hasValue ; la réinitialisation de l’application doit utiliser les événements natifs. | ## Guide complet système de design ONS 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. ## Conception spécifique aux questionnaires système de design ONS ### Préserver le sens d’une réponse > ONS assure à la fois la collecte statistique et la publication d’informations. Dans un questionnaire, les réponses mutuellement exclusives relèvent de la qualité des données : l’utilisateur ne doit pas pouvoir envoyer à la fois un mode de déplacement et une réponse indiquant qu’aucun trajet n’a eu lieu. Le composant natif Mutually Exclusive associe ces options et explique la désélection aux technologies d’assistance. L’exemple pose une question originale sur les déplacements liés à une bibliothèque et propose un aperçu local des réponses. Il évite délibérément les éléments graphiques de l’identité d’ONS et ne prétend pas que les réponses sont collectées. Un questionnaire de production nécessiterait ses propres règles de consentement, de conservation, de routage et de validation côté serveur. Consultez la spécification associée ## Hiérarchie lisible des questions système de design ONS ### Une légende peut faire office de titre de page La famille principale est Open Sans, avec la variante stylistique 1 choisie pour ses formes de lettres distinctives. La matrice typographique native Sass utilise des valeurs fixes, petites et grandes, plutôt qu’une échelle continue inventée. Le texte courant reste à 18px avec un interlignage de 28px. La classe principale de grande taille passe de 32/44 à 48/56 au point de rupture moyen. Sur une page consacrée à une seule question, le h 1 peut être placé dans la légende du fieldset afin que le nom accessible du groupe et son titre visible concordent. N’ajoutez pas au-dessus un second h 1 sans rapport. L’exemple présente le contexte du service dans un paragraphe plus petit et l’instruction de sélection sous la légende. La démo autonome utilise explicitement Arial afin de ne générer aucune requête de police manquante. La procédure d’installation copie les polices à côté de CSS ; c’est nécessaire si l’on souhaite utiliser la police OpenSans publiée plutôt qu’une police de substitution. Consultez la spécification associée ## Rôles dans une interface de questionnaire système de design ONS ### Le focus est distinct de l’état ONS associe des variables sémantiques à des couleurs primitives. Le texte est noir, les liens ordinaires sont bleu océan et le bouton principal est vert feuille. Le jaune soleil est la couleur du focus. Le rouge rubis signale les erreurs, mais le message d’erreur doit tout de même préciser l’action à effectuer. Un bouton Continuer vert ne garantit pas que la réponse a déjà passé la validation. Le questionnaire local utilise la bordure native des cases à cocher et leur style de sélection. Il ne présente pas chaque réponse comme une carte marketing distincte. Un court filet neutre en haut sépare l’exemple indépendant de la question, sans reprendre le bandeau ONS. - Conservez l’indication de focus visible native sur le champ de case à cocher et le bouton d’action. - Placez l’instruction écrite « Sélectionnez toutes les réponses applicables » avant les options standard. - Séparez la réponse opposée par « Ou » afin que la différence soit visible avant toute interaction. Consultez la spécification associée ## Colonnes et largeur des réponses système de design ONS ### Utiliser la largeur de texte du questionnaire La grille à douze colonnes exprime les largeurs à l’aide de classes telles que ons-col-8@m. À partir de 740 px, cet élément occupe huit colonnes ; en dessous, il utilise toute la largeur de contenu disponible. L’exemple local reprend cette colonne native pour que la longue question se répartisse sur une largeur lisible, plutôt que de s’étirer sur tout l’écran de bureau. Dans la version examinée, le conteneur standard a une largeur maximale de 64.6256rem et un remplissage horizontal de 1rem. Le guide public de la grille décrit aussi une base de 8 px et des gouttières de 16/24 px autour du seuil d’espacement de 600 px. Distinguez ces notions du point de rupture moyen de 740 px pour les colonnes : elles ne constituent pas un seuil mobile universel. L’écran de récapitulatif des réponses remplace la question dans la même colonne, et le bouton « Modifier les réponses » ramène aux commandes existantes. Les valeurs restent en mémoire, sans changement de route ni requête réseau. Les utilitaires d’espacement exécutables sont plus précis que la valeur de base de 8 px indiquée dans le texte : à une racine de 16 px, les marges inférieures xs, s, m, l et xl sont de 12, 16, 20, 24 et 32 px. La référence distingue donc les valeurs réelles des utilitaires des indications sur la grille. Consultez la spécification associée ## Système de design ONS Créer le groupe de réponses ### Structure native d’une case à cocher Une case à cocher utilise ons-checkbox__input et un ons-checkbox__label associé, à l’intérieur de ons-checkbox. L’élément input conserve ses attributs name et value habituels pour que les sémantiques natives des formulaires restent opérationnelles. La structure englobante ons-checkboxes__item fournit l’espacement et la zone d’activation attendus par la feuille de style. Les choix ordinaires partagent ons-js-exclusive-group-item. Le dernier choix utilise plutôt ons-js-exclusive-option, avec data-deselect-message pour en expliquer l’effet. L’élément span de région dynamique doit être présent avec ses deux attributs adjectifs : il ne s’agit pas d’un balisage décoratif superflu. Le supprimer compromettrait le fonctionnement attendu par le contrôleur natif. Cet exemple de code source est complet pour trois options ordinaires et une réponse opposée. Adaptez les noms et les valeurs à une question réelle ; ne vous contentez pas de renommer une commande de validation sans rapport en « exclusive ». ```

How did you travel to your local library last week?

Select all that apply




``` Référence du code Consultez la spécification associée ## Système de design ONS Validation et comportement de modification ### État de la bibliothèque et état de l’application La bibliothèque gère la désélection des options opposées. Le petit gestionnaire de l’application vérifie uniquement qu’au moins une réponse a été sélectionnée avant d’afficher un récapitulatif local. En l’absence de sélection, il affiche un message d’erreur écrit et place le focus sur le message associé. Le lien d’erreur mène directement au premier choix, où l’utilisateur peut agir. En plus de la valeur de la case à cocher dans le DOM, le contrôleur suit un état mis en cache nommé hasValue. Une réinitialisation avec checked=false seul pourrait laisser ce cache obsolète. L’action de réinitialisation clique donc sur chaque case cochée, afin que les écouteurs natifs mettent leur modèle à jour, puis replace le focus sur la question. Il s’agit d’un enjeu concret d’intégration qu’on ne peut pas vérifier en examinant uniquement la feuille de style. Le récapitulatif présente les libellés sélectionnés sous forme de liste. Le bouton « Modifier les réponses » conserve les commandes et leur sélection. Aucun panneau de confirmation ne prétend qu’une réponse à l’enquête a été reçue, car cet exemple ne comporte pas de serveur. Consultez la spécification associée ## Système de design ONS Ressources et adoption du modèle ### Deux méthodes prises en charge Le paquet npm comprend les ressources compilées, les sources Sass, les macros Nunjucks et un modèle de page de base. Cet aperçu suit la méthode HTML avec ressources compilées : copiez CSS officiel et main.js, reproduisez le balisage documenté, puis chargez le script après le contenu du body. Le script initialise les composants correspondants lorsque le DOM est prêt. Un projet rendu côté serveur peut plutôt utiliser les fichiers de macros Nunjucks du répertoire components. La macro Checkbox accepte un tableau de cases à cocher, des libellés, des descriptions, une configuration d’erreur et une configuration mutuallyExclusive. Le paramètre dontWrap transfère la responsabilité du fieldset au composant de question englobant ; il ne permet pas d’omettre le nom accessible du groupe. Si vous sélectionnez les fichiers Sass individuellement, importez d’abord les variables du système, les helpers, les utilitaires, les styles de base et les objets, puis les règles des composants et leurs éventuelles dépendances. Pour cet exemple autonome de petite taille, les ressources complètes compilées CSS évitent de devoir sélectionner ces dépendances. 1. Verrouillez la version du paquet et servez les CSS, les scripts et les polices depuis un même répertoire de ressources locales stable. 2. Choisissez HTML compilé pour une page statique ou configurez les chemins des macros Nunjucks pour une application rendue côté serveur. 3. Utilisez CSS, JavaScript et le balisage de la même version, puis vérifiez à nouveau l’exclusion mutuelle après une mise à niveau. Consultez la spécification associée ## Système de design ONS Tester des réponses contradictoires ### Vérifier la signification des données Sélectionnez « À pied » et « En bus », puis « Je ne me suis pas déplacé ». Les deux choix précédents doivent être désélectionnés. Sélectionnez ensuite « À vélo » : la réponse opposée doit être désélectionnée, tandis que « À vélo » reste cochée. Recommencez en appuyant sur Espace lorsque les champs ont le focus, puis vérifiez la région d’annonce au lieu de supposer qu’une coche visible suffit à prouver le bon fonctionnement. Poursuivez sans rien sélectionner pour tester l’erreur, puis examinez une réponse valide et revenez en arrière avec « Modifier les réponses ». Enfin, après une séquence de réponses contradictoires, réinitialisez le formulaire et effectuez une nouvelle sélection : cela permet de détecter un état obsolète du contrôleur natif. À 390 px, la question et tous les libellés doivent rester lisibles sans défilement horizontal de la page. Ces tests vérifient l’interaction locale, et non la transmission des données d’une enquête en production, la conformité en matière d’accessibilité ou la qualité statistique des questions. Un service réel doit aussi valider côté serveur les valeurs contradictoires et vérifier, par des recherches, que les catégories de réponse sont complètes. Consultez la spécification associée ## Système de design ONS Exemples de composants du système de design ### Une question complète à réponses mutuellement exclusives Options de réponse ordinaires et réponse opposée, avec les hooks natifs de région dynamique. ```

How did you travel to your local library last week?

Select all that apply




``` Référence du code ### Servir une seule version cohérente Méthode avec ressources compilées, y compris les ressources de polices relatives pour un projet complet. ``` npm install --save-exact @ons/design-system@73.13.1 mkdir -p public/vendor/ons cp -R node_modules/@ons/design-system/css public/vendor/ons/ cp -R node_modules/@ons/design-system/scripts public/vendor/ons/ cp -R node_modules/@ons/design-system/fonts public/vendor/ons/ ``` Référence du code ### 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. ``` ONS survey question specimen

Independent specimen · Original library survey

Travel · Question 1 of 1

How did you travel to your local library last week?

Select all that apply




Practice only. Your selection stays in this page and is not submitted.

``` 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. ## Système de design ONS Configuration de l’agent d’IA ### Point de départ de l’implémentation La version native 73.13.1 de CSS et JavaScript compilés est utilisée dans l’exemple local. Arial est une solution de repli locale explicite ; les instructions de copie pour la production incluent les polices OpenSans fournies avec le paquet. L’archive ZIP complète de l’exemple fonctionnel, dans Sources, contient aussi 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/ons.html. N’ouvrez pas les exemples basés sur des modules avec file://. ``` npm install --save-exact @ons/design-system@73.13.1 mkdir -p public/vendor/ons cp -R node_modules/@ons/design-system/css public/vendor/ons/ cp -R node_modules/@ons/design-system/scripts public/vendor/ons/ cp -R node_modules/@ons/design-system/fonts public/vendor/ons/ ``` ### Un prompt pour votre projet ``` Créez un spécimen d’enquête ONS73.13.1 indépendant, utilisant les hooks natifs Checkbox et Mutually Exclusive, un fieldset/legend associé, un groupe de réponses ordinaire et une réponse mutuellement exclusive. Incluez la région dynamique requise et les attributs de désélection. Servez le CSS natif correspondant et main.js ; n’écrivez pas de contrôleur de remplacement pour gérer l’exclusivité. Ajoutez une validation locale en cas de réponse manquante et une relecture des réponses permettant de conserver les modifications, sans prétendre qu’elles ont été reçues par un serveur. Effectuez la réinitialisation au moyen des événements natifs afin de maintenir la cohérence de l’état mis en cache. Utilisez ons-col-8@m et les règles de typographie et de couleurs sémantiques vérifiées, sans les marques d’identité officielles. ``` ## Sources et périmètre système de design ONS Spécimen de mise en œuvre indépendant, avec un libellé d’enquête original. Le code natif est sous licence MIT ; les licences de l’identité et du contenu de l’ONS sont distinctes. Aucune réponse n’est transmise, enregistrée ni présentée comme une statistique officielle. - Type Police et hiérarchie typographique adaptative. - Couleurs Recommandations sur les couleurs sémantiques. - Grille Classes de grille, espacements et points de rupture. - Vérifications Anatomie de la case à cocher et options de macro. - Exclusivité Réponses mutuellement exclusives et comportement de désélection. - Ressources Chemins des ressources et dépendances Sass. - Npm Contenu du package et installation. - Modèle Adoption d’un modèle côté serveur. - Erreur Emplacement de l’erreur et indications pour la corriger. - 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 ONS ### Ontario système de design Créez un guide détaillé de style ontarien avec une véritable typographie, les valeurs publiées d’espacement et de couleur, le comportement natif des accordéons et le code source complet correspondant à la version. ### Poncho Examinez la grille Bootstrap 3 de Poncho, ses couleurs d’action sémantiques et ses panneaux de service entièrement cliquables au fil d’un annuaire d’activités fonctionnel. ### Queensland Government système de design Découvrez l’implémentation de Bootstrap au Queensland grâce à un sélecteur de ressources illustré complet, avec les véritables rôles du thème, le style natif des cases à cocher et une boîte de dialogue de vérification accessible. - [Référence de mise en œuvre](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive) - [Source](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/scss/vars/_typography.scss) - [Source](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/scss/vars/_colors.scss) - [Source](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/css/main.css) - [Source](https://service-manual.ons.gov.uk/design-system/foundations/grid) - [Source](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/components/mutually-exclusive/mutually-exclusive.js) - [Consultez la spécification associée](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive) - [Consultez la spécification associée](https://service-manual.ons.gov.uk/design-system/foundations/typography) - [Consultez la spécification associée](https://service-manual.ons.gov.uk/design-system/foundations/colours) - [Consultez la spécification associée](https://service-manual.ons.gov.uk/design-system/foundations/grid) - [Référence du code](https://service-manual.ons.gov.uk/design-system/components/checkboxes) - [Consultez la spécification associée](https://service-manual.ons.gov.uk/design-system/components/checkboxes) - [Consultez la spécification associée](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/components/mutually-exclusive/mutually-exclusive.js) - [Consultez la spécification associée](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets) - [Référence du code](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets) - [Référence du code](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive) - [Type Police et hiérarchie typographique adaptative.](https://service-manual.ons.gov.uk/design-system/foundations/typography) - [Couleurs Recommandations sur les couleurs sémantiques.](https://service-manual.ons.gov.uk/design-system/foundations/colours) - [Grille Classes de grille, espacements et points de rupture.](https://service-manual.ons.gov.uk/design-system/foundations/grid) - [Vérifications Anatomie de la case à cocher et options de macro.](https://service-manual.ons.gov.uk/design-system/components/checkboxes) - [Exclusivité Réponses mutuellement exclusives et comportement de désélection.](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive) - [Ressources Chemins des ressources et dépendances Sass.](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets) - [Npm Contenu du package et installation.](https://service-manual.ons.gov.uk/design-system/guidance/install-with-npm) - [Modèle Adoption d’un modèle côté serveur.](https://service-manual.ons.gov.uk/design-system/guidance/templating-in-nunjucks) - [Erreur Emplacement de l’erreur et indications pour la corriger.](https://service-manual.ons.gov.uk/design-system/components/error-summary)