capsrock/nordic-civic-design-skill

Nordic Civic Design

Guidage pour créer des écrans de service public basé sur les valeurs du HDS. Compétence non officielle, sans lien avec la ville d'Helsinki.

Il ne s'agit pas de faire ressembler le résultat au service de la ville. On utilise les valeurs numériques et les principes de composition, pas les éléments identifiant la ville.

Éléments à ne pas utiliser

• Logo, blason, motif des vagues : Le logo est une marque déposée, sa reproduction et sa modification sont interdites. Le motif des vagues est un élément visuel de la ville, dont les conditions d'utilisation par des tiers n'ont pas été vérifiées.
• Fichiers de la police Helsinki Grotesk : Police commerciale de Camelot Typefaces, dont la redistribution et l'utilisation pour l'apprentissage IA sont interdites. Ne pas l'inclure ni l'incorporer dans le Web ou les applications. Seulement spécifier le nom de la police en CSS.
• Expressions faisant référence à la « Ville d'Helsinki » : Ne pas inclure dans le nom ou le texte du livrable des termes pouvant être confondus avec le site officiel de la ville.

Typographie

font-family: HelsinkiGroteskPro, "Schibsted Grotesk", Arial, "Noto Sans JP", sans-serif;

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Schibsted+Grotesk:wght@400;500;700&display=swap">

Dans un environnement où la licence est détenue, la police d'origine sera utilisée ; sinon, ce sera Schibsted Grotesk. Ce n'est pas une spécification du HDS, mais un choix de cette compétence. L'alternative officielle est Arial.

Schibsted Grotesk est sous licence OFL 1.1, avec des graisses de 400 à 900. On peut utiliser directement les 3 niveaux du HDS (400, 500, 700).

La spécification japonaise n'est pas dans le HDS. Pour les écrans en japonais, on utilise Noto Sans JP par défaut, avec une hauteur de ligne de 1,75. C'est aussi un choix de cette compétence.

Forme

Les critères de forme sont au cœur de l'aspect HDS. Les modifier change considérablement l'impression.

• Coins non arrondis : à 0 pour tous les boutons, champs de saisie et cartes.
• Bordure de 2px : pour les boutons, champs de saisie et cartes.
• Hauteur des composants interactifs : 56px pour les boutons et champs standard ; les petits boutons font 44px.
• Pas d'ombre : Le HDS précise que « l'ombre ne fait pas partie de la marque ». On n'utilise pas d'ombre pour exprimer la hauteur, l'accentuation ou la décoration du texte. Seules les notifications toast et les dialogues qui se superposent au contenu utilisent une ombre.
• Cartes sans bordure par défaut : Valeur par défaut du HDS. Les cartes sans bordure sont placées sur un fond gris clair (--color-black-5). Sur fond blanc, on utilise une bordure de 2px. Ce traitement sur fond blanc est un choix de cette compétence.
• Notification avec bande de 8px à gauche : On n'utilise pas de couleur forte sur toute la surface, mais un fond clair avec une bande à gauche.

Couleurs

Les valeurs se trouvent dans references/tokens.css, et le tableau des utilisations par couleur et des contrastes dans references/foundation.md. Les noms de couleurs (bus, tram, metro, engel, etc.) sont inspirés du paysage urbain d'Helsinki.

