Design for AI

Stil Behörde / institutionell klar: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für behörde / institutionell klar. Auch bekannt als Gov-Designsystem, GOV.UK-Stil, USWDS, Civic Design, Public-Sector-UI, institutionelles Web. 2012 (GOV.UK-Start), 2016 (USWDS), anhaltend.

Merkmale

  • einfache Sprache zuerst; das Layout dient dem Lesen und Formularen, nicht dem Marketing
  • große, kontrastreiche Schrift, eine Spalte, großzügige line-height
  • schwarzer Text auf Weiß, ein starkes Linkblau, ein Fokusgelb, eine dünne Markenleiste oben
  • Formulare als Kernmuster: eine Frage pro Seite, große Eingabefelder, klare Fehlerzusammenfassungen
  • keine Hero-Bilder, keine Karten, keine Icons außer einem Wappen oder Chevron
  • standardmäßig barrierefrei: Skip-Links, sichtbarer Fokus, 44px Ziele, AA oder besser
  • null dekorative Motion

Palette

#ffffff Seite, #0b0c0c Text, #1d70b8 Link, #003078 Link-Hover, #ffdd00 Fokus, #d4351c Fehler, #00703c Erfolg, #f3f2f1 Fläche, #b1b4b6 Rand

Schrift

GDS Transport ist eingeschränkt; frei: Public Sans (USWDS), Source Sans 3 oder Atkinson Hyperlegible; Fließtext 19px line-height 1.3-1.5, Überschriften 700 bei 48/36/27px, max width 66ch

Do

  • folge den Mustern eines bestehenden öffentlichen Designsystems (GOV.UK Design System oder USWDS) für Formulare, Fehler, Buttons und Navigation
  • halte Seiten einspaltig bei 66ch und setze eine Aufgabe pro Seite
  • mach den Fokuszustand zu einem 3px #ffdd00 Hintergrund plus 3px #0b0c0c Outline, damit er unübersehbar ist

Don't

  • füge keine Marketing-Abschnitte, Testimonials, Hero-Bilder oder Animation hinzu
  • nutze keinen hellgrauen Text, keine Nur-Platzhalter-Labels oder dünnen Ränder
  • erfinde keine neuen Komponenten, wenn das Designsystem schon eine hat

Bekannt dafür: GOV.UK, USWDS (usa.gov), Canada.ca, Service NSW, Bundesregierung.de (teilweise)

CSS-Seed
:root {
  --bg: #ffffff;
   --fg: #0b0c0c;
   --accent: #1d70b8;
   --focus: #ffdd00;
   --error: #d4351c;
   --surface: #f3f2f1;
   --line: #b1b4b6;
   --radius: 0;
   --font: 'Public Sans',sans-serif
}
Prompt

Baue die Seite im behördlich-institutionellen Stil nach den Konventionen des GOV.UK Design System. Hintergrund #ffffff, Text #0b0c0c, Links #1d70b8 unterstrichen (Hover #003078), Fokus #ffdd00, Fehler #d4351c, Erfolg #00703c, Fläche #f3f2f1, Ränder #b1b4b6. Oben: eine 10px #1d70b8 Markenleiste, dann ein schwarzer 60px Header mit weißer Wortmarke und einer reinen Text-Nav. Schrift Public Sans: Fließtext 19px line-height 1.5, Überschriften 700 bei 48/36/27/24px mit 30px unterem Abstand, Bildunterschriften 16px, max-width 66ch, einspaltig mit 30px seitlichem Padding. Formulare: eine Frage pro Seite, Labels 19px 700 über den Eingabefeldern, Hinweistext 16px in #505a5f, Eingabefelder 40px hoch mit 2px #0b0c0c Rand und Radius 0, Fehlerzustand mit 4px #d4351c linkem Rand und einer Fehlerzusammenfassung oben. Buttons: #00703c Füllung, weißer 19px 700 Text, 2px dunklere Unterkante, Radius 0. Fokus: 3px #ffdd00 Hintergrund und 3px #0b0c0c Outline. Skip-Link als Erstes. Keine Bilder, keine Karten, keine Animation.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im behördlich-institutionellen Stil nach den Konventionen des GOV.UK Design System. Hintergrund #ffffff, Text #0b0c0c, Links #1d70b8 unterstrichen (Hover #003078), Fokus #ffdd00, Fehler #d4351c, Erfolg #00703c, Fläche #f3f2f1, Ränder #b1b4b6. Oben: eine 10px #1d70b8 Markenleiste, dann ein schwarzer 60px Header mit weißer Wortmarke und einer reinen Text-Nav. Schrift Public Sans: Fließtext 19px line-height 1.5, Überschriften 700 bei 48/36/27/24px mit 30px unterem Abstand, Bildunterschriften 16px, max-width 66ch, einspaltig mit 30px seitlichem Padding. Formulare: eine Frage pro Seite, Labels 19px 700 über den Eingabefeldern, Hinweistext 16px in #505a5f, Eingabefelder 40px hoch mit 2px #0b0c0c Rand und Radius 0, Fehlerzustand mit 4px #d4351c linkem Rand und einer Fehlerzusammenfassung oben. Buttons: #00703c Füllung, weißer 19px 700 Text, 2px dunklere Unterkante, Radius 0. Fokus: 3px #ffdd00 Hintergrund und 3px #0b0c0c Outline. Skip-Link als Erstes. Keine Bilder, keine Karten, keine Animation.

## Tokens
:root { --bg:#ffffff; --fg:#0b0c0c; --accent:#1d70b8; --focus:#ffdd00; --error:#d4351c; --surface:#f3f2f1; --line:#b1b4b6; --radius:0; --font:'Public Sans',sans-serif }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.