Component Showcase

Eine durchgängige Referenz aller Komponenten des FLOWNIQ-Design-Systems — gruppiert nach Verwendung. Klicken Sie in die Sprung-Navigation oben, um zwischen den Bereichen zu wechseln.

FLOWNIQ DS v1.0 125 Tokens Poppins · Inter · JetBrains Mono
01 · Chrome & Nav 02 · Hero 03 · Buttons 04 · Forms 05 · Content 06 · Cards 07 · Interaktiv 08 · Daten & Spezial 09 · Type & Tokens
01

Page Chrome & Navigation

Header · Footer · Cookie · Back-to-Top · Mobile

Site Header (Logo + CTA + Dropdown)

Sticky am Seitenanfang dieser Showcase-Page
Site-Header bleibt beim Scrollen oben am Viewport haften. Hintergrund mit 85 % Weiß + 10 px Backdrop-Blur. Aktive Seite via blauem Pill markiert.

Mobile Navigation · open state

FLOWNIQ

Breadcrumbs

Sticky-Header Verhalten

Visualisierung — kein echtes Scroll-Verhalten
Start · Produkt · Preise sticky · blur 8px

Back-to-Top Button

Erscheint nach 480 px Scroll-Distanz unten rechts.

02

Hero & Top-of-Page

Hero · Trust-Bar · Logo Wall

Hero · zentriertes Statement

Neu

Eine Plattform für jeden digitalen Workflow

Ohne Code, ohne IT-Ticket, ohne Wartezeit. Drag & Drop genügt.

Hero · Split mit Visual

KI-Validierung jetzt verfügbar

Verwandeln Sie Prozesse in digitale Workflows

Drag & Drop genügt — FLOWNIQ übernimmt Validierung, Signatur und Compliance.

Hero · Full-Bleed Image (Brand Dark)

Confidential · Vertraulich

Die Plattform für die Prozessdigitalisierung

Erstellen Sie einzigartige digitale Workflows mit KI und ohne Programmierkenntnisse.

Trust-Bar · kleine Vorteile

30 Tage kostenlos testen
Hosting in Deutschland
GDPR & eIDAS-konform
ISO 27001 zertifiziert

Logo Wall · „Vertraut von"

Vertraut von führenden Unternehmen

NORDBANK
Helvetia
FINOVA AG
Mercurius
KAPITAL+
Bauer & Söhne
03

Buttons

Varianten · Größen · Zustände · Icons

Varianten · Primary, Secondary, Ghost, Link, Destructive

Link-Button →

Mit Icons (leading · trailing · icon-only)

Größen · S · M · L

Zustände · default · hover · focus · active · disabled · loading

Default
Hover (simuliert)
Focus
Active (pressed)
Disabled
Loading
Ghost · Hover
Secondary · Disabled
04

Form Components

Inputs · Selects · Checkboxes · Toggles · Pickers · Upload

Text · E-Mail · Passwort · Zahl · Suche

Textarea · mit Character Counter

0 / 280
Maximal 280 Zeichen. Wird auf der Übersichts-Karte angezeigt.

Select · Single & Multi

Banking × Onboarding × QES ×

Combobox / Autocomplete

Checkbox · Einzeln · Gruppe · Indeterminate

Einzeln
Gruppe
Indeterminate

Radio Buttons

Toggle Switch

Slider · Range Input

Anzahl Workflow-Durchläufe2500 / 10000
KI-Modell-Temperatur0.7

Date · Time · Date-Range Picker

→

File Upload · Drag-and-Drop & Button

PDF, DOCX, XLSX · max. 10 MB
Konto-Antrag.pdf
2,4 MB · vor 3 Min. hochgeladen

OTP / PIN Input

SMS-Code eingeben
Wir haben einen 6-stelligen Code an Ihre Telefonnummer gesendet.

Form-States — alle Zustände pro Input-Typ

