71 lines
2.9 KiB
Markdown
71 lines
2.9 KiB
Markdown
|
# Style Guide: 3d.lehrstun.de
|
|||
|
|
|
|||
|
|
Du arbeitest an einem Projekt mit folgendem Style Guide. **Verwende ausschließlich die unten definierten Design Tokens** für alle neuen oder geänderten Komponenten. Keine eigenen Farben, Schriften oder Abstände einführen.
|
|||
|
|
|
|||
|
|
## Projektkontext
|
|||
|
|
- **Projekt:** 3d.lehrstun.de
|
|||
|
|
- **Typ:** website
|
|||
|
|
- **Zielgruppe:** Schülerinnen und Schüler
|
|||
|
|
- **Sprache:** de-DE
|
|||
|
|
|
|||
|
|
## Tonalität
|
|||
|
|
- **Soll wirken:** jugendlich, technisch, freundlich, modern
|
|||
|
|
- **Soll NICHT wirken:** 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
|
|||
|
|
|
|||
|
|
## Design Tokens (CSS Custom Properties)
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
:root {
|
|||
|
|
--color-primary: #5B6EAE;
|
|||
|
|
--color-primary-hover: #4A5B96;
|
|||
|
|
--color-secondary: #2C3E50;
|
|||
|
|
--color-accent: #9B8EC4;
|
|||
|
|
--color-surface: #F0EEE9;
|
|||
|
|
--color-surface-muted: #E8E5DF;
|
|||
|
|
--color-border: #D5D1CC;
|
|||
|
|
--color-text: #2C3E50;
|
|||
|
|
--color-text-muted: #6B7C8D;
|
|||
|
|
--color-error: #C0392B;
|
|||
|
|
--color-success: #27AE60;
|
|||
|
|
--color-warning: #E67E22;
|
|||
|
|
|
|||
|
|
--font-heading: 'Raleway', system-ui, sans-serif;
|
|||
|
|
--font-body: 'Lato', Georgia, serif;
|
|||
|
|
--font-mono: 'Inconsolata', 'Courier New', monospace;
|
|||
|
|
|
|||
|
|
--radius-sm: 2px;
|
|||
|
|
--radius-md: 4px;
|
|||
|
|
--radius-lg: 8px;
|
|||
|
|
|
|||
|
|
--spacing-xs: 4px;
|
|||
|
|
--spacing-sm: 8px;
|
|||
|
|
--spacing-md: 16px;
|
|||
|
|
--spacing-lg: 24px;
|
|||
|
|
--spacing-xl: 40px;
|
|||
|
|
|
|||
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
|||
|
|
--shadow-md: 0 2px 8px rgba(0,0,0,0.08);
|
|||
|
|
--shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Komponentenregeln
|
|||
|
|
- **Buttons:** Radius `4px`, Padding `8px 16px`, Schatten `0 1px 2px rgba(0,0,0,0.05)`
|
|||
|
|
- **Cards:** Radius `8px`, Border via `--color-border`, Schatten `0 2px 8px rgba(0,0,0,0.08)`
|
|||
|
|
- **Inputs:** Radius `2px`, Border via `--color-border`
|
|||
|
|
- **Icons:** Stil `outline`, Strichstärke `1.75px`, Line-Cap `round`
|
|||
|
|
|
|||
|
|
## Regel für neuen Code
|
|||
|
|
Wenn du eine Komponente oder ein Stylesheet änderst: nutze `var(--color-…)`, `var(--font-…)`, `var(--spacing-…)` etc. Greife nie zu Hardcoded-Werten. Wenn dir ein Token fehlt, frage nach, bevor du eines erfindest.
|