Hans Puettmann
8a55e175a2
Komplette visuelle Umstellung nach dem generierten Style-Guide
(3d-lehrstun-de-v1.0.0). 3D-Druck-AG bekommt eine eigene Marke,
getrennt vom Teal der arduino.lehrstun.de-Schwester.
Farben: Teal #00979D -> Indigo #5B6EAE, warmes Off-White Surface
#F0EEE9 statt Kuehlweiss, Lavendel-Akzent #9B8EC4.
Fonts: Raleway (Headings), Lato (Body), Inconsolata (Mono) — lokal
gehostet in static/fonts/ (DSGVO-konform, kein Google-CDN),
via @font-face + unicode-range (latin + latin-ext).
Form: Radius/Schatten/Spacing als Tokens (--radius-*, --shadow-*).
Technik:
- base.html :root: neue --color-*/--font-*/--radius-* Tokens,
alte Variablennamen (--primary etc.) als Aliase -> alle 33
Templates ziehen sofort mit, kein Template-Rewrite noetig.
- Semantische Banner-Tokens (--info/warn/success/error-bg+text+border)
loesen ~130 Hardcoded-Pastelle ab (per sed gemappt).
- Komponenten (Card, Button, Badge, Flash, Table, Code) auf Tokens.
Alle 13 Hauptseiten gegengeprueft (HTTP 200, keine Render-Fehler).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
|