Design Workbench v2.0

Crosslease Design Workbench

Diese Workbench ist der Single Source of Truth für unser gesamtes Design System. Hier werden Tokens definiert, Komponenten prototypisiert und Designentscheidungen getroffen — bevor sie in Produkte fließen. Jede Anwendung, die wir bauen, referenziert dieses System. Änderungen beginnen hier.

Der exportierbare Design Prompt enthält alle Spezifikationen, um das Design mit 99% Wiedergabetreue in jedem Projekt zu reproduzieren — unabhängig davon, ob Claude, ChatGPT, Cursor oder ein anderes Tool zum Einsatz kommt.

Token System

Farben, Typografie, Spacing, Shadows — alle Werte als CSS Custom Properties.

Prototyping

Jede Komponente live testen, vergleichen und in allen States sehen.

Design Evolution

Ideen und Kritik direkt an jeder Sektion hinterlassen und als Prompt exportieren.

Export

Design Prompt, CSS Tokens und Component-Styles per Klick kopieren.

Design Tokens

The complete token system. Click any value to copy.

Background Colors

bg-base
#020617
bg-surface
#0f172a
bg-elevated
#1e293b
bg-overlay
#334155

Border Colors

border-subtle
#1e293b
border-default
#334155
border-strong
#475569

Text Colors

--text-primary The quick brown fox — #f1f5f9
--text-secondary The quick brown fox — #94a3b8
--text-muted The quick brown fox — #64748b
--text-disabled The quick brown fox — #475569

Accent Colors

accent
#6366f1
accent-light
#818cf8
accent-muted
rgba(99,102,241,.12)
accent-border
rgba(99,102,241,.3)

Semantic Colors

urgent
#ef4444
high
#f97316
medium
#eab308
low
#475569
success
#10b981
warn
#f59e0b
info
#3b82f6

Semantic Muted

urgent-muted
rgba(239,68,68,.12)
high-muted
rgba(249,115,22,.12)
medium-muted
rgba(234,179,8,.12)
low-muted
rgba(71,85,105,.12)
success-muted
rgba(16,185,129,.12)
warn-muted
rgba(245,158,11,.12)
info-muted
rgba(59,130,246,.12)

Shadow Scale

shadow-sm
0 1px 3px rgba(0,0,0,.4)
shadow-md
0 4px 20px rgba(0,0,0,.35)
shadow-lg
0 20px 60px rgba(0,0,0,.5)

Radius Scale

radius-sm
6px
radius-md
8px
radius-lg
12px
radius-xl
16px
radius-pill
999px

Z-Index Scale

Stacked from bottom (dropdown) to top (toast)
z-dropdown
100
z-sticky
200
z-modal-backdrop
300
z-modal
400
z-popover
500
z-tooltip
600
z-toast
700

Spacing Scale

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-10
40px
space-12
48px
space-16
64px

Typography

The complete type scale. Every size has a defined purpose.

Display
32px · 800
Display Heading
H1
24px · 700
Page Heading
H2
20px · 700
Section Title
H3
16px · 600
Subsection
Body Large
15px · 400 · 1.7
Body large is used for prominent content paragraphs and introductions.
Body
14px · 400 · 1.6
Body text is the default reading size for all content.
Body Small
13px · 400
Small body for secondary content, descriptions, and UI labels.
Caption
12px · 500
Captions, metadata, timestamps, and helper text.
Overline
11px · 600 · uppercase
SECTION GROUP LABEL
Mono
12px · 400 · mono
const token = '--bg-base';

Font Stacks

Sans
'Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', sans-serif
Mono
'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace

Spacing System

Consistent spacing scale used across all components.

Usage Guide

Token
Visual
Value / Usage
space-1
4px — Tight gaps (icon to text)
space-2
8px — Related elements (badge row)
space-3
12px — Default component padding
space-4
16px — Card padding, nav padding
space-5
20px — Section internal spacing
space-6
24px — Between subsections
space-8
32px — Between sections
space-10
40px — Page padding
space-12
48px — Large section gaps
space-16
64px — Major layout divisions

Buttons

Five variants, three sizes. One primary per view.

