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*
|