Design System
Alle Komponenten, Farben und Typografie basierend auf den BANKABLE Brand Guidelines.
Logo
Die Wortmarke in verschiedenen Varianten und Größen.
Farben
Vollständige Farbpalette aus den Brand Guidelines.
Primary
Secondary
Graustufen (Text)
Highlight & Hover
Status
Typografie
Public Sans in allen definierten Größenstufen (Desktop).
Bankable
Übersicht
Unternehmensprofil
Fristgebundene Aufgaben
Semibold body text
Regular body text for longer paragraphs and descriptions.
Tabellenüberschriften und Labels
Sekundärer Beschreibungstext in 15px.
Badges, Metadaten, Hilfstexte
Kleinster Textstil für sekundäre Informationen.
Buttons
Alle Varianten nach Figma: 30px Radius, 40px Höhe, Chevron-Icons 24px.
Primary (Blue 2 + Blue 1)
Primary Large
Secondary / Outline
Sonstige
Größen
Badges & Status
shadcn Badge und Brand StatusBadge Komponente.
shadcn Badge
StatusBadge — Label (Brand)
StatusBadge — Icon (für Upload-Rows, Checklisten etc.)
Inputs
Formulareingaben im Brand-Stil.
Cards
Verschiedene Karten-Varianten.
Tabellen
Datenansicht wie im Dashboard und Datenraum.
| Status | Vertragsverpflichtung | Fällig am | Turnus | Zuständig |
|---|---|---|---|---|
| überfällig | BWA & SuSa | 28.12.2025 | monatlich | Eno Treasurer |
| offen | Unternehmensplanung | 15.01.2026 | jährlich | Eno Treasurer |
| erledigt | Quartalsreporting | 30.09.2025 | quartalsweise | Klaus Beispiel |
| offen | Jahresabschluss | 31.03.2026 | jährlich | Eno Treasurer |
Rating-Skalen
5-Punkt-Bewertungsskala mit Kreisen (Abhängigkeiten, Risiken, Bilanzkonstellation, Planungsannahmen).
Die Entwicklung wirkt stabil oder leicht verbessert.
Eine besondere Situation steht im Raum, aber eine Simulationsbilanz ist nicht zwingend erforderlich.
Kapitaldienstfähigkeit ist vollständig gesichert.
Liquidität ist aktuell ausreichend.
Progress-Stepper
Fortschrittsbalken mit nummerierten Schritten für Wizards und Onboarding.
Onboarding (Schritt 1 von 2)
Geschäftsinformationen (Schritt 3 von 4)
Sub-Tabs
Sekundäre Tab-Navigation innerhalb des Unternehmensprofils.
Back-Link
Zurück-Navigation auf Detailseiten.
Kontakt-Karten
Ansprechpartner, Bank- und Berater-Kontakte.
Status-Box
Statusmeldungen im Dashboard-Header.
Aktivitäten-Feed
Aktivitäten Ihrer Banken & Berater.
Modal / Dialog
Zentrierter Dialog mit dunklem Overlay und X-Button.
Textarea
Mehrzeiliges Textfeld für Kommentare und Beschreibungen.
Banner Messages
Info- und Fehlermeldungen mit Icon, Überschrift und Text.
File Upload Displays
Kompakte Zeilen für Upload-Ergebnisse, Aktivitätslog und Dokumente.
File Dropzone
Drag & Drop Upload-Zone nach Figma-Design. Wiederverwendbar für Dokument-Uploads überall in der App.
Upload Modal
Vollbildmodal mit Upload-Flow: Dropzone → Datei hochgeladen → Erfolg. Wiederverwendbar für alle Dokumenten-Uploads.
Action Cards
Kontakt-Karten, CTA-Karten und Empty-State-Einladungen.
Header Varianten
Navigation-Header und Process-Header laut Figma.
Footer
Dunkelblaue Fußzeile mit Logo.