CSS_GUIDE.md

Zweck

Dieses Dokument beschreibt die Nutzung der CSS-Design-Tokens aus tokens.css.

Ziel ist eine konsistente, wartbare und wiedererkennbare UI, unabhängig vom Framework oder Projekt.

Grundregeln

Keine Hardcodes für Farben, Schriften oder Abstände
Nutzung ausschließlich über CSS-Variablen
Tokens sind stabiler als Klassen

Regel:

Wenn ein Wert nicht aus :root kommt, gehört er dort hin.

Einbindung

<link rel="stylesheet" href="tokens.css" />

Frameworks (Beispiele):

React / Vue: global importieren
NiceGUI / Gradio: über Custom CSS

Farben verwenden

.header {
  background: var(--color-primary);
  color: var(--color-surface);
}

.link {
  color: var(--color-accent);
}

.error {
  color: var(--color-error);
}

Regeln:

Akzentfarbe nur für Interaktion
Error-Farbe ausschließlich für Fehler

Typografie

h1, h2, h3 {
  font-weight: 600;
}

p {
  font-size: var(--font-size-md);
}

code {
  font-family: var(--font-mono);
}

Keine zusätzliche Schriftdefinition pro Komponente.

Spacing

.card {
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

Regel:

Abstände folgen dem 8-px-Grid
keine krummen Werte

Border & Radius

.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

Rahmen sind funktional, nicht dekorativ.

Shadows

.dropdown {
  box-shadow: var(--shadow-sm);
}

Schatten sparsam einsetzen.

Erweiterungen

Dark Mode: eigenes Token-Set ([data-theme="dark"])
Projekt-spezifische Tokens dürfen ergänzt, aber nicht ersetzt werden

Anti-Patterns

Inline-Styles mit festen Farben
Kopierte Farbwerte aus Design-Tools
Magic Numbers

Wenn ein UI inkonsistent wirkt, liegt es fast immer an Regelbruch hier.

Status

Version: v1.0 (Baseline)

Dieses Dokument ergänzt DESIGN.md und ist verbindlich für Web-UIs.

1.9 KiB Raw Blame History