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>
79 lines
2.1 KiB
Markdown
79 lines
2.1 KiB
Markdown
# 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*
|