Design Tokens Referenz
Alle CSS Custom Properties aus tokens.css — die zentrale Anlaufstelle für alle Anpassungen.
Regel: Immer semantische Aliases verwenden, nie direkt die Palette.
Farb-Palette (nur intern)
Diese Werte nie direkt in HTML/CSS verwenden — nur als Basis für semantische Aliases.
/* Graustufen */
--color-white, --color-gray-50/100/200/300/400/500/600/700/800/900, --color-black
/* Akzent (Primärfarbe) */
--color-accent-50/100/200/300/400/500/600/700/800/900
/* Standard: --color-accent-500: #6366f1 (Indigo) */
/* Status */
--color-success, --color-success-bg, --color-success-border
--color-warning, --color-warning-bg, --color-warning-border
--color-danger, --color-danger-bg, --color-danger-border
--color-info, --color-info-bg, --color-info-border
Primärfarbe anpassen: Nur --color-accent-*-Werte in tokens.css ändern → alle Komponenten folgen automatisch.
Semantische Aliases (diese verwenden)
Hintergründe
| Token |
Light |
Verwendung |
--bg |
#ffffff |
Seiten-Hintergrund |
--bg-subtle |
#f8f9fa |
Subtiler Hintergrund, Zebra-Zeilen |
--bg-muted |
#f1f3f5 |
Gedämpfter Hintergrund |
Surfaces (Karten, Overlays)
| Token |
Verwendung |
--surface |
Karten, Panels |
--surface-raised |
Erhöhte Elemente (Tooltips) |
--surface-overlay |
Modale Overlays, Dropdowns |
Rahmen
| Token |
Verwendung |
--border |
Standard-Rahmen |
--border-strong |
Betonter Rahmen |
--border-focus |
Fokus-Ring (= Akzentfarbe) |
Text
| Token |
Verwendung |
--text |
Primärtext |
--text-muted |
Sekundärtext, Metadaten |
--text-subtle |
Platzhalter, deaktivierte Elemente |
--text-on-accent |
Text auf Akzent-Hintergrund |
Akzentfarbe
| Token |
Verwendung |
--accent |
Primärfarbe (Buttons, Links, Fokus) |
--accent-hover |
Hover-State |
--accent-active |
Aktiv/Gedrückt-State |
--accent-subtle |
Sehr heller Hintergrund |
--accent-muted |
Heller Hintergrund |
Typografie
Font Families
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
Font Sizes
| Token |
Wert |
px |
--text-xs |
0.75rem |
12px |
--text-sm |
0.875rem |
14px |
--text-base |
1rem |
16px |
--text-md |
1.125rem |
18px |
--text-lg |
1.25rem |
20px |
--text-xl |
1.5rem |
24px |
--text-2xl |
1.875rem |
30px |
--text-3xl |
2.25rem |
36px |
--text-4xl |
3rem |
48px |
Font Weights
--weight-normal: 400
--weight-medium: 500
--weight-semibold: 600
--weight-bold: 700
Line Heights
--leading-tight: 1.25
--leading-snug: 1.375
--leading-normal: 1.5
--leading-relaxed: 1.625
Spacing (4px-Grid)
| Token |
Wert |
px |
--space-1 |
0.25rem |
4px |
--space-2 |
0.5rem |
8px |
--space-3 |
0.75rem |
12px |
--space-4 |
1rem |
16px |
--space-5 |
1.25rem |
20px |
--space-6 |
1.5rem |
24px |
--space-8 |
2rem |
32px |
--space-10 |
2.5rem |
40px |
--space-12 |
3rem |
48px |
--space-16 |
4rem |
64px |
--space-20 |
5rem |
80px |
--space-24 |
6rem |
96px |
Border Radius
| Token |
Wert |
px |
--radius-sm |
0.25rem |
4px |
--radius-md |
0.375rem |
6px |
--radius-lg |
0.5rem |
8px |
--radius-xl |
0.75rem |
12px |
--radius-2xl |
1rem |
16px |
--radius-full |
9999px |
Vollständig rund |
Schatten
--shadow-xs /* Minimal, z.B. kleine Karten */
--shadow-sm /* Standard-Karten */
--shadow-md /* Erhöhte Elemente */
--shadow-lg /* Dropdowns, Modals */
--shadow-xl /* Große Overlays */
--shadow-focus /* Fokus-Ring: 0 0 0 3px rgba(accent, 0.25) */
Übergänge
--duration-fast: 120ms
--duration-base: 200ms /* Standard */
--duration-slow: 300ms
--ease: cubic-bezier(0.4, 0, 0.2, 1) /* Standard */
--ease-out: cubic-bezier(0, 0, 0.2, 1)
--ease-in: cubic-bezier(0.4, 0, 1, 1)
--transition: var(--duration-base) var(--ease) /* Kombination für transition-Shorthand */
Layout-Konstanten
Container Breakpoints
| Token |
Wert |
px |
--container-sm |
40rem |
640px |
--container-md |
48rem |
768px |
--container-lg |
64rem |
1024px |
--container-xl |
80rem |
1280px (default) |
--container-2xl |
90rem |
1440px |
Strukturelle Maße
--nav-height: 3.5rem /* 56px — Höhe der Topnav */
--sidebar-width: 16rem /* 256px — Breite der Sidebar */
Z-Index Skala
| Token |
Wert |
Verwendung |
--z-base |
0 |
Normal |
--z-raised |
10 |
Leicht erhöht |
--z-dropdown |
100 |
Dropdowns |
--z-sticky |
200 |
Sticky Elemente (Topnav) |
--z-overlay |
300 |
Overlays |
--z-modal |
400 |
Modals |
--z-toast |
500 |
Toast-Benachrichtigungen |
Dark Mode
Aktivierung via data-theme-Attribut auf <html>:
<html data-theme="light"> <!-- oder "dark" -->
Nur semantische Aliases werden im Dark Mode überschrieben — die Palette bleibt unverändert. Toggle-Logik inkl. localStorage-Persistenz und prefers-color-scheme-Erkennung ist in base.html fertig implementiert.
Dark Mode Overrides (Beispiele):
[data-theme="dark"] {
--bg: var(--color-black); /* #0d0f12 */
--surface: #161920;
--text: var(--color-gray-100);
--accent: var(--color-accent-400); /* Heller für besseren Kontrast */
}
