Design-Tokens

Status: Entwurf · Quelle: design-system/colors_and_type.css (extern)

Die Workbench übernimmt die ad-hoc-Tokens aus dem zentralen Design-System (außerhalb des Repos) und ergänzt nur, was Workbench-spezifisch ist.

Farben — Marke

Token	Wert	Verwendung
`--color-orange`	`#E8441C`	primärer Akzent, Call-to-Action, Marken-Notch
`--color-orange-hover`	`#C9371A`	Hover-State Primärfarbe
`--color-orange-soft`	`#FFF7F3`	dezente Marken-Tint (z. B. Card-Backgrounds bei Highlights)
`--color-navy`	`#0B1B2B`	Sidebar, Sekundär-Buttons
`--color-blue`	`#1F4E79`	Links, Info-Akzente

Farben — Status

Token	Wert	Verwendung
`--color-success`	`#0F8A5A`	positive Cashflow-Indikatoren, Approval
`--color-warning`	`#E08308`	knappe Schwellen, ggf. Risiko-Score gelb
`--color-error`	`#D32A14`	negative Cashflows, Reject
`--color-info`	`#1763B0`	informative Hinweise

Farben — Tochtergesellschaften

Pro Tochter ein Brand-Akzent — klein eingesetzt (Square, Dot, Notch), nicht großflächig.

Tochter	Token	Wert
ad hoc bau.werk	`--co-bauwerk`	`#FF6720`
ad hoc best services	`--co-bestservices`	`#FF008C`
ad hoc immobilien	`--co-immobilien`	`#E1E000`
ad hoc planwerk	`--co-planwerk`	`#E04F39`
ad hoc Versicherungsdienst	`--co-versicherung`	`#00C65E`
ad hoc communication	`--co-communication`	`#753BBD`

Typografie

Token	Schrift	Verwendung
`--font-display`	Manrope (500–800)	Überschriften, KPIs, Brand-Marken
`--font-body`	Inter Tight (400–700)	Fließtext, UI-Labels, Tabellen
`--font-mono`	JetBrains Mono (400–700)	Codes, IDs, Cashflow-Beträge mit `tabular-nums`

Skala: 0.6875rem (eyebrow) → 0.875rem (UI dense) → 1rem (body) → 1.5rem (h4) → 2rem (h3) → 2.5rem (h2). Buchstabenabstand bei Headlines tracking-tight: -0.02em.

Radien

Die ad-hoc-Asymmetrie ist Pflicht-Detail bei Buttons:

Token	Wert	Element
`--btn-radius-md`	`6px 6px 0 6px`	Standard-Button (mid)
`--btn-radius-sm`	`4px 4px 0 4px`	kompakter Button (z. B. Tabellen-Action)
`--btn-radius-lg`	`8px 8px 0 8px`	primäre CTAs
`--r-md`	`8px`	Card-Radius (alle vier Ecken gleich)

Schatten + Motion

Token	Wert	Einsatz
`--shadow-1`	`0 1px 2px rgba(11,27,43,0.06)`	Karten Ruhezustand
`--shadow-2`	`0 6px 20px -8px rgba(11,27,43,0.12)`	Karten Hover, Sticky-Bars
`--dur-fast`	`150ms`	UI-Hovers, Toggles
`--dur-med`	`320ms`	Sheet-In/Out, Sidebar-Switch

Bewegung ist sparsam und immer mit cubic-bezier(0.2, 0.7, 0.2, 1) (--ease-out) — keine Bouncing-Effekte.

Spacing

8 px Basis: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. KPI-Cards 14 px Innenabstand vertikal, 16 px horizontal. Listen-Cards 18 px allseitig.