Variants

Sizes

With Icons

Disabled States

Rule: ONE primary button per view maximum. If multiple actions compete, demote lesser ones to Secondary or Ghost.

Inputs & Form Elements

All form controls with every state.

Text Inputs

Default
Focused
Disabled

Textarea

Select

Default
Error
Pflichtfeld
Success
Disabled

Checkbox & Radio

Checkbox
Radio

Toggle Switch

Badges & Filter Chips

Semantic badges and interactive filter chips.

Badges

MIT Urgent High Medium Success Info Warn

Filter Chips

Cards & List Items

Four priority levels plus done state. Max one metadata row.

Kritischer Bug in Produktion
Heute fällig · Backend MIT
API-Dokumentation aktualisieren
Morgen · DevOps
Dashboard Performance optimieren
Diese Woche · Frontend
README aufräumen
Keine Deadline · Docs
Unit Tests für Auth-Module
Erledigt · Backend Done

Rule: Maximum ONE metadata row per card.

Tables

Data tables with sorting, density options, and responsive patterns.

Standard Table

Name ↕ Status ↕ Priorität ↕ Datum ↕ Aktion
API Refactoring Aktiv Urgent 19.03.2026
Dashboard Redesign In Review High 21.03.2026
Auth Migration Blockiert Urgent 18.03.2026
Docs Update Offen Medium 25.03.2026
Unit Tests Erledigt Low 15.03.2026

Compact

Name Status Priorität
API Refactoring Aktiv Urgent
Dashboard Redesign In Review High
Auth Migration Blockiert Urgent

Tables use the same token system. Alternating rows via transparent/bg-surface. Header cells are overline-style (11px uppercase).

Tabs

Horizontal tabs with sliding underline indicator.

Underline Tabs

Übersicht-Tab Inhalt

Pill Tabs

Übersicht-Tab Inhalt

Modals & Dialogs

Centered modals in three sizes. Close via Escape or backdrop click.

Toasts / Notifications

Top-right positioned, auto-dismiss, four semantic variants.

Änderungen gespeichert.
Verbindung fehlgeschlagen.
Achtung: Deadline in 2 Stunden.
3 neue Nachrichten verfügbar.

Avatars & User Elements

Initials-based avatars in three sizes.

Sizes

P
sm 24px
PM
md 32px
PM
lg 40px

User Footer Pattern

PM
Philipp
philipp@example.com

AI / Insight Box

Special containers for AI-generated content and system insights.

Default (Accent)

AI Insight
Basierend auf deinen letzten 30 Tasks: Du erledigst MIT-Tasks 2.3× schneller als normale. Empfehlung: Setze heute maximal 3 MITs.

Success Variant

All Done
Alle 5 Tasks für heute erledigt. Deine Produktivität liegt 18% über dem Wochenschnitt.

Pagination

Page navigation with active state and prev/next controls.

Numbered Pagination

...

Simple Pagination

Seite 3 von 12

Empty States

What to show when there is no content. Icon + message + action.

Keine Tasks vorhanden

Erstelle deinen ersten Task, um loszulegen.

Keine Ergebnisse

Versuche andere Suchbegriffe oder Filter.

Loading States

Skeleton shimmer, spinners, and progress indicators.

Skeleton Cards

Spinners

Progress Bars

65% abgeschlossen
Abgeschlossen

Form Validation

Error and success states for all form elements.

Bitte gib eine gültige E-Mail-Adresse ein.
E-Mail ist verfügbar.
Nachricht darf nicht leer sein.
2 Fehler gefunden
  • · Name ist ein Pflichtfeld
  • · Passwort muss mindestens 8 Zeichen lang sein

Date Inputs

Intelligente Datumseingabe: einfach tippen, pasten, oder Kalender nutzen. Keine Punkte nötig.

Smart Date Input

Tippe einfach Ziffern — das Format wird automatisch gesetzt. Paste jedes gängige Format (19.03.2026, 2026-03-19, 19/03/2026, 03-19-2026). Kalender-Picker immer als Alternative.

