# Système de design NL ## Système de design NL Aperçu de l’interface Changez de thème d’origine, modifiez le lieu de collecte, enregistrez ou annulez sans changer l’enregistrement. ## Système de design NL Référence de conception Composition concrète d’un contributeur : @utrecht/component-library-css 9.0.15. Les noms des jetons publics et les classes sont des API de la bibliothèque examinée ; les valeurs numériques et les couleurs indiquées comme « exemple » sont des paramètres d’origine propres à l’application, et non une spécification universelle de NL Design System. ### Architecture | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Component implementation | Utrecht CSS 9.0.15 | Un contributeur sélectionné, et non la seule implémentation de NL Design System. | | Theme boundary | Wrapper-scoped CSS custom properties | Le même balisage sémantique permet plusieurs identités visuelles. | | Source design tokens | Design Tokens JSON standard | Les organisations décrivent leur propre charte graphique pour pouvoir la réutiliser. | ### Jeton de bouton réel API | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --utrecht-button-min-block-size | 48px in example; 44px library fallback | Taille de cible explicite. | | --utrecht-button-border-radius | 4px / 8px in example themes | Géométrie définie par l’application. | | --utrecht-button-primary-action-background-color | #005a5b / #57328c in example themes | Couleurs d’action d’origine ; texte blanc. | | --utrecht-button-font-size | 1rem in example | Rôle typographique du composant. | | --utrecht-focus-outline-width | 3px in example | Configuration publique de l’indicateur de focus. | ### Liste de données API | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | .utrecht-data-list + .utrecht-data-list--rows | dl root | Valeurs nommées sémantiques. | | .utrecht-data-list__item | Key/value wrapper | Ligne de grille adaptative. | | --utrecht-data-list-rows-column-min-inline-size | 12ch in example | Largeur minimale des colonnes, choisie en fonction des libellés du reçu. | | --utrecht-data-list-rows-column-inline-size | 45% in example | Deux colonnes lorsque l’espace le permet. | | --utrecht-data-list-rows-gap | 24px in example | Espacement entre la clé et la valeur. | ## Système de design NL Guide complet 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. ## Système de design NL Choisir une composition ### Un écosystème, pas un thème unique > NL Design System prend explicitement en charge la combinaison de contributions provenant de plusieurs organisations, tout en permettant à chacune de décrire sa charte graphique au moyen de jetons de design. En pratique, l’adoption repose donc sur le choix d’une implémentation de composants et d’un thème. Cette page présente l’implémentation de contributeur Utrecht CSS et un thème de démonstration d’origine. Ce choix ne signifie pas qu’Utrecht est l’implémentation de référence de tous les composants NL Design System. Il offre au lecteur une démarche reproductible sans inventer de police nationale, de couleur bleue ou d’échelle d’espacement. Le package natif CSS utilisé est @utrecht/component-library-css 9.0.15. Consultez la spécification associée ## Système de design NL Jetons des composants publics ### Gardez les valeurs de l’application en dehors de la bibliothèque CSS Le thème fourni définit des propriétés personnalisées publiques --utrecht-* sur un conteneur. Le bouton utilise ces valeurs, tandis que sa classe détermine la structure du composant. Les variables commençant par --_utrecht- sont des calculs internes de la bibliothèque CSS examinée ; les modifier directement lierait l’application à des détails d’implémentation. Le turquoise #005a5b et le violet #57328c de l’exemple sont des couleurs d’origine de l’application. Elles illustrent un habillage de marque que l’on peut remplacer sans reprendre l’identité visuelle d’une municipalité. Toutes deux sont associées à un texte blanc pour les actions, et une nuance distincte est définie pour l’état au survol. Aucune couleur n’est présentée comme une valeur officielle de jeton NL Design System. ``` .example-theme { /* Original application values, not a national house style. */ --utrecht-document-font-family: Arial, sans-serif; --utrecht-button-font-size: 1rem; --utrecht-button-line-height: 1.5; --utrecht-button-font-weight: 700; --utrecht-button-border-radius: .25rem; --utrecht-button-min-block-size: 48px; --utrecht-button-padding-block-start: .75rem; --utrecht-button-padding-block-end: .75rem; --utrecht-button-padding-inline-start: 1.25rem; --utrecht-button-padding-inline-end: 1.25rem; --utrecht-button-primary-action-background-color: #005a5b; --utrecht-button-primary-action-color: #fff; --utrecht-button-primary-action-hover-background-color: #003f40; --utrecht-button-primary-action-hover-color: #fff; --utrecht-focus-outline-color: #111; --utrecht-focus-outline-width: 3px; --utrecht-focus-outline-offset: 3px; --utrecht-focus-outline-style: solid; } ``` Référence du code Consultez la spécification associée ## Système de design NL Typographie et dimensions ### Définissez les choix de thème manquants La démonstration définit Arial, sans-serif à 18px avec une interligne de 1.6 pour la lecture de documents. Le premier thème utilise un titre de 32px et un rayon de 4px pour les boutons ; le second conserve la même taille de texte, facile à lire, avec un rayon de 8px et un titre avec empattements. Ces changements de thème sont volontairement bien visibles. Lorsque son jeton est absent, le bouton natif a une taille minimale de bloc de 44px. Notre thème définit 48px, ainsi que des marges internes explicites dans les axes de bloc et en ligne. Il s’agit d’un CSS API réel avec une valeur choisie par l’application, et non d’une dimension supposée valable dans tout l’écosystème. La mise en page utilise une largeur maximale de contenu de 56rem et des espacements de 24px, définis par cet exemple. Consultez la spécification associée ## Système de design NL Structure d’une liste de données ### Une liste de définitions pour des valeurs nommées Le reçu utilise un élément dl avec .utrecht-data-list et le modificateur .utrecht-data-list--rows. Chaque .utrecht-data-list__item regroupe une clé dt et une valeur dd. Le modificateur rows active la grille adaptative, les espacements entre les lignes et les bordures ; sans lui, la liste de données de base n’active pas cette mise en page. HTML reste lisible avant le chargement d’un thème. Notre reçu indique un lieu de retrait, une référence et l’article sélectionné. Il ne s’agit pas d’un tableau de données répétées : chaque clé désigne un attribut différent d’une même demande. Sur les écrans étroits, la clé et la valeur s’affichent l’une sous l’autre. L’application définit les tokens des lignes afin que les noms de lieux longs s’affichent sans être tronqués. - Utilisez dt pour le nom de l’attribut et dd pour sa valeur actuelle. - Placez chaque paire clé-valeur dans le conteneur d’élément documenté. - Autorisez les identifiants et les noms de lieux longs à passer à la ligne plutôt que d’élargir la page. Consultez la spécification associée ## Système de design NL Sémantique des actions ### Une classe de bouton ne fournit pas un processus de travail .utrecht-button fournit le composant de base, tandis que .utrecht-button--primary-action sélectionne le groupe de tokens d’apparence principale. L’élément natif doit toujours avoir type=button pour une action locale qui ne doit pas soumettre le formulaire englobant. La liste de données reste en lecture seule jusqu’à ce que l’application ouvre un panneau de modification. Dans la démonstration, le bouton Modifier le lieu de retrait affiche un groupe de boutons radio natifs dans un fieldset. L’enregistrement met à jour la valeur de la liste de définitions et annonce le nouveau lieu dans une zone de statut à annonce polie. L’annulation ferme le panneau sans modifier la valeur enregistrée. Ces comportements relèvent du code de l’application ; l’installation du bundle CSS seul ne les implémente pas. Consultez la spécification associée ## Système de design NL Changer de thème en toute sécurité ### Modifiez le conteneur, conservez les données Le sélecteur de thème modifie data-theme sur le conteneur externe. Les classes des composants, les valeurs des données et le bouton radio sélectionné restent inchangés. Cela illustre concrètement la séparation de la marque blanche : un même reçu et une même interaction peuvent prendre en charge différentes identités visuelles. Ici, le changement de thème est une démonstration destinée au développement, et non un paramètre qu’un service public est tenu de proposer. Dans un véritable service destiné à plusieurs organisations, choisissez le thème à partir d’une configuration fiable de l’application. Les valeurs du thème ne doivent pas modifier l’éligibilité, la validation ni la signification d’un statut. 1. Chargez une seule fois le composant versionné CSS. 2. Appliquez les tokens de thème pertinents à un élément conteneur. 3. Rendez le même balisage de composant sémantique dans ce conteneur. 4. Vérifiez la mise au point, le retour à la ligne et les couleurs des états pour chaque thème pris en charge. Consultez la spécification associée ## Système de design NL Accessibilité et maturité ### Évaluez la contribution sélectionnée Le modèle relais NL Design System décrit la progression des contributions vers des normes partagées. La présence d’un composant dans un dépôt communautaire ne garantit pas, à elle seule, que toutes ses compositions sont prêtes pour la production. Vérifiez l’implémentation sélectionnée, les états pris en charge et le niveau de maturité actuel dans la documentation du composant. L’aperçu conserve une légende visible pour les choix de lieu, annonce le résultat enregistré et replace le focus sur le bouton déclencheur après la modification. Le changement de thème ne supprime pas le focus. L’écran reste utilisable avec les commandes clavier natives des boutons radio et les contours de focus de l’application ; ces vérifications complètent les tests du composant contributeur, sans les remplacer. Consultez la spécification associée ## Système de design NL Installer et gérer le thème ### Une intégration limitée à CSS Installez le package CSS vérifié et importez dist/index.css avec un bundler compatible avec CSS, puis votre feuille de style de thème. Les composants de liste de données et de bouton CSS utilisés ici ne nécessitent ni fournisseur React ni initialiseur de composant JavaScript. Le script de l’application d’origine gère la modification, l’enregistrement, l’annulation et le changement de thème. Le code source du composant fourni est sous licence EUPL-1.2. Conservez les avis de source et de licence lors de sa distribution, et ne déduisez pas d’une licence de code le droit de réutiliser le logo d’une municipalité. Cet exemple propose volontairement des thèmes originaux et n’utilise aucun emblème municipal. Consultez la spécification associée ## Système de design NL Exemples de composants du système de design ### Tokens de thème utilisés par un bouton natif Un thème complet pour le bouton sélectionné. Les valeurs sont originales ; les noms API proviennent d’Utrecht. ``` .example-theme { /* Original application values, not a national house style. */ --utrecht-document-font-family: Arial, sans-serif; --utrecht-button-font-size: 1rem; --utrecht-button-line-height: 1.5; --utrecht-button-font-weight: 700; --utrecht-button-border-radius: .25rem; --utrecht-button-min-block-size: 48px; --utrecht-button-padding-block-start: .75rem; --utrecht-button-padding-block-end: .75rem; --utrecht-button-padding-inline-start: 1.25rem; --utrecht-button-padding-inline-end: 1.25rem; --utrecht-button-primary-action-background-color: #005a5b; --utrecht-button-primary-action-color: #fff; --utrecht-button-primary-action-hover-background-color: #003f40; --utrecht-button-primary-action-hover-color: #fff; --utrecht-focus-outline-color: #111; --utrecht-focus-outline-width: 3px; --utrecht-focus-outline-offset: 3px; --utrecht-focus-outline-style: solid; } ``` Référence du code ### Valeurs nommées et déclencheur de modification Éléments dl/dt/dd sémantiques avec les classes de composants du contributeur. ```
Collection location
North library desk
Reference
DEMO-2048
``` 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. ``` NL Design System composition
Community collection · Example

