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>
2.1 KiB
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