Einzelnes Datum
Tippe z.B. 19032026 oder paste ein Datum
Tippe z.B. 19032026 oder paste ein Datum
Datumsbereich
Datum + Uhrzeit
Schnellauswahl
Disabled
Parsing-Regeln

Der Smart-Parser akzeptiert alle gängigen Formate:

19032026 → 19.03.2026
19.03.2026 → 19.03.2026
19/03/2026 → 19.03.2026
2026-03-19 → 19.03.2026 (ISO)
19-03-2026 → 19.03.2026
19 03 2026 → 19.03.2026
Design-Regel: Date Inputs müssen immer ohne Trennzeichen tippbar sein. Auto-Format bei Eingabe. Paste muss jedes gängige Format erkennen. Kalender-Picker ist Ergänzung, nie Pflicht. Validierung erst on blur, nie während der Eingabe. Schnellauswahl-Chips für häufige Werte (Heute, Morgen, +7 Tage).

Micro Interactions

Every animation communicates a state change. Hover, click, and replay to see them live.

Speed: 150ms base
Card Hover
"This tells the user: clickable, has weight"
Hover me
A task card item
Button Hover
"This tells the user: ready, interactive"
Focus Ring
"This tells the user: active context confirmed"
Button Click
"This tells the user: acknowledged"
Drawer Slide
"This tells the user: new context from right"
Drawer Panel
Slides in from the right edge.
Page Load Fade
"This tells the user: content arrived calmly"
Content Block
Fades in from slightly below.
Nav Activate
"This tells the user: location confirmed"
Success State
"This tells the user: done, confirmed"
Task title
Mark this as complete

SVG Icons

System icon library. Click to copy SVG code. Stroke-width 2, all sizes.

Navigation

Home
Menu
ChevronLeft
ChevronRight
ArrowLeft
Search

Actions

Plus
Edit
Trash
Copy
Download
Upload

Status

Check
X
AlertTriangle
Info
CheckCircle
Clock

Content

File
Folder
Calendar
Image
Link

System

Settings
User
LogOut
Eye
Lock

Communication

Chat
Mail
Bell
Help
Expand
Monitor
Activity

Multi-Role UI

Same visual language at every permission level. Progressive disclosure, not separate themes.

Profile

Preferences

Theme
Language
Notifications

Advanced

API Key sk-••••••••••••3f9a
Export Data
Bulk Actions

Admin

User Management Open →
System Logs View →
Role Assignment

Danger Zone

Delete Organization
Database Access
Feature Flags

Animation Lab

Experiment with easing curves, durations, and properties.

150ms
Easing Curve
Preset Curves
cubic-bezier(0.42, 0, 0.58, 1)
Click to animate
transition: transform 150ms ease-in-out;

Responsive Preview

Drei Mini-Seiten in verschiedenen Viewports — so sieht das Design System im echten Einsatz aus.

Viewport:
Seite:
375px — Mobile

Branding & Guidelines

Logo-Platzierung, Kundenlogos und Versionshinweise — einheitlich über alle Produkte.

Unser Logo

Das Crosslease-Logo liegt in drei Varianten vor: Horizontal (Header, E-Mail), Stacked (Login, Splash) und Text Only (kompakte Kontexte). Bevorzugt als SVG einbinden — für Dark Mode kann das X-Mark alleinstehend verwendet werden.

Standardvarianten (heller Hintergrund)
Horizontal
Horizontal
Stacked
Stacked
Icon
Icon / X-Mark
Text Only
Text Only
Invertiert (dunkler Hintergrund)
Horizontal INV
Horizontal INV
Stacked INV
Stacked INV
Icon
Icon (universal)
Text INV
Text INV
Schwarz-Weiß
B&W
B&W
B&W INV
B&W INV
Icon B&W
Icon B&W
Text Black
Text Black

Platzierung

  • Header: Horizontal-Logo links, max. 28px Höhe
  • Login/Splash: Stacked-Logo zentriert, max. 80px Höhe
  • Favicon: X-Mark, 32×32 / 16×16 PNG
  • Mobile Header: nur X-Mark (kein Text), 24px
  • Footer: Text-Only-Variante, 14px Höhe
  • E-Mail-Signatur: Horizontal, 120px Breite

