Gastroflex Design System

Component Library — Tailwind 4 + DaisyUI 5 — Royal Blue & Amber

1. Farben

Primaer Royal Blue, Akzent Amber, neutrale Graustufen und semantische Farben.

PRIMARY — ROYAL BLUE
900
#0D1B3E
800
#122554
700
#1A3C8F
600
#2851A3
500
#3366BB
400
#5A88D0
300
#89ADE0
200
#B8D0F0
100
#DCE8F8
50
#EEF3FC
ACCENT — AMBER
700
#CC8800
600
#E69A00
500
#FFB300
400
#FFC233
300
#FFD166
200
#FFE099
100
#FFF0CC
50
#FFF8E6
NEUTRAL
900
#111827
800
#1F2937
700
#374151
600
#4B5563
500
#6B7280
400
#9CA3AF
300
#D1D5DB
200
#E5E7EB
100
#F3F4F6
50
#F9FAFB
SEMANTISCH
Success
#16A34A
Error
#DC2626
Warning
#F59E0B
Info
#3366BB

2. Typografie

Display: Plus Jakarta Sans (Headlines) — Body: Inter (Fliesstext)

TYPE SCALE
Plus Jakarta Sans 800 / 3.2rem — Hero Headline
Dein Restaurant, dein Erfolg
Plus Jakarta Sans 800 / 2rem — Section Headline
Alles aus einer Hand
Plus Jakarta Sans 700 / 1.2rem — Card Title
Eigener Webshop unter deiner Domain
Inter 400 / 1.05rem — Body Large
Gastroflex kuemmert sich um alles: Webseite, App, Bestellungen, Marketing und Analyse. Du konzentrierst dich auf dein Essen.
Inter 400 / 0.95rem — Body
Bestellungen werden automatisch per E-Mail, Thermoprinter und App an dein Restaurant weitergeleitet.
Inter 600 / 0.75rem uppercase — Label / Overline
Neu: KI-Bestellungen via MCP

3. Logo / Icon / Wordmark

Schild mit Gradient-Tiefe, zentriertem "g" und geometrischem Amber-Chevron. Premium, clean, skalierbar von Favicon bis Hero.

AKZENT-VARIANTEN — 80px
g
A — Kein Akzent
g
B — Schildrand
g
C — Underline
g
D — Amber Glow
g
E — Chevron (aktuell)
AKZENT-VARIANTEN — 36px
g
A
g
B
g
C
g
D
g
E
AKZENT-VARIANTEN — 24px
g
A
g
B
g
C
g
D
g
E
ICON — GROESSEN (CHEVRON)
g
80px
g
56px
g
36px
g
24px
ICON + WORDMARK — LIGHT
g gastroflex
ICON + WORDMARK — DARK
g gastroflex
WORDMARK ONLY — LIGHT
gastroflex gastroflex gastroflex
WORDMARK ONLY — DARK
gastroflex gastroflex gastroflex

4. Buttons

Alle Button-Varianten und -Groessen mit DaisyUI 5.

VARIANTEN — LIGHT BG
VARIANTEN — DARK BG
GROESSEN

5. Navigation

Header-Varianten fuer die Landing Page.

LIGHT NAVBAR
DARK NAVBAR

6. Hero Sections

Zwei Hero-Varianten: zentriert (dunkel) und split-layout (hell).

HERO A — CENTERED DARK

Dein Restaurant,
dein Erfolg

Eigene Webseite, eigene App, null Provision. Gastroflex ist die smarte Alternative zu Lieferando.

HERO B — SPLIT LAYOUT

Mehr Umsatz,
weniger Abhaengigkeit

Mit Gastroflex erhaeltst du deinen eigenen Webshop und deine eigene App — ohne Provision, ohne Abhaengigkeit von Plattformen.

[Webshop Screenshot]

7. Die 5 Saeulen

Ueberblick der fuenf Kernbereiche von Gastroflex.

PILLAR STRIP
👁️

Sichtbarkeit

Eigene Webseite und App unter deiner Domain

🛒

Bestellungen

Online-Bestellsystem mit Echtzeit-Verarbeitung

Verarbeitung

Automatische Weiterleitung an Drucker und Kasse

📣

Marketing

Push-Benachrichtigungen und Gutschein-System

📊

Analyse

Dashboard mit Umsatz- und Kundenstatistiken

8. Feature Cards

Kompakte Feature-Karten mit Icon, Titel und Beschreibung.

FEATURE GRID
🌐

Eigener Webshop

Dein Shop unter deiner eigenen Domain — professionell, schnell und mobiloptimiert.

📱

Eigene App

Native iOS- und Android-App mit deinem Branding im App Store und Play Store.

🖨️

Automatischer Druck

Bestellungen werden direkt auf deinem Thermodrucker in der Kueche ausgegeben.

💰

Null Provision

Keine versteckten Kosten pro Bestellung — du zahlst nur einen festen Monatsbeitrag.

🔔

Push-Marketing

Erreiche deine Kunden direkt per Push-Nachricht mit Angeboten und Neuigkeiten.

📈

Live-Dashboard

Alle Kennzahlen auf einen Blick: Umsatz, Bestellungen, Kunden und mehr.

9. Product Cards

Produktkarten mit Bild-Platzhalter, Badge, Titel und Beschreibung.

PRODUCT GRID
[Webshop Screenshot]
Webshop

Eigener Webshop

Professioneller Webshop unter deiner eigenen Domain mit vollstaendig responsivem Design und SEO-Optimierung.

[App Screenshot]
Mobile App

Native App

Deine eigene App im App Store und Play Store — mit Push-Benachrichtigungen und deinem Branding.

10. Stat Cards

