Zum Inhalt springen
Doku

Farben & Typografie

Die kanonische Quelle aller Werte ist apps/web/app/globals.css. Dort liegen Farben, Theme-Flächen und die Typo-Skala als CSS-Variablen vor und werden von Komponenten und dem Section-Color-System geerbt.

Farben

Abschnitt betitelt „Farben“

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.

Brand

Abschnitt betitelt „Brand“
Primärrot --color-primary #CD141E
Blau --brand-blue #007BC4
Amber --brand-amber #FFB20F
Grün --brand-green #018E42
Lila --brand-purple #5C2751
Grau --brand-slate #B5B6BB

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“
Hintergrund --background .985 0 0
Primärtext --foreground .16 0 0
Karten --card 1 0 0
Gedämpft --muted .965 0 0
Rahmen --border .906 0 0

Status

Abschnitt betitelt „Status“
Aktiv Angenommen
badge-green aktiv · bestätigt · erfolgreich var(--brand-green)
Entwurf Ausstehend
badge-amber entwurf · prüfbedürftig · System-Events var(--brand-amber)
Abgelehnt Archiviert
badge-slate archiviert · abgelehnt · neutral var(--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
Eingabe (fokussiert)
Speichern Primär / Stammdaten
.section-blue
Eingabe (fokussiert)
Speichern Dokumente, Veranstaltungsdetails
.section-amber
Eingabe (fokussiert)
Speichern Veröffentlichen, Speichern
.section-green
Eingabe (fokussiert)
Speichern Termine, Kalender
.section-purple
Eingabe (fokussiert)
Speichern Titelbild, Aufzeichnungen

Jede 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, textarea und select
  • 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“
Primary · Sans Instrument Sans
Überschrift
Dies ist ein neutraler Beispieltext.
Standard-Schrift für das gesamte User Interface (Fließtext, Labels und Überschriften).
Mono Geist Mono
Authorization: Bearer mv_tok_8f9e2b...
Code-Snippets, System-Tokens und technische Log-Werte.
Brand · Akzent Manrope
Mittelstand
Vernetzt
Schriftart für „Vernetzt“ im Logo. Wird statisch im Bild verwendet und nicht als Webschrift geladen.

Typo-Skala

Abschnitt betitelt „Typo-Skala“
Login Welcome · Display · text-[2rem] 32 / 40 · 700
Willkommen zurück
Page Title · H1 · text-3xl 30 / 36 · 800
Alle Veranstaltungen
Card Title · H2 · text-lg 18 / 28 · 700
Veranstaltungsdetails
Section Title · H3 · text-base 16 / 24 · 600
Teilnehmende verwalten
Standard Text · Body · text-sm 14 / 20 · 400
Eine Entdeckungsreise durch Künstliche Intelligenz für Unternehmer:innen und Führungskräfte.
Metadata / Counts · Meta · text-sm 14 / 20 · 500
5 Dokumente · 2 Aufzeichnungen
Form Label · Label · text-sm 14 / 14 · 500
Anzeigename
Caption / Hint · Caption · text-xs 12 / 16 · 400
Dieser Name wird anderen Teilnehmenden angezeigt.

Ikonografie

Abschnitt betitelt „Ikonografie“
Calendar
Mail
Users
FileText
MapPin
Clock
Check
Upload
Download
Pencil
Trash2
ArrowRight

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 currentColor die 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“