admin/3d.lehrstun.de

Files

Hans Puettmann 8a55e175a2 Style Guide v1.0.0: Indigo-Palette + lokale Web-Fonts

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>

2026-06-04 12:52:14 +02:00

2.9 KiB

Raw Permalink Blame History

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)

: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.

2.9 KiB Raw Permalink Blame History Unescape Escape