Design-System-Plan · 5 Phasen · Stand 2026-04-26

Alles, was DARION Frontend bekommt

Komplettes Komponenten-Inventar für DARION Frontend — was kommt frei dazu, was kostet was, und wo wird's bei DARION konkret eingesetzt.

FREI · MIT

shadcn/ui Charts

Recharts v3 · ~10 Chart-Typen

Phase 1

FREI · MIT

Tremor Raw

Vercel-owned · Spezial-Charts

Phase 2

$299 · LIFETIME

Tailwind Plus + Catalyst

~500 Foundation-Components

Phase 3

$249 · LIFETIME

Aceternity UI Pro

~70 Premium-Animationen

Phase 4

Gesamt: $548 einmalig — kein Subscription, alles Lifetime · Copy-Paste-Components, kein Vendor-Lock

FREI · MIT-Lizenz

📊 Charts-Layer — shadcn/ui + Tremor Raw

Standard-Charts (80%) + Spezial-Charts (20%) · ohne Kosten · für alle Module-Dashboards

Phase 1 + 2

€0

Bar Chart

Finance · Umsatz

shadcn/ui · Recharts

Area Chart (Gradient)

Sales · Trend

shadcn/ui · Recharts

Line Chart (Multi-Series)

IT · SLA-Verlauf

shadcn/ui · Recharts

Donut

KPI-Verteilung

Tremor Raw

Radar

ISMS · Compliance-Score

shadcn/ui · Recharts

Stacked Bar

Verträge · Status

shadcn/ui · Recharts

Tracker (90-Tage SLA)

IT · Service-Health

vor 90 Tagen 99.94% Uptime heute

Tremor Raw

Spark-Bar in KPI-Card

Dashboard · überall

Offene Verträge

42 +12%

SLA-Verletzungen

3 −2

Tremor Raw

Progress Circle

Quoten · Ziele

80%

Q1-Ziel

€487K

noch 3 Wochen

Tremor Raw

Callout (Alert)

Anomalien · KI-Hinweis

⚠️

Acme-Vertrag läuft 15.06. aus

Frist 3 Monate · Kündigung muss bis 15.03. erfolgen.

✓

SLA-Ziel erreicht

99.94% Uptime — über 99.9% Schwelle

Tremor Raw

Bar List (Top-N)

Top-Kunden / Top-Risiken

Acme Corp €124K

Globex GmbH €89K

Initech AG €65K

Massive Dynamic €44K

Tremor Raw

Delta Badges & KPI Cards

Dashboard · Header

MRR

€42.8K

▲ +12.3%

Churn

2.1%

▼ −0.4%

NPS

▲ +8

Tickets

— stabil

Tremor Raw

$299 · Lifetime · einmalig

🧱 Foundation Layer — Tailwind Plus + Catalyst

~500 Components · Application UI + Marketing + E-Commerce · vom Tailwind-Team direkt

Phase 3

$299

Buttons (Variants)

überall

Form Inputs

Settings · Auth

Toggle / Checkbox / Radio

Settings · Permissions

2FA aktiv

Audit-Log aktivieren

Pool: Internal Pool: Research

Avatars + Badges

Mitglieder · Status

Active Pending Blocked Admin Viewer

Dialog / Modal

Confirmations · Forms

Mitglied entfernen?

Diese Aktion kann nicht rückgängig gemacht werden.

Toast / Alert

Feedback · Notifications

✓ Vertrag gespeichert

⚠ Letzte Sitzung läuft in 5 min ab

✕ Fehler beim Hochladen

ℹ Neuer KI-Hinweis verfügbar

Tabs

Settings · Detail-Views

Tab-Content erscheint hier — nahtlos animierter Wechsel.

Data Table (sortable)

Listen · Audit-Log · Verträge

Vertrag ↕	Kunde ↕	Wert ↕	Frist ↕	Status
ACM-001	Acme Corp	€124K	15.06.	Auslaufend
GLO-007	Globex GmbH	€89K	22.11.	Aktiv
INI-003	Initech AG	€65K	31.12.	Aktiv

Dropdown Menu

Aktionen · Filter

Auth Page (Split-Layout)

Sign-in · Sign-up

DARION AI

"DARION hat unsere Verträge im Griff."

— Frank, CFO

Anmelden

— oder —

Pricing Section (3-Tier)

Marketing · Landing

Starter

€29/Monat

✓ 5 Module
✓ 1 GB Storage
✓ E-Mail Support

Application Layout (Sidebar)

Layout · App-Shell

Dashboard

MRR €42K

42 Verträge

3 Alerts

Empty State

Listen ohne Items

📂

Noch keine Verträge

Lade einen Vertrag hoch, die KI extrahiert automatisch Daten.

$249 · Lifetime · einmalig

✨ Premium Animation — Aceternity UI Pro

~70 Premium-Animationen · Hero, Bento, KI-Helfer, Module-Cards · der Wow-Faktor

Phase 4

$249

Background Beams

Hero · KI-Helfer

Geschwungene SVG-Lichtpfade fließen im Hintergrund.

Meteors

Hero · CTAs

Diagonal fallende Lichtspuren — dezenter Akzent.

Spotlight

Hero · Auth

Hero-Stage-Light für Wow-Auftritte.

Smarter SaaS

Sparkles

Empty States · KI

🤖

"Frag mich was…"

Glowing Stars

Premium-Sektionen

60+ ambient funkelnde Sterne.

Vortex

Special Pages