Kennzahlen-Karten fuer Social Proof und Statistiken.

STATS GRID
500+
Aktive Restaurants
2M+
Bestellungen / Jahr
0%
Provision
99,9%
Uptime

11. Comparison Table

Wettbewerbsvergleich mit hervorgehobener Gastroflex-Spalte.

COMPARISON TABLE
Feature Gastroflex Lieferando order smart
Eigene Webseite + App 99€/Monat 168€/Monat
Provision 0% 13–30% 0% + 0,29€/Bestellung*
WhatsApp-Bestellungen mit KI (raten dagegen ab)
KI-Bestellungen MCP integriert
Transaktionsgebühren Keine Ja 0,99% (YOYOPay)
Kundendaten Deine Lieferando Deine
Preistransparenz Direkt auf der Seite Preise als Bild versteckt

12. Pricing Cards

Preiskarten im 3-Spalten-Layout mit hervorgehobenem Komplett-Paket.

PRICING GRID

Webseite + App

99 €/Monat
  • Eigene Domain
  • App im App Store & Play Store
  • Push-Nachrichten
  • Google-optimiert
  • 0% Provision
Bestes Angebot

Komplett-Paket

Webseite + App + KI & WhatsApp

148 €/Monat
  • Alles aus "Webseite + App"
  • WhatsApp-Bestellungen
  • KI-Sprachbestellung
  • 24/7 automatische Annahme
  • Zukunftssicher (ChatGPT, Claude)
  • 0% Provision

OrderManager

299 € einmalig
  • Alle Bestellungen auf einem Bildschirm
  • Automatischer Bon-Druck
  • Echtzeit-Bestellstatus
  • E-Mail-Benachrichtigungen
  • Funktioniert mit allen Kanälen

13. Testimonials

Kundenstimmen mit dekorativem Anführungszeichen, Zitat und Autor-Info.

TESTIMONIAL CARDS

Seit wir unsere eigene App haben, bestellen viel mehr Stammkunden direkt bei uns. Keine Provision mehr an Lieferando — das war die beste Entscheidung.

MK

Mehmet K.

Pizza Palace, Düsseldorf

Der Support ist super. Die haben alles für uns eingerichtet — Speisekarte, App, Webseite. Wir mussten gar nichts machen ausser Essen kochen.

AY

Ali Y.

Doyum Döner, Berlin

14. Feature-Checkliste

Kompakte Feature-Liste mit grünen Checkmark-Kreisen.

CHECKLIST
Eigener Webshop
Eigene App
Keine Provision
Bon-Drucker
Google Business Sync
KI-Bestellungen
Newsletter & Push
Flyer-Service

15. Badges & Tags

DaisyUI Badges, Pill-Tabs und Tags in verschiedenen Varianten.

BADGES
Primary Secondary Success Error Ghost
PILL TABS
TAGS (OUTLINE)
Lieferdienst Restaurant Pizzeria Sushi Döner

16. Formulare

DaisyUI Formular-Elemente: Inputs, Textarea und Buttons.

FORM ELEMENTS

17. Section-Varianten

Drei Hintergrund-Varianten für Sektionen: Light, Dark und Amber.

SECTION LIGHT

Light Section

Standardhintergrund für Inhaltssektionen mit heller Optik und klarem Kontrast.

SECTION DARK

Dark Section

Dunkler Hintergrund für CTA-Bereiche und Kontrastsektionen.

SECTION AMBER

Amber Section

Amber-Hintergrund für besondere Hervorhebungen und Aktionen.

18. CTA Banner

Dunkler Call-to-Action-Banner mit Headline, Subtitle und zwei Buttons.

CTA BANNER

Bereit, unabhängig zu werden?

Starte jetzt mit Gastroflex und spare tausende Euro an Provisionen.

19. FAQ Accordion

DaisyUI Accordion mit join-vertical und collapse-arrow.

FAQ ACCORDION
Brauche ich technisches Wissen?

Nein. Wir richten alles für dich ein — Webseite, App, Speisekarte, Liefergebiete. Du musst nur dein Restaurant kennen, den Rest machen wir.

Kann ich von Lieferando wechseln?

Ja. Du kannst beides parallel nutzen oder komplett wechseln. Viele unserer Kunden nutzen anfangs beides und reduzieren Lieferando dann Schritt für Schritt.

Was kostet die Einrichtung?

Nichts. Die Einrichtung ist kostenlos. Du zahlst nur den monatlichen Festpreis — ohne versteckte Gebühren.

20. Design Tokens — Referenz

Spacing, Border Radius, Shadows und DaisyUI Theme-Mapping auf einen Blick.

SPACING TOKENS
--space-1p-10.25rem
--space-2p-20.5rem
--space-3p-30.75rem
--space-4p-41rem
--space-6p-61.5rem
--space-8p-82rem
--space-10p-102.5rem
--space-12p-123rem
--space-16p-164rem
--space-20p-205rem
--space-24p-246rem
BORDER RADIUS
--radius-smrounded-md0.375rem
--radius-mdrounded-lg0.5rem
--radius-lgrounded-2xl1rem
--radius-xlrounded-3xl1.5rem
--radius-fullrounded-full9999px
SHADOWS
--shadow-smshadow-sm
--shadow-mdshadow-md
--shadow-lgshadow-lg
--shadow-xlshadow-xl
--shadow-blueshadow-lg shadow-[#FFB300]/25custom
DAISYUI THEME MAPPING
primary #1A3C8F (blue-700)
secondary/accent #FFB300 (amber-500)
base-100 #FFFFFF (white)
base-200 #F9FAFB (gray-50)
base-300 #F3F4F6 (gray-100)
success #16A34A
error #DC2626
warning #F59E0B
info #3366BB