• Couleur d'action : bus – Utiliser --color-bus (#0000bf) pour les actions principales et les liens. Le survol utilise --color-bus-dark.
• Focus : coat-of-arms – Utiliser le contour de 3px de --color-focus-outline. Sur fond sombre, utiliser du blanc.
• Texte principal : black-90 – --color-black-90 (#1a1a1a). Les couleurs de texte sont soit noir soit blanc ; les autres couleurs de texte sont réservées aux cas intentionnels.
• Couleurs d'accent utilisées en surface : summer, suomenlinna, metro, etc., sont utilisées en grandes surfaces pour les bandes de titres ou les séparateurs. Les disperser en petites touches enlève le caractère. Viser une couleur par écran. Cette indication est un choix de cette compétence.
• Couleurs de marque pouvant être placées en texte sur fond blanc : seulement bus, brick, coat-of-arms et tram. metro uniquement pour les grandes tailles de texte. Les couleurs claires comme summer ou engel sont utilisées comme surfaces sur fond blanc.
• Les variantes -light et -dark ne sont pas des couleurs principales : Elles sont réservées aux états des composants (survol, etc.) et à la distinction de types d'informations.
• Couleurs d'état séparées des accents : error, success, alert, info sont utilisées uniquement pour transmettre un état. On n'utilise pas de couleur de marque pour l'affichage d'état. On n'utilise pas uniquement la couleur ; on ajoute du texte ou une icône.

Les combinaisons texte/fond respectent le rapport de contraste WCAG 2.1 AA. Le texte principal a un rapport >= 4,5:1, les grands textes >= 3:1. Les couleurs de texte sur les couleurs de marque suivent le tableau dans foundation.md (sur bus, coat-of-arms, tram, brick, le texte est blanc ; sur les autres, black-90). Les textes en gris utilisent jusqu'à --color-black-60 ; --color-black-50 et moins ne sont pas utilisés sur fond blanc.

Espacement

Basé sur 4px. Utiliser les valeurs --spacing-* et --spacing-layout-*, sans créer de valeurs intermédiaires.

• À l'intérieur des composants et entre les composants : --spacing-* de 8, 12, 16, 24, 32px.
• Entre les sections : --spacing-layout-* de 48, 64, 96, 128px.
• Regrouper avec de petits espacements, séparer avec de grands espacements : Les éléments proches semblent liés. Les éléments avec un grand espacement paraissent plus importants.
• Adapter la densité au caractère de l'écran : Les écrans de communication ou d'information sont larges, les écrans de travail avec beaucoup d'informations sont plus serrés.

En cas de doute, choisir l'espacement plus large. La largeur des espacements donne le calme à l'écran. Cette phrase est un choix de cette compétence. La grille est de 12 colonnes, largeur maximale 1200px, gouttière de 24px (16px sur mobile).

Typographie

• 3 niveaux de graisse : Texte principal 400, boutons et étiquettes de formulaire 500, accentuation 700.
• Texte principal à partir de 16px : 16px est la valeur minimale du HDS pour le texte principal, utilisable sur toute largeur d'écran. Sur les écrans avec peu de texte, on utilise 18px par défaut, et on réduit à 16px sur les petits écrans. 14px est réservé au texte auxiliaire et à l'intérieur des composants.
• Titres basés sur deux échelles : Sur desktop, h1 = 64px, h2 = 48px. Sur mobile et écrans de travail, h1 = 40px, h2 = 32px. Utiliser la hiérarchie de titres selon le sens ; pour changer l'apparence seulement, utiliser les tokens pour la taille.
• Hauteur de ligne : 1,5 pour les longs textes, 1,2 pour les paragraphes courts et les textes d'introduction, 1 pour les titres sur une ligne et les composants, 1,75 pour les petits textes et les citations.

La graisse par défaut des titres est 700. C'est un choix de cette compétence, car le HDS ne spécifie pas la graisse des titres dans sa documentation. Le tableau des valeurs et leurs utilisations se trouve dans references/foundation.md.

Composants

Lire references/components.md avant de créer des composants. On y trouve les valeurs et utilisations des boutons, champs de saisie, cases à cocher, notifications, cartes et liens. Points essentiels :

• Un bouton primary par écran : Pour l'action la plus importante de l'écran uniquement. Annuler ou fermer est en supplementary, sans bordure, donc avec une icône. Naviguer entre pages se fait par un lien, pas un bouton.
• Les champs de saisie doivent toujours avoir une étiquette : Marquer les champs obligatoires avec * et expliquer la signification du marquage en haut du formulaire.
• Notifications réservées aux informations importantes : Les notifications en ligne sont au maximum une par écran, et ne sont pas ajoutées dynamiquement. Les notifications importantes comme les erreurs ne disparaissent pas automatiquement.
• Ne pas rendre toute la carte cliquable : Si on veut la rendre cliquable dans son ensemble, utiliser Linkbox.
• Icône pour les liens externes : En principe, ne pas ouvrir dans un nouvel onglet.

Pour les composants non listés ici, les assembler à partir des critères de forme, couleur et espacement. Ne pas écrire comme valeur HDS ce qui n'a pas été vérifié comme tel.

Vérifications à effectuer

Une fois terminé, vérifier les points suivants :

1. Pas de coins arrondis ni d'ombres (sauf ombres pour les notifications toast et les dialogues).
2. Pas d'utilisation de couleurs ou d'espacements non présents dans les tokens.
3. Hauteur des composants interactifs >= 44px.
4. Contour de focus visible.
5. Rapport de contraste texte/fond >= AA.
6. Pas de logo, motif des vagues, ou nom de la ville.

Sources

Les valeurs des tokens et des composants proviennent de hds-design-tokens et hds-core 6.0.7 ; les utilisations proviennent de la documentation officielle du HDS (https://hds.hel.fi/, le texte original se trouve dans le même dépôt sous site/src/docs). Le tout est sous licence MIT, Copyright (c) 2023 City of Helsinki. Le texte de licence se trouve dans references/LICENSE-HDS.txt. Lors de la distribution de la compétence, ce fichier doit être inclus. L'origine des noms de couleurs provient du guide d'identité visuelle de la ville d'Helsinki.