CONTRIBUTOR COMPONENTS + YOUR THEME

Review your collection details

This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.

Item
Community reading pack
Collection location
North library desk
Reference
DEMO-2048

Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.
``` 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 NL Configuration de l’agent IA ### Point de départ de l’implémentation L’aperçu autonome charge localement la même bibliothèque native CSS versionnée. Les composants de bouton et de liste de données CSS seuls ne nécessitent pas de fournisseur React. La bibliothèque doit être accompagnée des valeurs de thème originales. Le ZIP de l’exemple complet fonctionnel dans les sources fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/nl-design-system.html. N’ouvrez pas les exemples utilisant des modules avec file://. ``` npm install @utrecht/component-library-css@9.0.15 # CSS-aware application entry: # import '@utrecht/component-library-css/dist/index.css'; # import './example-theme.css'; # Wrap the dl/button composition in
. # Add application event handlers for editing and theme selection. ``` ### Un prompt pour votre projet ``` Utilisez @utrecht/component-library-css 9.0.15 pour une liste de définitions de reçu et un bouton principal. Fournissez un thème original limité à un conteneur au moyen des tokens publics --utrecht-*, sans modifier les variables internes --_utrecht-*. Permettez la modification du lieu avec des choix radio libellés, des actions d’enregistrement et d’annulation, une annonce polie de la mise à jour et le retour du focus. Présentez un deuxième thème original sans remplacer le balisage des composants ni perdre les données. Indiquez que toutes les valeurs numériques du thème sont des choix propres à l’application. ``` ## Système de design NL Sources et périmètre NL Design System est un écosystème indépendant des marques. Cet exemple pédagogique sélectionne une implémentation contributrice et deux thèmes originaux ; il ne revendique aucun style visuel national et n’utilise pas l’identité d’une municipalité. - Présentation de l’écosystème Ressources partagées pour les services publics et contexte communautaire. - Présentation destinée aux développeurs Composants, thèmes organisationnels et architecture des tokens de design. - Catalogue des composants Découvrez les composants documentés et les références disponibles. - 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. ## Système de design NL Ressources associées ### NSW système de design Découvrez les tokens de design de NSW, la typographie Public Sans et des onglets natifs accessibles au clavier grâce à un guide d’atelier complet accompagné d’une liste de lecture locale autonome. ### 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. - [Référence de mise en œuvre](https://github.com/nl-design-system/utrecht) - [Source](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Source](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Source](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Consultez la spécification associée](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Référence du code](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Consultez la spécification associée](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Consultez la spécification associée](https://github.com/nl-design-system/utrecht/tree/main/packages/component-library-css) - [Consultez la spécification associée](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Consultez la spécification associée](https://www.nldesignsystem.nl/handboek/estafettemodel/) - [Référence du code](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Référence du code](https://github.com/nl-design-system/utrecht) - [Présentation de l’écosystème Ressources partagées pour les services publics et contexte communautaire.](https://www.nldesignsystem.nl/) - [Présentation destinée aux développeurs Composants, thèmes organisationnels et architecture des tokens de design.](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Catalogue des composants Découvrez les composants documentés et les références disponibles.](https://www.nldesignsystem.nl/componenten/)