# Style Guide: 3d.lehrstun.de

> Version 1.0.0 | Revision 1 | 2026-06-04T09:57:23.143Z

## Projektinfo
- **Typ:** website
- **Zielgruppe:** Schülerinnen und Schüler
- **Sprache:** de-DE

## Designprinzipien

### Tonalität
- jugendlich
- technisch
- freundlich
- modern

### Anti-Tonalität
- altmodisch
- beliebig

### Do's
✓ Verwende abgerundete Ecken (border-radius: sm) für Karten und Buttons, um eine einladende, moderne Wirkung zu erzeugen
✓ Setze subtile Schatten ein, um Tiefe und Hierarchie zu schaffen, ohne die helle Cloud-Dancer-Palette zu überladen
✓ Nutze großzügige, komfortable Abstände zwischen Elementen, damit Inhalte für Schüler leicht scanbar und lesbar bleiben
✓ Kombiniere technische Akzentfarben (z. B. leuchtendes Cyan oder Electric Blue) mit der hellen Basispalette, um 3D-Themen jugendlich und modern zu inszenieren

### Don'ts
✗ Verwende keine harten, eckigen Container oder scharfe Drop-Shadows – das wirkt altmodisch und bricht die freundliche Formensprache
✗ Nutze keine generischen Stock-Illustrationen oder Clip-Art – das wirkt beliebig und verfehlt die technisch-moderne Markenpersönlichkeit
✗ Überhäufe Seiten nicht mit zu vielen Schriftgrößen oder Farben auf einmal – das erzeugt visuelle Unruhe und widerspricht der comfortable Dichte

## Farbpalette
| Token | Wert |
|-------|------|
| Primary | `#5B6EAE` |
| Primary Hover | `#4A5B96` |
| Secondary | `#2C3E50` |
| Accent | `#9B8EC4` |
| Surface | `#F0EEE9` |
| Surface Muted | `#E8E5DF` |
| Border | `#D5D1CC` |
| Text | `#2C3E50` |
| Text Muted | `#6B7C8D` |
| Error | `#C0392B` |
| Success | `#27AE60` |
| Warning | `#E67E22` |

## Typografie
- **Überschriften:** Raleway
- **Fließtext:** Lato
- **Monospace:** Inconsolata

## Formensprache
- **Radius:** 2px / 4px / 8px
- **Schatten:** 0 1px 2px rgba(0,0,0,0.05) / 0 2px 8px rgba(0,0,0,0.08)
- **Spacing:** 4px / 8px / 16px / 24px / 40px

## Komponenten

### Button
- Radius: 4px
- Padding: 8px 16px

### Card
- Radius: 8px
- Border: 1px solid #D5D1CC

### Input
- Radius: 2px
- Border: 1px solid #D5D1CC

## Assets
- Icon-Stil: outline
- Strichstärke: 1.75

---
*Generiert am 2026-06-04T09:57:23.143Z*