Default
Focus (simuliert)
Filled
Hover
Disabled
Read-only
Error
Ungültige E-Mail-Adresse.
Success
Verifiziert.
Mit Pflicht-Marker & Helptext
Format: +49 30 12345678

Beispiel-Form · Kontakt mit Submit + Success-State

Success-State (nach Submit)
Nachricht gesendet
Vielen Dank — wir melden uns innerhalb eines Werktages.
Verarbeitung läuft … (Loading-State)
05

Content Components

Pain · Cure · Capabilities · Personas · Features · Stats · Testimonials · Pricing · Team · Articles · CTA

Pain Section · 3 Probleme

Was viele Operations-Teams kennen

Wochenlange IT-Tickets

Jeder neue Workflow wartet auf Entwickler — Time-to-Market: Wochen.

Medienbrüche & Doppelarbeit

PDF ausdrucken, scannen, eintippen. Fehleranfällig und teuer.

Compliance-Risiken

Unklare Audit-Trails, fehlende qualifizierte Signaturen, GDPR-Lücken.

Cure Section · mit Produkt-Mockup

Lösung

Workflows in Minuten — nicht in Wochen

Mit FLOWNIQ baut jede Fachabteilung ihre Prozesse selbst. Drag & Drop, KI-Validierung, eIDAS-Signatur. Audit-Trail inklusive.

Capability Grid 2×2

Drag & Drop Editor

70+ Bausteine. Bedingte Logik. Versionierung.

KI-Validierung

Plausibilität, Übersetzung, Hilfetexte via LLM.

QES & Compliance

eIDAS-konform. ISO 27001. GDPR. BaFin-anerkannt.

Offene Integrationen

REST · Webhooks · SAML · OIDC · 50+ Konnektoren.

Personas · 3 Spalten

CR
Clara · Operations Lead
Bank · 5.000 MA

„Ich brauche Workflows, die ich selbst änderen kann — ohne IT-Ticket."

TL
Dr. Tobias · Compliance
Versicherung · 800 MA

„Audit-Trail und qualifizierte Signatur sind nicht verhandelbar."

YN
Yara · CIO
FinTech · 200 MA

„Schnelles Onboarding mit klarer SSO-Anbindung."

Feature Grid · 3 Spalten Icon + Headline + Text

Drag & Drop

Kein Warten auf die Entwicklung. Fachabteilungen bauen Workflows selbst.

PDF-zu-Workflow

FLOWNIQ erkennt Felder, Pflichtangaben und Logik automatisch.

KI-Validierung

Bedingte Plausibilität, Übersetzung in 30+ Sprachen, intelligente Hilfen.

Stats / Numbers Block

50+
B2B-Kunden
in regulierten Branchen
14×
schneller deployt
vs. Eigenentwicklung
99,98%
Uptime SLA
Tier 3+ DC
30+
Sprachen
per KI-Übersetzung

Testimonial · einzelnes Zitat

FLOWNIQ hat unsere Onboarding-Zeiten um 73 % verkürzt. Compliance baut heute selbst — ohne IT-Ticket, ohne Wartezeit.

CR
Dr. Clara Rehm
Head of Digital Operations · Nordbank AG

Pricing · 3 Tiers + Vergleichszeilen

Starter
Kleine Teams
€ 490/ Monat
  • 5 Workflows · 500 Durchläufe
  • Editor & FES
  • QES & KI
Beliebteste Wahl
Business
Regulierte Prozesse
€ 1.490/ Monat
  • Unbegrenzte Workflows
  • QES & KI inklusive
  • SSO · Premium-Support
Enterprise
On-Prem & Custom
Auf Anfrage
  • On-Premises / Private Cloud
  • Custom LLM
  • 24/7 Support · SLA
Vergleichszeilen
Feature
Starter
Business Popular
Enterprise
Aktive Workflows
5
∞
∞
Durchläufe / Monat
500
10.000
individuell
Qualifizierte Signatur (QES)
—
✓
✓
KI-Validierung
—
✓
Custom LLM
SSO (SAML / OIDC)
—
✓
✓
On-Premises
—
—
✓
SLA / Uptime
99,5 %
99,9 %
99,98 %

