Design- & Layout-Referenz
| Kategorie | Empfohlene Werte / Hinweise | Beispiel |
|---|---|---|
| Schriftgrößen | H1: 32px, H2: 24px, H3: 20px, Text: 16px, Small: 12px | Überschriftkleiner Text |
| Abstände | Margin / Padding: klein 8px, mittel 16px, groß 32px | Beispielbox |
| Buttons / Alerts | Erfolg: grün, Fehler: rot, Warnung: gelb, Info: blau | |
| Flexbox / Grid | display: flex / grid; justify-content / align-items / grid-template-columns | 1 2 3 |
| Media Queries | 480px (mobil), 768px (tablet), 1024px (desktop) | Fenstergröße ändern → Schrift skaliert |
| Z-Index | Tooltips / Modals / Popups: 100–1000 | Ebene 200 |
| Einheiten | px, em, rem für Text / %, vh/vw für relative Größen | Beispieltext |
| Transition / Animation | 0.3–0.5s, ease-in/out, transform / opacity | Hover mich |
| Icons & Symbole | SVG / FontAwesome, Größe 16–32px, CSS-Farbe | ★ ★ ✓ |
| HTML Entities | & < > " → ← | <Beispiel → Text> |
Weitere Design- & Layout-Referenz
| Kategorie | Empfohlene Werte / Hinweise | Beispiel |
|---|---|---|
| Farbharmonie & Kontrast | Primär: #ffd35a, Sekundär: #66cc99, Akzent: #ff6666 | Primär
Sekundär
Akzent |
| Formelemente | Inputs, Checkbox, Select – Hintergrund #222, Textfarbe #ffd35a | |
| Typografie | line-height: 1.5, letter-spacing: 0.5px, text-shadow optional | Lesbarer Text |
| Box-Effekte | border-radius, box-shadow für Tiefe | Box mit Schatten |
| Filter & Transparenz | opacity: 0.8, filter: grayscale(80%), blur | |
| Navigation | Klare Hoverfarben, aktive Zustände sichtbar | |
| Tooltip / Popover | Kurzinfos bei Hover mit position:absolute | ?
Das ist ein Tooltip!
|
| Cards / Container | Inhaltsbox mit Rand, Schatten, Radius | Kleine Karte |
| Responsive Verhalten | @media: 480px, 768px, 1024px → Schrift und Layout anpassen | Fenstergröße ändern |
| CSS-Variablen | :root { --primary: #ffd35a; } zur zentralen Steuerung | Variable Farbe |