Design for AIStil Flat 2.0: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für flat 2.0. Auch bekannt als Flat Design 2.0, Semi-Flat, Almost Flat, Flat mit Schatten, Material-lite. 2014-2018 (Korrektur des reinen Flat Design nach 2013).
Merkmale
- flache Farben und einfache Formen, aber mit leichten Schatten, die zeigen, was klickbar ist
- dezente Verläufe (zwei nahe Töne) statt rein flacher Füllungen
- 4-8px Radius, weiche 2-8px Schatten auf Karten und Buttons
- helle, gesättigte, aber harmonische Paletten (Blau, Petrol, Orange, Rot)
- einfache Linien- oder gefüllte Icons, flache Vektorillustrationen
- klare Affordanzen: erhabene Buttons, angehobene Karten, umrandete Eingabefelder
- sanfte Motion: 200ms ease bei Hover, Ripple oder Fade beim Klick
Palette
#ffffff Seite, #f5f7fa Fläche, #2d3748 Text, #718096 gedämpft, #3182ce Primär, #38b2ac Sekundär, #ed8936 warmer Akzent
Schrift
Roboto, Open Sans, Lato oder Source Sans 3; Überschriften 600-700 bei 28-48px, Fließtext 400 bei 16px, Buttons 500 bei 14-16px
Do
- gib interaktiven Elementen einen 2px Schatten in Ruhe und 6px bei Hover, damit die Affordanz offensichtlich ist
- nutze eine gesättigte Primärfarbe für Aktionen und eine Sekundärfarbe nur für Hervorhebungen
- halte Icons in einem Set mit einer Strichstärke
Don't
- werde nicht komplett flach; der Unterschied zum Flat von 2013 ist der Schatten
- nutze keine langen Schatten oder 45-Grad-Diagonal-"Flat-Shadow"-Gimmicks
- nutze nicht mehr als drei Farben plus Grautöne
Bekannt dafür: Google-Produkte der Material-1-Ära, Dropbox 2015, Slack 2016, Mailchimp 2016
CSS-Seed
:root {
--bg: #ffffff;
--surface: #f5f7fa;
--fg: #2d3748;
--muted: #718096;
--accent: #3182ce;
--accent2: #38b2ac;
--radius: 6px;
--shadow: 0 2px 4px rgba(45,55,72,0.12);
--font: 'Open Sans',sans-serif
}
Prompt
Baue die Seite im Flat-2.0-Stil. Hintergrund #ffffff, Abschnittsflächen #f5f7fa, Text #2d3748, gedämpft #718096, Primär #3182ce, Sekundär #38b2ac, ein warmer Akzent #ed8936. Schrift Open Sans: Überschriften 700 bei 44/30/22px, Fließtext 400 bei 16px line-height 1.6, Buttons 600 bei 15px. Karten: weiß, border-radius 6px, box-shadow 0 2px 4px rgba(45,55,72,0.12), Hover 0 6px 16px rgba(45,55,72,0.16) mit translateY(-2px), 200ms ease. Primärbutton: #3182ce Hintergrund mit einem Verlauf nach #2b6cb0 am unteren Rand, weißer Text, Radius 6px, Schatten 0 2px 4px rgba(49,130,206,0.35); der aktive Zustand entfernt den Schatten. Eingabefelder: 1px #cbd5e0 Rand, Radius 6px, Fokusring 2px #3182ce. Icons: 24px Linien-Icons mit 2px Strich in #3182ce. Einfache flache Vektorillustration im Hero aus den drei Farben. Abstände auf 8px-Skala, 64-96px Abschnittspadding. Kein Glas, keine schweren Verläufe, kein Dark Mode.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Flat-2.0-Stil. Hintergrund #ffffff, Abschnittsflächen #f5f7fa, Text #2d3748, gedämpft #718096, Primär #3182ce, Sekundär #38b2ac, ein warmer Akzent #ed8936. Schrift Open Sans: Überschriften 700 bei 44/30/22px, Fließtext 400 bei 16px line-height 1.6, Buttons 600 bei 15px. Karten: weiß, border-radius 6px, box-shadow 0 2px 4px rgba(45,55,72,0.12), Hover 0 6px 16px rgba(45,55,72,0.16) mit translateY(-2px), 200ms ease. Primärbutton: #3182ce Hintergrund mit einem Verlauf nach #2b6cb0 am unteren Rand, weißer Text, Radius 6px, Schatten 0 2px 4px rgba(49,130,206,0.35); der aktive Zustand entfernt den Schatten. Eingabefelder: 1px #cbd5e0 Rand, Radius 6px, Fokusring 2px #3182ce. Icons: 24px Linien-Icons mit 2px Strich in #3182ce. Einfache flache Vektorillustration im Hero aus den drei Farben. Abstände auf 8px-Skala, 64-96px Abschnittspadding. Kein Glas, keine schweren Verläufe, kein Dark Mode.
## Tokens
:root { --bg:#ffffff; --surface:#f5f7fa; --fg:#2d3748; --muted:#718096; --accent:#3182ce; --accent2:#38b2ac; --radius:6px; --shadow:0 2px 4px rgba(45,55,72,0.12); --font:'Open Sans',sans-serif }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.