Team Section

MK
Markus Kröner
CEO & Co-Founder

20+ Jahre B2B-Plattformen.

AS
Anja Schreiber
CTO

Ex-Engineering-Lead Direktbank.

TL
Dr. Tobias Lange
Head of Compliance

Volljurist · Ex-BaFin.

YN
Yara Nowak
VP Customer Success

8 Jahre Großkunden-Onboarding.

Blog / Article Card Grid

Compliance
14.05.2026 · 5 Min. Lesezeit

eIDAS 2.0 — was sich für Banken im Juli ändert

Die neue Verordnung bringt EU-weite Identitäts-Wallets. Wir fassen das Wichtigste zusammen.

TL
Dr. Tobias Lange
Produkt
07.05.2026 · 3 Min. Lesezeit

Release 3.4 — KI-Validierung jetzt für alle Pläne

Was die neue LLM-Anbindung kann und wie Sie sie aktivieren.

AS
Anja Schreiber
Case Study
28.04.2026 · 8 Min. Lesezeit

Wie Nordbank ihr Onboarding um 73 % beschleunigte

Vom 14-tägigen Prozess zu 8 Minuten Live-Onboarding — eine Customer Story.

YN
Yara Nowak

Final CTA · Section & Compact-Banner

Bereit für Ihren ersten digitalen Workflow?

Wir richten Ihre Test-Umgebung innerhalb eines Werktages ein.

Compact-Banner (kleiner)
FLOWNIQ Academy startet im JuniSelf-paced Lernpfad für Workflow-Builder. Frühbucher-Rabatt bis Ende Mai.
06

Card Variants

Standard · Image · Clickable · Action · Stat · Profile

Standard · Mit Bild · Clickable

Standard Card

Basis-Container für Inhalte. 1 px Border, sh-1 Shadow, Radius md.

VISUAL

Card mit Bild

Bild-Bereich + Body, klickbar.
Featured

Clickable Card

Hover bringt Schatten + Translate-Up.

Action Card

Stat Card

Aktive Workflows
142
+12 %
Durchläufe
28.412
+38 %
Erfolgsrate
98,2 %
−0,3 %
Ø Dauer
7,2 Min.
−73 %

Profile Card

CR
Dr. Clara Rehm
Head of Digital Operations · Nordbank
Verantwortet 12 produktive Workflows seit 2024.
TL
Dr. Tobias Lange
Compliance · FINOVA AG
eIDAS, GDPR, MiFID II — Volljurist.
07

Interactive Components

Accordion · Tabs · Modal · Drawer · Tooltip · Popover · Dropdown · Context

Accordion · FAQ (mit offenem Item)

Nein. FLOWNIQ wurde für Fachabteilungen entwickelt. 70+ Bausteine, Drag & Drop, bedingte Logik per visueller Regel.

Ja — PDF-zu-Workflow überführt Felder und Logik automatisch.
Standardmäßig in deutschen Tier-3+-Rechenzentren in Frankfurt & Berlin.
QES ist rechtlich gleichgestellt mit handschriftlicher Unterschrift (eIDAS).

Tabs · horizontal

Editor-Inhalt — 70+ Bausteine, Versionierung, Live-Vorschau.

KI-Validierung-Inhalt.

QES-Inhalt.

Integrationen-Inhalt.

Tabs · vertikal

Allgemeine Einstellungen

Sprache, Zeitzone und Standardeinstellungen für neue Workflows.

Benachrichtigungen

E-Mail- und Slack-Notifikationen für Workflow-Events.

Sicherheit

Zwei-Faktor-Authentifizierung, SSO, IP-Whitelist.

API-Zugriff

API-Tokens, Webhook-URLs.

Audit-Log

Lückenloser Trail aller Workflow-Änderungen.

