capsrock/nordic-civic-design-skill

Nordic Civic Design

Basierend auf den Werten des HDS (Helsinki Design System) dient dies als Leitfaden für die Erstellung von Bildschirmen für öffentliche Dienste. Es handelt sich um eine inoffizielle Fertigkeit, die in keiner Verbindung zur Stadt Helsinki steht.

Ziel ist es nicht, die Dienste der Stadt nachzuahmen. Verwendet werden nur die Zahlenwerte und das strukturelle Konzept, nicht jedoch die identitätsstiftenden Elemente der Stadt.

Nicht zu verwenden

• Logos, Stadtwappen, Wellenmotiv: Das Logo ist eine eingetragene Marke, dessen Nachbildung oder Veränderung nicht gestattet ist. Das Wellenmotiv ist ein visuelles Element der Stadt; die Nutzungsbedingungen durch Dritte sind nicht geprüft.
• Schriftdateien von Helsinki Grotesk: Eine kommerzielle Schriftart von Camelot Typefaces, deren Weiterverbreitung und Nutzung für KI-Training untersagt ist. Sie wird weder mitgeliefert noch in Webseiten oder Apps eingebettet. Die Schriftart wird nur per CSS angegeben.
• Bezeichnungen, die die Stadt Helsinki nennen: Im Namen oder Text des Ergebnisses dürfen keine Begriffe verwendet werden, die eine offizielle Verbindung zur Stadt suggerieren.

Schriftart

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">

In Umgebungen mit einer Lizenz wird die Originalschriftart verwendet, ansonsten Schibsted Grotesk. Dies ist eine Entscheidung dieser Fertigkeit, nicht des HDS. Der offizielle Fallback des HDS ist Arial.

Schibsted Grotesk steht unter der OFL 1.1 und ist in Strichstärken von 400 bis 900 verfügbar. Die drei vom HDS verwendeten Stärken (400, 500, 700) können direkt übernommen werden.

Eine Angabe für japanische Schriftarten existiert im HDS nicht. Für japanische Bildschirme wird als Standard Noto Sans JP verwendet, mit einer Zeilenhöhe von 1.75. Auch dies ist eine Entscheidung dieser Fertigkeit.

Form

Die formalen Richtlinien sind das Kernstück des HDS-Charakters. Abweichungen verändern den Eindruck erheblich.

• Abgerundete Ecken: 0: Weder bei Buttons, Eingabefeldern noch Karten.
• Rahmen: 2px: Angewendet bei Buttons, Eingabefeldern und Karten.
• Interaktionselemente: Höhe 56px: Standard für Buttons und Eingabefelder. Kleine Buttons sind 44px hoch.
• Keine Schatten: Das HDS stellt klar: "Schatten sind kein Teil der Marke." Schatten werden nicht für Höhendarstellung, Hervorhebung oder Textdekoration verwendet. Ausnahmen sind nur Toasts und Dialoge, die über Inhalten liegen.
• Karten standardmäßig ohne Rahmen: Standard des HDS. Rahmenlose Karten werden auf einem hellgrauen Hintergrund platziert (--color-black-5). Auf weißem Hintergrund erhalten sie einen 2px Rahmen. Diese Handhabung auf Weiß ist eine Entscheidung dieser Fertigkeit.
• Benachrichtigungen mit 8px linkem Balken: Die gesamte Fläche wird nicht mit einer starken Farbe gefüllt; stattdessen wird ein heller Hintergrund mit einem linken Balken verwendet.

Farben

Die Werte befinden sich in references/tokens.css, die Verwendung der einzelnen Farben und eine Kontrasttabelle in references/foundation.md. Die Farbnamen (bus, tram, metro, engel usw.) sind an das Stadtbild Helsinkis angelehnt.

