# Behörde / institutionell klar

Auch bekannt als: Gov-Designsystem, GOV.UK-Stil, USWDS, Civic Design, Public-Sector-UI, institutionelles Web  
Ära: 2012 (GOV.UK-Start), 2016 (USWDS), anhaltend  
Seite: https://designforai.dev/de/style/government-institutional-clean

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

```css
: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.