Rotierender Color-Conic — Hero-Background-Variante.

Border Beam

Highlighted Cards

⭐ Premium-Feature

Rotierender Lichtbogen umrahmt das Element.

Hover Border Gradient

CTAs · Quick-Actions

Moving Border (Chip)

Status-Badges · KI-Helfer Pool

🔒 Internal · Llama

🌐 Research · Claude

3D Tilt Card

Module-Hero · Quellen

📊

Finance-Modul

Maus drüber — 3D-Tilt folgt.

Card Spotlight

Quellen · Bento

Maus über die Card → Lichtkegel folgt dem Cursor.

📄 Acme.pdf

📄 AGB v3

📄 ISMS-Doc

📄 NDA-2024

Glare Card

Premium-Cards

PRO · Tier

Premium Plan

Hover → Lichtreflex zieht durch.

Animated Beam

Tool-Calls · Datenflüsse

Lichtimpuls läuft zwischen Komponenten:

🤖

🔧

📄

Text Generate Effect

KI-Streaming

Typewriter Effect

Hero-Headlines

Smarter SaaS für KMUs.

Klassisch — gut für rotierende Hero-Texte.

Floating Dock (Magnetic)

Quick-Access · KI-Helfer

macOS-Style — Hover zoomt einzelne Icons.

Bento Grid

Marketing-Features · Module-Übersicht

🤖

KI-Helfer

Audit-fest, BYOK, EU AI Act

💰

Finance

📁

Verträge

🛡 ISMS · ISO 27001-ready

Risiko-Register · Asset-Inventar · Audit-Log

Lamp Effect

Hero-Highlight

Beleuchtet von oben.

Soft-Light-Cone-Effekt für Hero-Auftritte.

Marquee (Logo-Cloud / Testimonials)

Social Proof · Landing

⭐⭐⭐⭐⭐ "Game-changer." — Acme

⭐⭐⭐⭐⭐ "Verträge endlich im Griff." — Globex

⭐⭐⭐⭐⭐ "Spart Stunden." — Initech

⭐⭐⭐⭐⭐ "ISMS war nie so einfach." — Massive Dynamic

⭐⭐⭐⭐⭐ "Game-changer." — Acme

⭐⭐⭐⭐⭐ "Verträge endlich im Griff." — Globex

⭐⭐⭐⭐⭐ "Spart Stunden." — Initech

⭐⭐⭐⭐⭐ "ISMS war nie so einfach." — Massive Dynamic

Tracing Beam

Long-Form · Storyline

1. Sign-up
Schnell mit Google/E-Mail.

2. Module wählen
Was brauchst du heute?

3. Loslegen
KI hilft beim Onboarding.

Compare Slider

Vorher/Nachher · Diff

Manuell

Mit DARION

Direction-Aware Hover

Feature-Cards

📊

Charts

🤖

🛡

ISMS

📁

DMS

Number Ticker

Hero-Stats · Counters

1.247

Verträge

€8.4M

Volumen

99.94%

SLA

✨ KI-natives Business OS

DARION AI

16 Module für KMUs · Verträge, ISMS, Finance, KI-Helfer · alles in einem Place.

Landing-Hero · komplett

Summary · Recap

📋 Was kriegst du für $548?

Tailwind Plus + Catalyst

$299

✓ ~500 production-ready React-Components
✓ Application UI: Sidebars, Tables, Forms, Auth
✓ Marketing: Hero, Pricing, Features, Testimonials
✓ E-Commerce: Cart, Checkout, Product-Pages
✓ Catalyst: vollständiges Component-System
✓ Lifetime-Updates · 1 Entwickler-Lizenz
✓ TypeScript · React + Vue + HTML

Spart ~80h Component-Build-Zeit · ROI nach 1 Woche.

Aceternity UI Pro

$249

✓ ~70 Premium-Animationen + Effects
✓ Backgrounds: Beams, Meteors, Vortex, Stars, Lamp
✓ Cards: Tilt, Spotlight, Glare, Border Beam
✓ Text: Generate, Typewriter, Reveal
✓ Layouts: Bento, Hero-Parallax, Macbook-Scroll
✓ Floating: Dock (Magnetic), Navbar
✓ Special: Globe (Three.js), World Map, Compare-Slider
✓ Lifetime-Updates · alle zukünftigen Components

Macht DARION optisch zum Premium-SaaS · würdig €49/Monat.

+ Frei dazu (kein Budget nötig)

€0

shadcn/ui Charts

• Bar, Line, Area, Pie, Radar, Stacked
• Recharts v3 · MIT-Lizenz
• Bereits Tailwind-themed

Tremor Raw

• Donut, Tracker, Spark, Callout, Progress
• Vercel-owned · MIT (seit Ende 2025)
• Spezialisierte SaaS-Charts

🎯 Empfehlung

Beide kaufen. Zusammen $548 lifetime — günstiger als 2 Monate eines Subscription-Tools.

Tailwind Plus zuerst (Phase 3) → spart Setup-Zeit für Auth, Settings, Tables.
Aceternity Pro danach (Phase 4) → bringt den Wow-Faktor für KI-Helfer + Marketing.

Beide sind Copy-Paste-Components ohne Vendor-Lock. Du kannst jederzeit aussteigen, behältst den Code. Kein Risiko, keine wiederkehrenden Kosten.

Tailwind Plus ↗ Aceternity Pro ↗ ← KI-Helfer Basic KI-Helfer PRO →