Zum Inhalt springen
ad hoc AI Workbench

Komponenten-Baukasten

Status: Entwurf

Workbench-spezifische Komponenten. Generische Bausteine (Button, Input, Select) kommen aus dem ad-hoc-Design-System.

  • Dunkler Navy-Hintergrund, helle Schrift (color: rgba(255,255,255,0.85)).
  • Aktiver Link: linker 3-px-Marker in Brand-Orange + heller Hintergrund.
  • Gruppen-Label oben in Caps („Workspace”, „Konfiguration”), 10–11 px.
  • Footer mit Avatar + Rolle des aktuellen Users.

Topbar (Crumbs + Aktionen)

  • Höhe 56 px, sticky.
  • Links: Breadcrumbs, kleinste Stufe in Foreground-1.
  • Rechts: Search-Pill (⌘K), Hilfe-Button, optional Notifications.
  • Backdrop-Blur erlaubt, dezent.

KPI-Card

  • Weißer Hintergrund, 1-px-Border, Radius 8 px.
  • Modifier --accent | --success | --warn | --info aktiviert einen Corner-Notch oben-links 14×14 px in der Status-Farbe (siehe 03-card-highlights.md).
  • Inhalt: Eyebrow-Label oben (10 px Caps), großer Display-Wert (Manrope 700, 24 px, tabular-nums), kleiner Sub-Hinweis darunter.

Tochter-Card

  • Wie KPI-Card, aber pro Tochter.
  • Default-Variante: Corner-Notch oben-links in Tochter-Brand-Farbe (V11 — siehe Card-Highlight-Varianten).
  • Inhalt: Abbreviation („AHBW”) als Display-22-px-Text, Tochter-Name als Sub-Label, Wert in Display-22 px, Hint-Zeile.

Tabellen

  • 13 px Schrift, 11.5 px Header in Caps.
  • Geld- und Mengen-Spalten rechtsbündig, tabular-nums.
  • Hover: ganze Zeile bekommt --bg-3-Hintergrund, Cursor pointer wenn Zeile klickbar.
  • tfoot mit fettem Wert + leichtem Background.

Tag / Chip

  • Klein (11 px), Pill-Radius, dezenter Border.
  • Varianten: tag--orange | tag--green | tag--blue | tag--gray.
  • Tochter-Variante mit kleinem 8×8-Square-Prefix in Brand-Farbe (tag--co.co-*).

Wizard-Steps (Case-Editor)

  • Linke Spalte 220 px, Steps untereinander.
  • Aktiver Step: Brand-Soft-Hintergrund, Display-Schrift 600.
  • Erledigte Steps: kleine Häkchen-Bubble in --color-success.
  • Buttons unten (Zurück / Weiter) sind primary/ghost.

Drag-&-Drop (Bedarfspositionen)

  • Drag-Items als kleine draggable Tiles mit „⋮⋮“-Handle und Icon-Glyph.
  • Dropzone: gestrichelter Border, bei dragover brand-soft Hintergrund + orange Border.
  • Drag-Over verstärkt nur die Dropzone, nicht das ganze Layout.

Notes / Hinweise

  • Tinted-Background-Boxen (note, note--info, note--ai).
  • Markierung als Corner-Notch oben-links, kein Border-Stripe links.
  • AI-Hinweise mit --color-ai (gedämpftes Lila), Info mit Blue-Soft, Default mit Orange-Soft.

Range-Field (Annahmen-Slider)

  • Label oben (Caps 10 px), darunter Slider + Wert in Mono rechts.
  • Wert-Anzeige fix-Width (z. B. 80 px), tabular-nums.

Chip-Group (Szenario-Tabs)

  • Dunkler Pill-Container mit 3-px-Padding, Buttons als segmentierte Tabs.
  • Aktive Variante mit weißem Hintergrund + Shadow-1.

Verwandte Dokumente