# Flat 2.0

Auch bekannt als: Flat Design 2.0, Semi-Flat, Almost Flat, Flat mit Schatten, Material-lite  
Ära: 2014-2018 (Korrektur des reinen Flat Design nach 2013)  
Seite: https://designforai.dev/de/style/flat-2-0

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

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