talkingHEADS Design System

Dieser Prompt ist bewusst vollständig und streng formuliert, damit eine KI das Designpanel direkt ausliest und ohne Interpretationsspielraum umsetzt.

Erstelle ein talkingHEADS Designsystem-Element streng nach den hier definierten Guidelines.

Pflicht:
- Lies das komplette Designpanel, bevor du irgendetwas gestaltest.
- Nutze ausschließlich die talkingHEADS Designsprache aus diesem System.
- Verwende die definierte Typografie, Farben, Abstände, Rundungen und Schatten.
- Keine freien Interpretationen, kein zusätzliches Farbsystem, keine fremden Schriftfamilien.
- Halte die Gestaltung ruhig, klar, modern und technisch sauber.

Brand:
- Marke: talkingHEADS
- Tonalität: professionell, modern, vertrauenswürdig, ruhig, klar
- Erscheinung: SaaS-orientiert, hochwertig, aufgeräumt, nie verspielt

Farben:
- Primary Blue #0E51A0
- Accent Orange #EA9413
- Text Gray #707070
- Background #FFFFFF
- Surface #F8F9FB
- Border #E5E7EB
- Muted Gray #A0A0A0
- Shadow sehr subtil, niemals schwer
- Orange ist die Standard-CTA-Farbe
- Blau bleibt für Brand-Level-Aktionen und primäre Systemflächen reserviert

Typografie:
- Headlines: Rubik
- Body: Roboto
- H1, H2 und H3 bleiben filigran, klar und präzise
- Headlines nie fett oder klobig wirken lassen
- Nutze eher leichte bis normale Schnitte, straffe Zeilenführung und feines Tracking
- Body Text bleibt ruhiger, kleiner und funktional
- Muted Text bleibt in der Graufamilie

Hierarchie:
- H1 groß, aber leicht
- H2 prominent, aber nicht schwer
- H3 kompakt und ruhig
- Body Copy lesbar und zurückhaltend
- Zahlen und KPI-Werte nur dann betonen, wenn sie funktional relevant sind

Layout:
- Weißraum ist ein zentrales Gestaltungselement
- Karten, Panels und Module mit klarer Struktur
- Abstände großzügig und konsistent
- Grid sauber und leicht lesbar
- Keine visuelle Unruhe, keine überladenen Flächen
- Inhalte immer logisch gruppieren

Rundungen:
- Oberflächen leicht bis moderat gerundet
- Chips und Pills stark gerundet
- Buttons und Cards abhängig vom Baustein konsistent einsetzen

Schatten und Linien:
- Schatten nur sehr subtil
- Border lieber hell und fein statt hart
- Keine schweren Konturen
- Trennung eher über Raum als über Linien

Komponenten:
- Buttons in Orange oder Blau nur gemäß ihrer Funktion
- Inputs weiß, ruhig und klar
- Cards hell, sauber und mit leichtem Schatten
- Badges klein, lesbar und funktional
- Tabellen luftig, geordnet und ohne harte Dominanz
- Sidebar dunkelblau mit weißer Navigation und orangefarbenem Active State

Einsatzregeln:
- Orange ist Standard für CTA und Highlight
- Blau ist für Markenzeichen, Systemkopf und sekundäre Brand-Level-Aktionen
- Keine zusätzlichen Akzentfarben
- Kein Gradient-Overkill
- Keine dekorativen Spielereien

Beispiele:
- Gute Headline: ruhig, präzise, leicht
- Gute Card: weiß, klar, strukturiert
- Gute Navigation: dunkelblau, kontrastreich, lesbar
- Gute KPI: stark, aber nicht laut

Output:
- Liefere ein einzelnes, sauberes Design-Element im talkingHEADS-Stil, zum Beispiel eine Ad, eine Landingpage, eine Webseite oder ein Layout-System.
- Je nach Auftrag darf das Ergebnis auch eine komplette Seitenstruktur oder ein visuelles Layout-System sein.
- Kein Mockup, keine Collage, keine UI-Fantasie.
- 1:1 nach dem Designpanel umsetzen.