• Aktionsfarbe: bus: --color-bus (#0000bf) wird für die primäre Aktion und Links verwendet. Hover ist --color-bus-dark.
• Fokus: coat-of-arms: Eine 3px Kontur mit --color-focus-outline wird verwendet. Auf dunklem Hintergrund wird sie weiß.
• Fließtext: black-90: --color-black-90 (#1a1a1a). Textfarbe ist entweder schwarz oder weiß; andere Textfarben werden nur bei Bedarf eingesetzt.
• Akzentfarben flächig einsetzen: Farben wie summer, suomenlinna, metro werden großflächig für Überschriftenbänder oder Trennungen verwendet. Kleinteiliger Einsatz mindert die Wirkung. Pro Bildschirm ist eine Akzentfarbe die Faustregel. Diese Faustregel ist eine Entscheidung dieser Fertigkeit.
• Nur 4 Markenfarben können auf Weiß als Text eingesetzt werden: bus, brick, coat-of-arms, tram. Metro nur bei großen Schriftgrößen. Helle Farben wie summer oder engel werden auf Weiß nur als Fläche verwendet.
• Variationen -light und -dark nicht als Hauptfarben: Sie werden nur für Zustände von Komponenten (z. B. Hover) und zur Unterscheidung von Informationstypen genutzt.
• Statusfarben nicht mit Akzentfarben vermischen: error, success, alert, info werden nur zur Kommunikation von Zuständen verwendet. Markenfarben werden nicht für Statusanzeigen genutzt. Zustände werden nicht allein durch Farbe, sondern auch durch Text oder Symbole vermittelt.

Text-Hintergrund-Kombinationen erfüllen das WCAG 2.1 AA-Kontrastverhältnis. Fließtext mindestens 4.5:1, großer Text mindestens 3:1. Die Textfarbe auf Markenfarben folgt der Tabelle in foundation.md (weiß auf bus, coat-of-arms, tram, brick; sonst black-90). Graue Texte werden nur bis --color-black-60 verwendet; --color-black-50 und darunter werden auf Weiß nicht eingesetzt.

Abstände

Basis ist 4px. Werte werden mit --spacing-* und --spacing-layout-* verwendet; Zwischenwerte werden nicht erzeugt.

• Innere Abstände von Komponenten und Abstände zwischen Komponenten: --spacing-* mit 8, 12, 16, 24, 32px
• Abstände zwischen Abschnitten: --spacing-layout-* mit 48, 64, 96, 128px
• Kleine Abstände gruppieren, große Abstände trennen: Elemente mit geringem Abstand wirken zusammengehörig. Elemente mit größerem Abstand wirken wichtiger.
• Dichte je nach Bildschirmcharakter anpassen: Öffentlichkeits- und Informationsbildschirme großzügig, datenintensive Arbeitsbildschirme enger.

Im Zweifelsfall den größeren Abstand wählen. Großzügige Abstände verleihen dem Bildschirm Ruhe. Dieser Satz ist eine Entscheidung dieser Fertigkeit. Das Raster verwendet 12 Spalten, eine maximale Breite von 1200px und einen Gutter von 24px (mobil 16px).

Text

• Drei Strichstärken: Fließtext 400, Buttons und Formularbeschriftungen 500, Hervorhebungen 700.
• Fließtext ab 16px: 16px ist der minimale Wert des HDS für Fließtext und kann auf jeder Bildschirmbreite verwendet werden. Bei textarmen Bildschirmen wird standardmäßig 18px verwendet, auf schmalen Bildschirmen auf 16px reduziert. 14px wird nur für sekundären Text und in Komponenten verwendet.
• Zwei Größenskalen für Überschriften: Desktop: h1 64px, h2 48px. Mobil und auf Arbeitsbildschirmen: h1 40px, h2 32px. Überschriftenebenen werden semantisch korrekt verwendet; soll nur das Aussehen geändert werden, wird die Größe über Tokens angepasst.
• Zeilenhöhe: Langer Fließtext 1.5, kurze Absätze und Einleitungstexte 1.2, einzeilige Überschriften und Komponenten 1, kleine Schrift und Zitate 1.75.

Die Standardstärke für Überschriften ist 700. Dies ist eine Entscheidung dieser Fertigkeit; das HDS gibt keine Schriftstärke für Überschriften vor. Wertetabelle und Verwendung finden sich in references/foundation.md.

Komponenten

Vor dem Erstellen von Komponenten ist references/components.md zu lesen. Es enthält Werte und Verwendungszwecke für Buttons, Eingabefelder, Checkboxen, Benachrichtigungen, Karten und Links. Die wichtigsten Punkte sind:

• Ein primärer Button pro Bildschirm: Nur für die wichtigste Aktion auf dem Bildschirm. Abbrechen oder Schließen wird als supplementary ausgeführt; da diese keinen Rahmen haben, erhalten sie ein Symbol. Seitenwechsel erfolgen über Links, nicht über Buttons.
• Eingabefelder erhalten zwingend ein Label: Pflichtfelder werden mit * markiert, die Bedeutung dieser Markierung wird am Anfang des Formulars erläutert.
• Benachrichtigungen nur für wichtige Informationen: Inline maximal eine Nachricht gleichzeitig; keine dynamischen Ergänzungen. Wichtige Benachrichtigungen wie Fehler werden nicht automatisch ausgeblendet.
• Karten nicht gesamthaft klickbar machen: Soll die gesamte Karte klickbar sein, wird ein Linkbox verwendet.
• Externe Links erhalten ein Symbol: Grundsätzlich werden sie nicht in einem neuen Tab geöffnet.

Für Komponenten, die hier nicht aufgeführt sind, werden die Richtlinien zu Form, Farbe und Abständen kombiniert. Werte, die nicht als HDS-Werte bestätigt sind, werden nicht als solche bezeichnet.

Prüfliste

Nach der Fertigstellung Folgendes überprüfen:

1. Es sind keine abgerundeten Ecken oder Schatten mehr vorhanden (Ausnahme: Schatten von Toast und Dialog)
2. Es wurden keine Farb- oder Abstandswerte verwendet, die nicht in den Tokens enthalten sind
3. Interaktionselemente haben eine Höhe von mindestens 44px
4. Die Fokus-Kontur ist sichtbar
5. Das Kontrastverhältnis zwischen Text und Hintergrund erfüllt AA
6. Es wurden kein Logo, Wellenmotiv oder Stadtname verwendet

Quellenangabe

Token- und Komponentenwerte stammen aus hds-design-tokens und hds-core Version 6.0.7, die Verwendungszwecke aus den offiziellen HDS-Dokumenten (https://hds.hel.fi/ , die Originaltexte im selben Repository unter site/src/docs). Beide unter der MIT License, Copyright (c) 2023 City of Helsinki. Die Lizenztexte befinden sich in references/LICENSE-HDS.txt. Bei der Verteilung dieser Fertigkeit ist diese Datei beizufügen. Die Herkunft der Farbnamen basiert auf den Richtlinien zur visuellen Identität der Stadt Helsinki.