Services publics et éducation · Nouvelle ressource
Système de design 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.
CSS natif de hds-core5.2.2 ; police Arial de substitution et logique applicative locale d’origine. · Référence de mise en œuvre
02
Référence de conception du système de design Helsinki
Package hds-core5.2.2 CSS et recommandations officielles pour les formulaires. Styles natifs ; police Arial de substitution ; règle d’origine imposant une sélection minimale.
Limites entre Core et React du système de design Helsinki
Choisissez l’implémentation que vous utilisez réellement
HDS fournit Core CSS, les composants React et les jetons de conception. Cet exemple utilise hds-core5.2.2, le package téléchargé et inspecté pour sa réalisation. Les numéros de version des versions du dépôt peuvent différer de ceux d’un package donné ; une balise plus récente du dépôt ne prouve donc pas que cet exemple utilise cette version.
Core fournit des variables de base et les styles de chaque composant. Il ne fournit pas l’état applicatif du formulaire utilisé ici. La logique de sélection, de validation, de vérification et de modification est propre à JavaScript et s’appuie sur des champs HTML natifs ainsi que sur le modèle de formulaire HDS documenté.
Typographie et limites des polices du système de design Helsinki
Utilisez la police de substitution native en toute transparence
La variable de police place d’abord HelsinkiGroteskPro, puis Arial et sans-serif. Le fichier README de Core exclut explicitement les fichiers de police Helsinki pour des raisons de droit d’auteur. L’aperçu conserve la police de substitution au lieu de télécharger des polices soumises à des restrictions ou de prétendre discrètement reproduire fidèlement la marque.
Le jeton de base du corps de texte est de 16 px, avec une interligne de 1,5. heading-xl est de 48 px et le jeton mobile de 40 px ; l’aperçu bascule entre les deux à 576 px. Ces valeurs sont nommées, mais une variable CSS contenant un point de rupture ne crée pas automatiquement un comportement adaptatif. La règle media explicite relève de la composition de l’application.
Deux systèmes d’espacement du système de design Helsinki
Distinguez les espacements entre composants du rythme de la page
HDS distingue une séquence d’espacement pour les composants d’une séquence plus ample pour la mise en page. La première comprend 2, 4, 8, 12, 16 et 24 px, puis augmente jusqu’à 72 px. L’espacement de mise en page atteint 128 px. Utiliser spacing-layout-xl comme espace entre des cases à cocher adjacentes surchargerait le groupe, même si la variable est valide.
Le composant de case à cocher définit un contrôle de 24 px, une bordure de 2 px et un contour de focus de 3 px. La hauteur minimale du bouton est de 56 px et ses angles sont droits. L’aperçu conserve ces formes natives, tandis que le formulaire se trouve dans un conteneur applicatif dont la largeur maximale est limitée à la largeur de référence publiée de 720 px.
Rôles des couleurs dans un formulaire du système de design Helsinki
Ne confondez pas les noms de palette avec les couleurs de retour d’information
Le thème interactif par défaut utilise Bus blue, tandis que le contour de focus utilise Coat of arms blue. Le retour d’erreur emploie une teinte baie distincte et une surface d’erreur pâle. Une couleur d’accent de la palette, comme Copper, peut mettre un en-tête en valeur, mais ne doit pas remplacer la couleur du rôle d’erreur sous prétexte qu’elle est plus distinctive.
L’erreur intégrée au groupe de sélection associe du texte, une bordure gauche contrastée et une icône. Elle ne repose pas uniquement sur le rouge. Les liens du résumé des erreurs utilisent la couleur interactive habituelle afin que les personnes reconnaissent le chemin de retour vers le champ.
Anatomie d’un groupe de cases à cocher du système de design Helsinki
Un groupe comprend une question et plusieurs réponses
La structure native comprend un fieldset avec une légende, un conteneur pour les éléments et des enveloppes individuelles pour chaque case à cocher. Chaque input précède immédiatement son label, car la feuille de style s’appuie sur cette relation pour afficher les états visuels. La légende explique la tâche de sélection ; chaque label indique un thème disponible.
La démo demande de choisir au moins deux thèmes, conformément à une règle métier définie pour l’exemple. Les cases à cocher conviennent, car plusieurs choix peuvent rester sélectionnés. Un groupe de boutons radio exprimerait un choix exclusif et contredirait la consigne. L’indication du fieldset reste visible avant et après la validation.
html
<fieldset class="hds-selection-group" aria-describedby="topics-hint">
<legend class="hds-selection-group__legend">Topics for your afternoon</legend>
<p id="topics-hint">Choose at least two topics.</p>
<div class="hds-selection-group__items hds-selection-group__items--vertical">
<div class="hds-checkbox">
<input class="hds-checkbox__input" type="checkbox" id="repair" value="Repair and reuse">
<label class="hds-checkbox__label" for="repair">Repair and reuse</label>
</div>
<div class="hds-checkbox">
<input class="hds-checkbox__input" type="checkbox" id="garden" value="Urban gardening">
<label class="hds-checkbox__label" for="garden">Urban gardening</label>
</div>
</div>
</fieldset>
Système de design Helsinki Erreurs liées et récupération
Accéder au problème, puis préserver les choix effectués
HDS recommande d’afficher un résumé des erreurs sous le titre du formulaire après l’échec de l’envoi. La liste contient des liens vers les champs concernés et le focus est placé sur le titre du résumé. La démo suit cette séquence : lorsque zéro ou un thème est sélectionné, le résumé et le message associé au champ s’affichent ; le lien place le focus sur la première case à cocher.
Après la première tentative, chaque changement de sélection vérifie à nouveau le nombre minimal de choix. Dès que deux thèmes sont sélectionnés, les deux messages d’erreur disparaissent sans effacer les choix. Lors d’une nouvelle tentative infructueuse, le focus revient au titre du résumé. La règle est vérifiée à nouveau lors de la revue ; dans un vrai service, le retour côté client ne remplace pas la validation côté serveur.
Lancez la revue sans sélectionner de thème et vérifiez que le focus est placé sur le résumé.
Suivez son lien et choisissez deux thèmes ; vérifiez que l’erreur disparaît.
Ouvrez la revue locale, revenez modifier les thèmes et vérifiez que les deux choix sont conservés.
Système de design Helsinki Ressources et exemple complet
Charger la base et les composants sélectionnés
Le package Core sépare base.css des styles des composants. Importer uniquement la base fournit les variables et la typographie, mais pas la structure des cases à cocher ni celle des notifications. La configuration indique les fichiers exacts utilisés par cet exemple, pour limiter les ressources chargées par rapport au bundle de tous les composants.
L’exemple complet inclut la validation et la réinitialisation de l’application. L’état final est appelé « revue locale », car rien n’est enregistré ni envoyé. Effacer la sélection est une action volontaire qui réinitialise les choix et l’historique de validation, puis place le focus sur le premier champ ; cette action n’est pas déclenchée par une erreur ordinaire dans un champ.
base.css fournit les couleurs, l’espacement, la typographie et les dimensions de référence.
Les styles checkbox et selection-group fournissent les contrôles groupés et les messages d’aide associés.
Les styles notification et button fournissent le fond du résumé des erreurs et les actions.
Système de design Helsinki Ce que l’exemple démontre
Détails d’implémentation sans prétendre à un service réel
L’aperçu met en œuvre les styles réels des composants HDS, le focus clavier, la correction et la conservation des données aux résolutions de 1440, 768 et 390px. Il ne prétend pas constituer un audit d’accessibilité exhaustif. Un véritable service municipal multilingue nécessite également des libellés localisés, des métadonnées de langue adaptées, des règles côté serveur et une réponse confirmée par le système de service.
Le code source est sous licence MIT, mais la police municipale personnalisée est soumise à ses propres conditions d’utilisation. Cet exemple pédagogique indépendant utilise des thèmes de programme fictifs et aucune identité officielle Helsinki. Son apparence et son état local ne doivent jamais être confondus avec une véritable inscription à un événement.
Focus sur le résumé des erreurs, correction par lien, revue, modification et effacement de la sélection.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Plan a skills afternoon</title><link rel="stylesheet" href="vendor/hds-core-5.2.2/base.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/checkbox.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/selection-group.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/notification.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/button.css"><style>*{box-sizing:border-box}body{margin:0;padding:var(--spacing-layout-s) var(--spacing-s);font-family:var(--font-default);color:var(--color-black-90)}main{max-width:720px;margin:auto}h1{margin-top:8px}header{border-top:8px solid var(--color-copper);padding-top:var(--spacing-m)}.hds-selection-group{margin:24px 0}.hds-notification{margin:24px 0}.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}footer{font-size:14px;line-height:1.5;margin-top:32px;border-top:1px solid var(--color-black-20);padding-top:16px}#review{background:var(--color-silver-light);padding:24px;margin-top:24px}[hidden]{display:none!important}@media(max-width:575px){.heading-xl{font-size:var(--fontsize-heading-xl-mobile)}}button{max-width:100%}</style><main class="text-body"><header><small>COMMUNITY SKILLS · LOCAL PLAN</small><h1 class="heading-xl">Plan a skills afternoon</h1><p>Select at least two topics for an example programme. Nothing is registered or sent.</p></header><form id="form" novalidate><div id="summary" class="hds-notification hds-notification--error" hidden><div class="hds-notification__content"><h2 id="summary-heading" class="hds-notification__label" tabindex="-1">Check your topic selection</h2><div class="hds-notification__body"><ul><li><a href="#repair" id="error-link">Choose at least two topics</a></li></ul></div></div></div><fieldset class="hds-selection-group" aria-describedby="hint field-error"><legend class="hds-selection-group__legend">Topics for your afternoon</legend><p id="hint">Choose two or more. You can change your selection before reviewing the plan.</p><div class="hds-selection-group__items hds-selection-group__items--vertical"><div class="hds-checkbox"><input id="repair" type="checkbox" class="hds-checkbox__input" value="Repair and reuse"><label class="hds-checkbox__label" for="repair">Repair and reuse</label></div><div class="hds-checkbox"><input id="digital" type="checkbox" class="hds-checkbox__input" value="Everyday digital skills"><label class="hds-checkbox__label" for="digital">Everyday digital skills</label></div><div class="hds-checkbox"><input id="garden" type="checkbox" class="hds-checkbox__input" value="Urban gardening"><label class="hds-checkbox__label" for="garden">Urban gardening</label></div></div><div id="field-error" class="hds-selection-group__error-text" hidden>Choose at least two topics.</div></fieldset><p id="count" role="status">0 topics selected.</p><div class="actions"><button class="hds-button hds-button--primary" type="submit">Review local plan</button><button id="reset" class="hds-button hds-button--secondary" type="button">Clear selection</button></div></form><section id="review" hidden tabindex="-1"><h2 class="heading-m">Your selected topics</h2><ul id="selected"></ul><p>This is a local review, not a booking confirmation.</p><button id="change" class="hds-button hds-button--secondary">Change topics</button></section><footer>Native HDS Core5.2.2 styles with Arial fallback. Original selection rule and local review. No Helsinki branding, registration or backend.</footer></main><script>let attempted=false;const boxes=[...document.querySelectorAll('input[type=checkbox]')];const values=()=>boxes.filter(x=>x.checked);function validate(focus=false){const n=values().length;document.querySelector('#count').textContent=n+' topics selected.';const bad=attempted&&n<2;document.querySelector('#summary').hidden=!bad;document.querySelector('#field-error').hidden=!bad;boxes.forEach(x=>{if(bad)x.setAttribute('aria-invalid','true');else x.removeAttribute('aria-invalid')});if(bad&&focus)document.querySelector('#summary-heading').focus();return !bad}boxes.forEach(x=>x.onchange=()=>validate());document.querySelector('#error-link').onclick=e=>{e.preventDefault();boxes[0].focus()};document.querySelector('#form').onsubmit=e=>{e.preventDefault();attempted=true;if(!validate(true))return;const list=document.querySelector('#selected');list.replaceChildren();values().forEach(x=>{const li=document.createElement('li');li.textContent=x.value;list.append(li)});document.querySelector('#form').hidden=true;document.querySelector('#review').hidden=false;document.querySelector('#review').focus()};document.querySelector('#change').onclick=()=>{document.querySelector('#form').hidden=false;document.querySelector('#review').hidden=true;boxes[0].focus()};document.querySelector('#reset').onclick=()=>{boxes.forEach(x=>x.checked=false);attempted=false;validate();boxes[0].focus()};</script></html>
Configuration de l’agent du système de design Helsinki
Point de départ de l’implémentation
Chemins exacts des ressources Core. Le code de l’application gère la validation et la revue ; HelsinkiGroteskPro n’est pas inclus. Le ZIP de l’exemple complet dans Sources fournit également les dépendances exactes de l’aperçu et le document complet. Décompressez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/helsinki.html. N’ouvrez pas les exemples basés sur des modules avec file://.
bash
npm install [email protected]
# CSS imports in a bundler:
# import 'hds-core/lib/base.css';
# import 'hds-core/lib/components/checkbox/checkbox.css';
# import 'hds-core/lib/components/selection-group/selection-group.css';
# import 'hds-core/lib/components/notification/notification.css';
# import 'hds-core/lib/components/button/button.css';
# In plain HTML, copy these files into public assets and link base.css first.
# HelsinkiGroteskPro is not bundled; the native font stack falls back to Arial.
Un prompt pour votre projet
Prompt pour l’agent IA
Utilisez HDS Core5.2.2 base et le composant CSS sélectionné. Regroupez les cases à cocher associées avec fieldset/legend, conservez les labels et les indications, et utilisez les jetons d’erreur sémantiques. En cas d’échec de la revue, affichez les erreurs liées sous le titre du formulaire et placez le focus sur le titre du résumé. Après correction, vérifiez à nouveau les choix, conservez les valeurs sélectionnées et distinguez la revue locale d’un envoi confirmé par le serveur.
05
Système de design Helsinki Sources et périmètre
Exemple indépendant OpenDesign. Ni ressource de police Helsinki ni identité de service ; aucune inscription ni réponse du backend.