Regeln

  • Mindestabstand: 1× Höhe des X-Marks um das Logo herum
  • SVG bevorzugen, PNG nur als Fallback (2× Auflösung)
  • Keine Schatten, Strokes oder Effekte auf dem Logo
  • X-Mark allein nur ab Viewport < 768px
  • Auf dunklem Hintergrund: immer -INV Variante (weiße Wortmarke)
  • Logo nie verzerren, rotieren oder einfärben

Kundenlogos

Kundenlogos erscheinen an definierten Stellen — z.B. in einer "Trusted by"-Sektion, im Mandanten-Header oder in Partner-Übersichten.

Logo-Leiste (Beispiel)
Kunde A
Kunde B
Kunde C
Kunde D
Kunde E

Platzierung

  • Mandanten-Header: neben eigenem Logo, max. 32px Höhe
  • Trusted-by-Leiste: horizontal, gleichmäßig verteilt, max. 48px Höhe
  • Partner-Seite: Grid-Layout, 100×48px pro Slot
  • Login: Mandantenlogo über dem Formular, zentriert

Regeln

  • Kundenlogos immer in Graustufen darstellen (filter: grayscale(1) opacity(.6))
  • Hover: grayscale(0) opacity(1) mit 200ms Transition
  • Einheitliche Höhe erzwingen, Breite proportional
  • SVG bevorzugen, PNG nur als Fallback (2× Auflösung)
  • Kein Kundenlogo darf größer als das eigene Logo erscheinen

Versionshinweise & Changelog

Update-Banner und Changelog-Einträge informieren Nutzer über Änderungen. Drei Stufen: Major (neue Features), Minor (Verbesserungen), Patch (Bugfixes).

Update-Banner
Version 2.1.0 verfügbar — Neues Dashboard-Layout und verbesserte Tabellenperformance.
Changelog
v2.1.0 Major 20. März 2026
  • Neues Dashboard-Layout mit anpassbaren Widgets
  • Tabellenkomponente: virtuelles Scrolling für 10.000+ Zeilen
  • Design Evolution Engine für iterative Designverbesserungen
v2.0.3 Patch 12. März 2026
  • Fix: Calendar Picker zeigt korrekten Monat nach Navigation
  • Fix: Token-Referenzen in Animation Lab korrigiert
v2.0.0 Major 1. März 2026
  • Komplettes Redesign: erweiterte Token-Palette, 27 Komponentensektionen
  • Light Mode mit voller Parität
  • Export: 99%-Reproduzierbarkeits-Prompt
v1.2.0 Minor 15. Februar 2026
  • Multi-Role UI Sektion hinzugefügt
  • Responsive Preview mit iframe-Viewports

Update-Banner Regeln

  • Erscheint einmalig oben im Hauptbereich (unter Header)
  • Dismissbar mit X-Button (Cookie/LocalStorage merken)
  • Farbe: Accent-Muted für Feature-Updates, Info-Muted für Patches
  • Maximal ein Banner gleichzeitig sichtbar
  • Verlinkt auf Changelog oder Release Notes

Changelog Regeln

  • Chronologisch absteigend, neuester Eintrag oben
  • Aktuellste Version: Accent-farbige linke Border
  • Drei Badge-Typen: Major (Accent), Minor (Success), Patch (Info)
  • Jeder Eintrag: Version + Badge + Datum + Bullet-Liste
  • Maximal 5 Einträge sichtbar, Rest hinter "Alle anzeigen"

Version Badge im Header

  • Neben dem Logo-Text, z.B. "v2.1.0"
  • Stil: font-size: 11px; color: var(--text-muted)
  • Optional: Punkt-Indikator wenn neue Version verfügbar
  • Klick öffnet Changelog-Modal oder -Seite

Export Center

Copy tokens, components, or the complete design prompt for use in other projects.

CSS Tokens
Complete :root block with dark + light mode
Design Prompt v2
Kompletter Design Prompt mit allen Spezifikationen, Asset-Links und Logo-Referenzen als .md Datei
Component Classes
Wiederverwendbare CSS-Klassen für alle Komponenten