Grundlagen

Zentrale Tokens in src/styles.css – alle Komponenten beziehen ihre Werte von hier.

Farben

Semantische Variablen inkl. shadcn primary, ring, sidebar

Arbeitsfläche

--background
#FFFFFF

Haupttext

--foreground
#100B2D

Sekundärtext

--muted-foreground
#5E5E74

Hauptaktion Navy

--product (Button default)
#1E3A8A

Hauptaktion Hover

--product-hover
#172554

Akzent / Fokus / Links

--primary / --ring
#2563EB

Primär Hover

--primary-hover
#1D4ED8

Auswahlfläche

--selection / --accent
#EFF6FF

Sidebar

--sidebar
#FBF9F9

Suche / Hover warm

--search-surface
#F3EDED

Kennzahl-Inset

--inset-surface
#F6F4F3

Tabellenkopf / Feldfokus

--muted
#F7F7F7

Neutraler Hover

--hover-surface
rgba(6,3,20,.06)

Karte

--card
#FFFFFF

Kartenrahmen

--card-border
rgba(6,3,20,.17)

Input-Fläche

--input-background
#FDFDFD

Kontrollkontur

--input
rgba(6,3,20,.50) (sevdesk .20, für ≥3:1 angepasst)

Kontrollkontur Hover

--input-hover
rgba(6,3,20,.71)

Diagrammlinie

--chart-line
#1E40AF

Destruktiv

--destructive
Rot

Statusfarben

Immer mit Icon und Text

Bezahlt

Fällig

Überfällig

In Prüfung

Entwurf

Diagrammfarben

--chart-1 … --chart-5 für Flächen; --chart-line (#1E40AF, gestrichelt) für Datenlinien

chart-1

chart-2

chart-3

chart-4

chart-5

Textrollen

Cabinet Grotesk für Display-Rollen (Begrüßung, Seiten-/Kartentitel, KPI), Inter für UI-Text

Begrüßung.text-greeting · 30/40 · 400

Seitentitel.text-page-title · 24/32 · 500

Kartenkopf.text-card-title · 20/28 · 500

UI-Text.text-ui · 14/22 · 400

Nebeninfo.text-meta · 13/20 · 400

Kleiner Text.text-small · 12/16 · 400

1.284.500 €.text-kpi · 32/40 · 600

1.284.500 €.text-kpi-compact · 24/32 · 600

Form & Tiefe

Karte: Radius 12 px, Rahmen 1 px, Schatten 0 1px 6px rgba(6,3,20,.10), Innenabstand 20/24/24 px

Button/Input: Höhe 40 px, Radius 8 px, Button-Padding 8×12 px

Input: 14/22 px, Padding 6/8/6/12 px · Filter 36 px Desktop / 44 px mobil

Fokus & Zustände

Felder (control-field): Hover Kontur .71 · Fokus 1 px Blau + EIN 2-px-Akzent Blau 16 %, Fläche #F7F7F7 · kein weißer Spalt.

Priorität: Disabled > Invalid > Fokus > Hover > Default. Fehler bleibt beim Fokus rot (roter 2-px-Akzent). Readonly durchgezogen neutral auf Grau, fokussierbar.

Buttons/Links/kleine Kontrollen: nur Tastaturfokus, 2-px-Outline Blau mit 2 px Abstand; Button-Schatten unverändert.

DefaultFokusFehler + Fokus

Raster

Dashboard (page-container): fluide volle Hauptfläche ohne Maximalbreite, Rand 40/80 px (schmal 32, ≤900 px 24/20); dashboard-grid zwei fluide Spalten ab 720 px Containerbreite, Gap 24 px.

Listen, Akten, Bibliothek (list-container): 32 px Rand, mobil 20 px, Titel 24/32 bei y32.

Sidebar 243 px inkl. Trennlinie; Desktop ohne obere Leiste, mobil 56-px-Leiste mit 44-px-Treffern.