Farben & Typografie
Die kanonische Quelle aller Werte ist apps/web/app/globals.css. Dort liegen
Farben, helle Oberflächen und die Typo-Skala als CSS-Variablen vor und werden
von Komponenten und dem Section-Color-System geerbt. Die Web-App verwendet
bewusst ausschließlich dieses helle Farbschema; die Systemeinstellung des
Browsers verändert die Darstellung nicht.
Zentrale Farben sind als CSS-Variablen in globals.css definiert. Pro Abschnitt
wird über eine section-*-Klasse ein --section-color gesetzt, interaktive
Kinder erben die Farbe automatisch.
Vorrang hat überall das Primärrot, die übrigen Töne kommen nur zur Differenzierung einzelner Bereiche hinzu. Sie sind vom Primärrot abgeleitet und teilen dessen Charakter, sodass die Palette geschlossen wirkt. Die Töne lassen sich einzelnen inhaltlichen Bereichen zuordnen, damit Farbe Orientierung gibt statt Dekoration zu sein. Insgesamt sind die Töne kräftig und gesättigt, ohne grell zu wirken, und ergeben eine ruhige, sachliche Palette. Obwohl Tailwind CSS die technische Basis der Anwendung ist, kommen keine Tailwind-Farben zum Einsatz, sondern ausschließlich die hier definierten Brand-Farben.
Oberflächen & Text
Abschnitt betitelt „Oberflächen & Text“--background.985 0 0--foreground.16 0 0--card1 0 0--muted.965 0 0--border.906 0 0badge-greenaktiv · bestätigt · erfolgreichvar(--brand-green)badge-amberentwurf · prüfbedürftig · System-Eventsvar(--brand-amber)badge-slatearchiviert · abgelehnt · neutralvar(--brand-slate)Drei feste Status-Farben decken alle Zustände ab. Um das Designsystem konsistent und die Farbpalette minimal zu halten, erben die Status-Badges direkt die entsprechenden Töne der Brand-Palette.
Die Badges sind immer Pillenform mit weißer Schrift, unabhängig von der Fläche dahinter. Sie kommen bei Veranstaltungs-, Entwurfs- und Teilnahmestatus zum Einsatz, Brand-Amber zusätzlich für System- und Audit-Hinweise. Markup und Varianten stehen unter Komponenten.
Abschnitte
Abschnitt betitelt „Abschnitte“.section-red.section-blue.section-amber.section-green.section-purpleJede Form-Card trägt eine Abschnittsklasse (section-red, section-blue,
section-amber, section-purple, section-green), die --section-color setzt.
Inputs, Selects, Submit-Buttons und aktive Option-Buttons innerhalb der Card
erben diese Farbe automatisch, ohne manuelles Setzen pro Element. Das Verhalten
im Detail steht unter Komponenten und
Patterns.
--section-color steuert dabei automatisch innerhalb der Card die Farben:
- Focus-Ring aller
input,textareaundselect - Submit-Button (
section-submit) - Hintergrund aktiver Option- und Radio-Pills
- Hintergrund der Aktions-Pills in den Dokument- und Aufzeichnungs-Toolbars
Typografie
Abschnitt betitelt „Typografie“Schriftfamilien
Abschnitt betitelt „Schriftfamilien“Vernetzt
Typo-Skala
Abschnitt betitelt „Typo-Skala“Ikonografie
Abschnitt betitelt „Ikonografie“Sämtliche Icons stammen aus Lucide (lucide-react),
einem einheitlichen Open-Source-Set mit klarer, geometrischer Linienführung. Ein
einziges Set hält die Bildsprache konsistent und vermeidet Stilbrüche zwischen
einzelnen Symbolen.
- Strichstärke:
strokeWidth={2.5}als Hausstandard, etwas kräftiger als die Lucide-Vorgabe und damit besser passend zum soliden Auftreten. - Größen: 16 und 20px inline neben Text, 24px für eigenständige Aktionen, größere Stufen in den Tropfen-Kacheln.
- Farbe: Inline-Icons erben über
currentColordie Textfarbe. In einer Tropfen-Kachel sitzt das Icon weiß auf der jeweiligen Brand-Farbe. - Einsatz: Funktional als Bedeutungsträger an Aktionen, Status und Navigation, nicht als Dekoration.
Siehe auch
Abschnitt betitelt „Siehe auch“- Design-Tokens: Radius, Abstände, Tropfen, Bewegung
- Komponenten: Badges, Buttons, Selects
- Markenhaltung: Wirkung, Sprache & Ton