govtech-de-design

name	govtech-de-design
description	Use this skill to generate well-branded interfaces and assets for GovTech DE — a speculative-design prototype for a citizen-first interaction layer over the German public-administration stack (DeutschlandID + EUDI Wallet + Deutschland-Stack). Contains design guidelines, OKLCH colour tokens, typography (Source Sans 3 + 5-px-line-height-rhythm GOV.UK scale), Lucide-icon usage rules, the three-tier shadow + motion system, and a web UI kit (Posteingang, Stammdaten, Umzug surfaces) for prototyping.
user-invocable	true

GovTech DE Design Skill

Read the README.md file within this skill first; it documents the brand context (speculative prototype, all data mocked), the three primary personas (Anna Petrov, Familie Schmidt, Mehmet Yıldız), the content fundamentals (Sie-Form, gov.uk register, no emoji), the visual foundations (Hue-80° warm-neutral surfaces, Trust-Blau accent, three-tier shadows, two motion curves with no bounce), the 14 Hard-Lines, and the file index.

Then explore the other files:

• colors_and_type.css — Drop into any HTML artefact; --ds-* tokens + .ds-* semantic classes + automatic dark mode + reduced-motion + high-contrast support.
• assets/ — Brand mark (logo-mark.svg) and wordmark (logo-wordmark.svg). Iconography is lucide-react (ISC) — load via CDN from https://unpkg.com/lucide@latest/dist/umd/lucide.min.js for static artefacts.
• fonts/README.md — Source Sans 3 (SIL-OFL) via Google Fonts CDN; substitution notes.
• preview/ — One HTML card per token cluster (colours, type, spacing, motion, components). Use as visual reference.
• ui_kits/web/ — Click-through web prototype with sidebar + topbar + the three shipped surfaces (Posteingang, Stammdaten, Umzug). Copy the component you need into your artefact.

When generating artefacts

• Slides, mocks, throwaway prototypes: Copy colors_and_type.css (or its :root block) into the artefact. Use .ds-* classes for headings + body. Reference Lucide via CDN. Never emit emoji. Use Sie-Form German for any UI copy unless the user has asked for another language.
• Production code: The upstream Next.js app is at https://github.com/klarbau/govtech-de. Read its CLAUDE.md for tech-stack constraints (Next.js 15 + Tailwind v4 + shadcn/ui + lucide-react + next-intl + framer-motion sparingly). Apply the same --ds-* tokens — they map 1:1 to src/app/globals.css in the live app.

Default behaviour on plain invocation

If the user invokes this skill without further guidance, ask them:

1. What are you building? (a slide / a mock / a prototype / production code)
2. Which surface? (Posteingang / Stammdaten / a Vorgangs-wizard / Dashboard / something new)
3. Which persona's data? (Anna / Schmidt / Mehmet — or generic)
4. In which language? (Deutsch is default; EN / RU / UK / AR / TR also supported via next-intl)
5. Light, dark, or both? (Both is default — prefers-color-scheme is honoured automatically.)

Then act as an expert designer working in the GovTech DE register and output HTML artefacts (or production code, depending on the answer).

Non-negotiable rules

• Never use emoji.
• Never frame Source Sans 3 as a "BundesSans alternative". It's chosen on tech merits only (SIL-OFL, 9 weights, German diacritics including ẞ, slashed zero).
• Never colour-code Behörden categories (Bund / Land / Kommune are text-only).
• Never invent norm citations — every § reference must resolve to a real regulation (gesetze-im-internet.de).
• Always include a prototype disclaimer / [MOCK] watermark on any surface that displays personal data.
• Always use tabular numerals (font-variant-numeric: tabular-nums or .ds-tabular) for Aktenzeichen, FE-Nr, IBAN, Renten-Nr, Fristen.