Modal / Dialog · open state

3 Min. Demo

Sehen Sie FLOWNIQ in Aktion

Eine geführte Tour durch den Editor, die KI-Validierung und QES. Anschließend können Sie eine persönliche Demo buchen.

Confirmation Dialog (Destructive)

Workflow wirklich löschen?

Diese Aktion löscht „Onboarding Privatkunde v3.2" einschließlich aller Versionen und kann nicht rückgängig gemacht werden.

Drawer / Side Panel · open state

Filter

Tooltip · sichtbar

Workflow-Aktionen öffnen

Popover · sichtbar

eIDAS-konforme Signatur
Die qualifizierte elektronische Signatur (QES) ist gemäß EU-Verordnung 910/2014 rechtlich gleichgestellt mit der handschriftlichen Unterschrift.

Context Menu · open

UmbenennenF2
Duplizieren⌘D
Exportieren als JSON
Archivieren
Löschen⌫
08

Daten & Spezial

Table · Charts · Timeline · Progress · Badges · Avatars · Alerts · Toasts · States

Data Table · sortier-, filter- & auswählbar

Alle Aktiv Entwurf Archiviert
Workflow ↑ Eigentümer ↕ Durchläufe ↕ Erfolg ↕ Status
Onboarding Privatkunde
v3.2 · 14 Schritte
CR
Clara Rehm
12.41298,2 %Aktiv
KYC-Update jährlich
v1.8 · 9 Schritte
TL
Tobias Lange
8.30199,1 %Aktiv
Kreditantrag Geschäftskunde
v2.0 · 21 Schritte
MK
Markus Kröner
3.84287,4 %Aktiv
Mass Mailing Repapering Q3
v0.4 · 7 Schritte
YN
Yara Nowak
——Entwurf
Zeigt 1–4 von 42 · 2 ausgewählt

Bar & Line Chart

Workflow-Durchläufe / Monat
Letzte 8 Monate
OnboardingKYC
OktNovDezJanFebMärAprMai
Bearbeitungszeit Ø
in Minuten
Okt 25Dez 25Feb 26Apr 26Mai 26

Timeline · vertikal & horizontal

Vertikal
Q1 2024
Editor v1.0

Erster visueller Workflow-Editor.

Q3 2024
PDF-zu-Workflow

Formulare automatisch konvertieren.

Q2 2026
KI-Validierung jetzt

LLMs als nativer Baustein.

Horizontal (Process Steps)
Schritt 01
Antrag
Formular ausgefüllt
Schritt 02
Identifikation
Pass per Video-Ident
Schritt 03
KI-Prüfung
IBAN, Adresse validiert
Schritt 04
QES
Qualifizierte Signatur
Schritt 05
Abschluss
PDF im DMS

Progress · Bar · Circular · Stepper

Onboarding40 %
KI-Validierung72 %
Abschluss100 %
60%
100%
Identifikation
Erledigt · 2 Min.
2
Dokument prüfen
Aktuell
3
Signatur
Ausstehend

Badges & Tags · alle semantischen Farben

Neutral Brand Accent Erfolg Warnung Fehler Info Tag Tag Solid

Pills / Chips · entfernbar

Alle Workflows Banking Versicherung Behörden × KYC × + Filter

Avatars · Einzeln · Gruppe · mit Status

MK
MK
MK
MK
CR
TL
MK
+5
AB
CD
EF
GH

Blockquote

FLOWNIQ hat unsere Onboarding-Zeiten von 14 Tagen auf 8 Minuten reduziert. Die Compliance-Abteilung baut heute selbst Workflows — das war früher undenkbar.— Daniel Berger, COO Helvetia Versicherung

Code Block · mit Copy-Button

YAML workflow/iban-validation.yaml 
# Bedingte Validierung mit LLM-Fallback
step: validate_iban
type: ai_validation
model: gpt-4-turbo
rules:
  - pattern: "^DE\d{20}$"
  - checksum: iban_mod_97
