# Système de design NSW ## Aperçu de l’interface système de design NSW Passez d’un onglet à l’autre à la souris ou au clavier tout en conservant une liste de lecture locale. ## Système de design NSW Référence de design Exports réels de CSS de nsw-design-system 3.27.0 et implémentation de Tabs, avec les polices Public Sans locales. ### Rôles de marque et rôles neutres | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --nsw-brand-dark | #002664 | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-brand-light | #cbedfd | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-brand-supplementary | #146cfd | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-brand-accent | #d7153a | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-brand-accent-light | #ffe6ea | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-grey-01 | #22272b | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-grey-02 | #495054 | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-grey-03 | #cdd3d6 | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-grey-04 | #ebebeb | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-off-white | #f2f2f2 | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-text-dark | #22272b | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | | --nsw-text-light | #fff | Thème par défaut réel de la version 3.27.0. Text-light désigne un texte de couleur claire sur des surfaces sombres, et non un texte peu mis en évidence sur fond blanc. | ### Associations de statuts | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --nsw-status-success | #008a07 | Associez la couleur porteuse de sens du statut au rôle d’arrière-plan correspondant et à une explication textuelle lisible. | | --nsw-status-success-bg | #e5f6e6 | Associez la couleur porteuse de sens du statut au rôle d’arrière-plan correspondant et à une explication textuelle lisible. | | --nsw-status-info | #2e5299 | Associez la couleur porteuse de sens du statut au rôle d’arrière-plan correspondant et à une explication textuelle lisible. | | --nsw-status-info-bg | #eaedf4 | Associez la couleur porteuse de sens du statut au rôle d’arrière-plan correspondant et à une explication textuelle lisible. | | --nsw-status-warning | #c95000 | Associez la couleur porteuse de sens du statut au rôle d’arrière-plan correspondant et à une explication textuelle lisible. | | --nsw-status-warning-bg | #fbeee5 | Associez la couleur porteuse de sens du statut au rôle d’arrière-plan correspondant et à une explication textuelle lisible. | | --nsw-status-error | #b81237 | Associez la couleur porteuse de sens du statut au rôle d’arrière-plan correspondant et à une explication textuelle lisible. | | --nsw-status-error-bg | #f7e7eb | Associez la couleur porteuse de sens du statut au rôle d’arrière-plan correspondant et à une explication textuelle lisible. | ### Typographie et rayon | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --nsw-font-family | "Public Sans",sans-serif | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-size | 16px | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-normal | 400 | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-bold | 700 | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-size-md-mobile | 1.125rem | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-size-md-desktop | 1.25rem | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-size-lg-mobile | 1.375rem | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-size-lg-desktop | 1.5rem | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-size-xl-mobile | 1.75rem | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-size-xl-desktop | 2rem | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-size-xxl-mobile | 2.25rem | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-font-size-xxl-desktop | 3rem | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | | --nsw-border-radius | 0.25rem | Référence typographique réactive publiée et rôle partagé pour les arrondis. Les styles typographiques pour mobile et ordinateur ne constituent pas des familles de polices distinctes. | ## Guide complet système de design NSW 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. ## Environnement d’exécution épinglé et thème système de design NSW ### Utilisez l’implémentation native des onglets > L’exemple utilise nsw-design-system 3.27.0. Il importe le package CSS et la classe Tabs, puis initialise le groupe unique d’onglets après avoir créé la structure. Cette initialisation ciblée évite d’enregistrer des composants sans rapport qui ne sont pas présents. La documentation en ligne peut décrire une version plus récente ; le code téléchargeable et les valeurs des jetons restent liés au package vérifié. ### Séparez les composants de l’état de l’application La classe native Tabs gère la sélection des onglets, la visibilité des panneaux et la navigation au clavier. L’application gère un Set d’invites enregistrées. Le passage d’une étape à l’autre ne modifie donc pas la liste de lecture. Cette séparation est explicite dans le code source : aucun magasin global caché, aucune requête au serveur dorsal et aucune imitation d’un compte gouvernemental. ## Système de design NSW Rôles de marque et surfaces lisibles ### Utilisez les rôles sombre et clair en paire La couleur de marque sombre par défaut est #002664, tandis que la surface claire est #CBEDFD. Le panneau de consigne utilise le rôle clair, et une action sombre. L’onglet actif reprend le traitement d’accentuation du package. Il s’agit des rôles réels du thème, et non d’une palette bleue arbitraire choisie pour évoquer un site du secteur public. L’exemple n’utilise pas de logo officiel du gouvernement. ### Interprétez soigneusement les noms des jetons Le jeton text-light est blanc. Il doit être utilisé sur un arrière-plan sombre et ne doit pas servir de synonyme générique pour un texte atténué. Le texte secondaire des étapes utilise plutôt le rôle neutre plus sombre. La référence comprend des paires de couleurs de premier plan et d’arrière-plan pour les statuts, mais l’atelier n’invente pas d’alerte d’erreur ou de réussite dans le seul but d’afficher toutes les couleurs disponibles. ## Système de design NSW Public Sans et échelle responsive ### Chargez la police avant d’examiner la mise en page L’exemple charge localement les graisses 400 et 700 de Public Sans. Le package définit séparément les tailles pour mobile et ordinateur : le texte moyen passe de 1.125rem à 1.25rem, et la taille de référence du plus grand titre passe de 2.25rem à 3rem. Ces paires contribuent à préserver la hiérarchie de lecture lorsque la largeur disponible change. ### Gardez une hiérarchie de contenu sobre Une courte étiquette d’étape précède un titre descriptif, une introduction, un paragraphe explicatif et une consigne enregistrée. La page ne transforme pas chaque phrase en carte. Sur les écrans étroits, la liste de lecture apparaît sous le panneau de l’étape, tandis que la courte barre de trois onglets reste utilisable sans que le texte soit comprimé sur plusieurs lignes. ## Système de design NSW Balisage des onglets et comportement au clavier ### Laissez le composant enrichir de vrais liens La liste d’onglets initiale contient des liens vers des identifiants de contenu uniques. L’initialisation ajoute les sémantiques tablist/tab/tabpanel, gère la sélection et définit l’onglet pouvant recevoir le focus. Les valeurs href doivent être correctes pour que le composant puisse trouver les panneaux correspondants. Ne dupliquez pas les identifiants si la page contient plusieurs groupes d’onglets. - Associez chaque lien d’onglet à l’identifiant d’un seul panneau. - Initialisez le groupe après avoir inséré son balisage. - Laissez le composant natif gérer la sélection et le focus clavier. ### Vérifiez la sélection au clavier, ainsi que les clics L’implémentation native prend en charge la navigation avec les touches fléchées. La vérification dans le navigateur place le focus sur Prepare, appuie sur ArrowRight et confirme que Discuss est sélectionné. Ce comportement ne se limite pas à appliquer un style à la dernière étiquette cliquée. Un groupe d’onglets convient à ces étapes de même niveau, car le lecteur peut passer de l’une à l’autre. Il ne sert pas à masquer des champs obligatoires dans un formulaire à soumettre étape par étape. ## Système de design NSW Consignes enregistrées et retours clairs ### Ne liez pas l’état enregistré à l’onglet visible Le bouton d’action de chaque étape ajoute la consigne à un Set ou l’en retire, met à jour aria-pressed et remplace son libellé de Save par Remove. Le nombre d’éléments et le contenu de la liste de lecture sont dérivés de ce Set. Lorsqu’on revient à une étape enregistrée, son état sélectionné est correctement affiché. Clear reading list supprime toutes les sélections et est désactivé lorsque la liste est vide. ### Expliquez les limites de la persistance La liste de lecture est conservée dans l’état local de la page et disparaît au rechargement. L’interface le précise clairement. Une véritable liste persistante nécessiterait un modèle de stockage explicite et un comportement de restauration, qui ne sont ni l’un ni l’autre sous-entendus ici. Le contenu est un exercice original de discussion sur le design, et non un guide d’admissibilité à un service ni une prétendue reproduction d’un processus officiel de NSW. ## Système de design NSW Implémentation complète et vérification ### Reproduisez la source avec ses dépendances Créez un projet Vite vanilla, installez nsw-design-system 3.27.0 et Public Sans, puis enregistrez le fichier d’entrée fourni et nsw.css. Conservez un élément de montage à la racine. Le contenu complet des trois étapes, les consignes originales, l’initialisation native de Tabs et les gestionnaires de la liste de lecture sont inclus. Le comportement d’enregistrement et de réinitialisation n’est pas remplacé par du pseudocode. 1. Installez la version épinglée du package NSW et les fichiers de police Public Sans. 2. Enregistrez le fichier d’entrée complet et nsw.css avec un élément de montage à la racine. 3. Enregistrez des consignes dans deux onglets différents et vérifiez que leur état est conservé. 4. Utilisez ArrowRight, videz la liste et examinez son état vide. ### Séparez la navigation par onglets du contenu enregistré Initialisez la classe Tabs native seulement après la création de ses liens cibles et de ses panneaux. La correspondance des identifiants de fragment définit le contrat d’enrichissement : modifier l’identifiant d’un panneau sans modifier son href rompt le lien, même si les libellés des onglets semblent toujours corrects. Si plusieurs groupes figurent sur une même page, attribuez des identifiants distincts à chacun. Traitez la liste de lecture comme un état applicatif indépendant de l’instance d’onglets. L’état enregistré d’une consigne doit être conservé lors du changement de panneau, et aria-pressed doit refléter cet état au retour dans le panneau. Utilisez des onglets pour du contenu de même niveau auquel les lecteurs peuvent revenir ; un formulaire séquentiel exigeant de valider les étapes nécessite un autre modèle de navigation. La persistance nécessite également une politique explicite de stockage et de restauration, au lieu de modifier silencieusement cet exemple limité à la page. ## Système de design NSW Exemples de composants du système de design ### main.js — exemple complet d’onglets natifs et de liste de lecture Comprend tout le contenu original des étapes, l’initialisation des onglets et la logique complète d’enregistrement, de suppression et de réinitialisation. ``` import Tabs from 'nsw-design-system/src/components/tabs/tabs.js'; import 'nsw-design-system/css'; import '@fontsource/public-sans/latin-400.css'; import '@fontsource/public-sans/latin-700.css'; import './nsw.css'; const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']]; document.getElementById('root').innerHTML=`

NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY

Plan a focused discussion

Move between three stages and save useful prompts to a local reading list.

    ${sessions.map(([name],i)=>`
  • ${name}
    • `).join('')}
${sessions.map(([name,title,lead,body],i)=>`

STAGE ${i+1} / 3

${title}

${lead}

${body}

Prompt to keep

${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}
`).join('')}
`; new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()}); ``` Référence du code - La classe NSW gère les onglets ; le Set gère la liste de lecture originale. ### nsw.css — composition responsive originale Mise en page et surfaces de consigne utilisant les rôles sémantiques publiés du thème. ``` body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}} ``` Référence du code - L’étiquette secondaire de l’étape utilise un ton neutre sombre ; --nsw-text-light est blanc. ## Système de design NSW Configuration de l’agent IA ### Point de départ de l’implémentation Les clics natifs sur les onglets et les touches fléchées, la conservation de l’état enregistré, la suppression des éléments et la mise en page responsive ont été testés localement. ``` npm create vite@latest nsw-workshop -- --template vanilla cd nsw-workshop npm install npm install nsw-design-system@3.27.0 @fontsource/public-sans # Replace src/main.js and add src/nsw.css. Keep
. npm run dev ``` ### Un prompt pour votre projet ``` Créez le guide d’atelier NSW avec Tabs natif de la version 3.27.0, Public Sans et les rôles sémantiques réels. Préservez les identifiants uniques des panneaux, la sélection au clavier, l’état indépendant des consignes enregistrées et une liste de lecture utile lorsqu’elle est vide. Indiquez clairement que la persistance est limitée à la page et évitez toute affirmation concernant un service officiel. ``` ## Système de design NSW Sources et périmètre Étude d’atelier rédigée par OpenDesign avec NSW Design System 3.27.0. Le comportement natif des onglets est réel ; le contenu et le processus d’enregistrement des consignes relèvent d’une logique applicative locale originale. - Onglets Navigation entre des contenus de même niveau et comportement natif. - Intégration pour les développeurs Configuration du package, de la feuille de style et de JavaScript. - Typographie Public Sans et hiérarchie typographique. - Implémentation versionnée Exports du thème et code source de Tabs. ## Ressources connexes système de design NSW ### ONS système de design Créez une réponse à un sondage sans contradictions : cases à cocher natives de l’ONS, réponses mutuellement exclusives, références exactes aux types et aux couleurs, et processus complet de vérification locale. ### 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. - [Référence de mise en œuvre](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Source](https://github.com/digitalnsw/nsw-design-system) - [Référence du code](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Référence du code](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [Onglets Navigation entre des contenus de même niveau et comportement natif.](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Intégration pour les développeurs Configuration du package, de la feuille de style et de JavaScript.](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [Typographie Public Sans et hiérarchie typographique.](https://designsystem.nsw.gov.au/core/typography/index.html) - [Implémentation versionnée Exports du thème et code source de Tabs.](https://github.com/digitalnsw/nsw-design-system)