on_error:
  retry: 3

Alerts / Banners · mit & ohne Dismiss

Neues Release 3.4
QES für 14 weitere EU-Länder verfügbar.
ISO 27001 zertifiziert
Unsere Plattform hat die Zertifizierung erhalten.
Wartungsfenster geplant
Sa, 24.05. 02:00–04:00 MEZ.
Veralteter API-Endpunkt
v1/forms wird am 30.06.2026 abgeschaltet.

Toast Notifications · Trigger zum Stapeln

Workflow gespeichert
Version 3.3 wurde erstellt.

Empty State

Noch keine Workflows

Erstellen Sie Ihren ersten Workflow per Drag & Drop oder importieren Sie ein bestehendes PDF-Formular.

Loading Skeleton & Spinner

Small
Default
Large
09

Typography & Tokens

Type-Scale · Colors · Spacing · Radii · Shadows

Type Scale · Display, H1–H4, Body, Caption, Overline, Link

.display · 56/64
Display
h1 · 40/45

Hauptüberschrift H1

h2 · 30/35

Sektionstitel H2

h3 · 22/28

Unterüberschrift H3

h4 · 18/24

Kleine Überschrift H4

Body L · 17/26

Lead-Absatz für größere Einleitungen und Hero-Sublines.

Body M · 15/23

Standard-Body. Wir verwenden text-wrap: pretty für saubere Zeilenumbrüche und vermeiden Witwen.

Body S · 13/19

Sekundär-Body. Eingesetzt in Cards, Tabellen, sekundären Beschreibungen.

Caption · 12/17

Caption — Hilfetexte, Datum, Meta-Info.

Overline · 11/14

Overline — Sektion-Marker

Link · inline

Standard-Link: Mehr im Compliance-Handbuch · Hover-Link: Hover-Beispiel

Mono · 13/20workflow_id: 0x7c3f-89d1

Color Tokens · Brand · Akzent · Semantik · Neutrale

Brand (Navy)
navy-900
#1a1c3d
navy-800
#232646
navy-700 ★
#2a2d52
navy-500
#5b5fa0
navy-200
#d8d9ec
navy-050
#f6f6fb
Akzent (Cyan)
cyan-700
#1e6e8c
cyan-600
#2a8fb0
cyan-500 ★
#3fb0ce
cyan-400
#6cc5db
cyan-300
#a3dceb
cyan-100
#e3f4f9
Semantik
success-500
#3eb87f
warning-500
#e8a02a
danger-500
#db5a5a
info-500
#3f88ce
Neutrale (Ink)
ink-900
#0e1024
ink-700
#353855
ink-500
#797c9a
ink-300
#c9cbd9
ink-100
#f1f2f6
ink-050
#f8f9fb

Spacing · 4 px Base

--sp-14px
--sp-28px
--sp-312px
--sp-416px
--sp-520px
--sp-624px
--sp-732px
--sp-840px
--sp-956px
--sp-1072px
--sp-1196px

Border Radius

--r-xs · 4px
--r-sm · 6px
--r-md · 10px
--r-lg · 14px
--r-xl · 20px
--r-pill · 999px

Elevation / Shadows

--sh-1
--sh-2
--sh-3
--sh-4
Basis-Dialekt

FLOWNIQ Design System · Basis

Andere Dialekte

Diese Showcase-Seite zeigt alle Komponenten in der Basis-Variante des Design-Systems — die Default-Werte, auf denen alle vier Dialekte aufsetzen.

Drei charakteristische Eigenschaften dieses Dialekts
  • 01Standard-Spacing (24 px Card-Padding, 96 px Section-Padding), gerundete Cards mit Radius 10 px
  • 02Navy-Primary für CTAs, Cyan-Akzent für Status und Highlights, keine vollflächigen dunklen Sektionen
  • 03Poppins Bold (700) für Headlines, Regular (400) für Body — keine Kapitälchen, keine Mono-Hervorhebungen