Zum Inhalt springen
Medi Concierge

Internal

Design System

Alle Komponenten, Farben und Patterns von Medi Concierge

Farben

Alle CSS Custom Properties unseres Farbsystems

Accent / Primary

Hintergruende

Text

Borders

Typografie

Font: Figtree (Google Fonts)

Hero H1 — text-4xl md:text-5xl lg:text-[56px] font-bold tracking-[-0.04em]

Keine Anfrage geht mehr verloren.

Section H2 — text-3xl md:text-5xl font-semibold tracking-tight

Das ist eine Gradient Headline

Card H3 — text-2xl md:text-3xl font-semibold

Feature Ueberschrift

Body Large — text-lg md:text-xl

Medi Concierge nimmt Anrufe entgegen, bearbeitet Online-Anfragen und integriert alles in Ihre Praxis-Software.

Body — text-base | Small — text-sm | XS — text-xs

text-base (16px): Standard Body Text

text-sm (14px): Sekundaerer Text, Labels

text-xs (12px): Badges, Meta-Info

Buttons

Drei Varianten, drei Groessen. Alle rounded-full.

Varianten

Groessen

Mit Icons

Shimmer CTA (Hero)

Cards

Standard, Glow und Feature Cards

Standard Card

Einfache Card

rounded-2xl, border-subtle, bg-card, p-8, shadow-card

Glow Card

Interaktiver Glow

Cursor-folgendes Radial-Gradient auf Hover

Accent Card

Gradient Background

Fuer CTAs und hervorgehobene Bereiche

Nachher

Success/Positiv Card

Fuer Vorher/Nachher Vergleiche

Vorher

Error/Negativ Card

Fuer Pain Points und Probleme

Glass Card

Glasmorphism

bg-elevated + backdrop-blur-md

Icons & Produkt-Icons

Lucide React Icons + ProductIcon Komponente

Produkt-Icons

AnrufConcierge
WebConcierge
Bundle

Haeufig verwendete Icons (Lucide)

Phone
Globe
Calendar
FileText
Stethoscope
Shield
Clock
Users
CheckCircle
Star
TrendingUp
MessageSquare
ArrowRight

Badges & Social Proof

Trust-Elemente und Status-Badges

MicroSocialProof

Bereits 1.000+ Praxen vertrauen uns

Label Badges

Szene 1NachherVorherNeu24/7 verfuegbar

Trust Strip

1.000+ AerzteDSGVO-konform · Deutsche Server

Animationen

Scroll-Reveal, CountUp, Gradient-Effekte

AnimateOnScroll (Framer Motion)

delay: 0s

opacity: 0 → 1, y: 30 → 0

delay: 0.1s

opacity: 0 → 1, y: 30 → 0

delay: 0.2s

opacity: 0 → 1, y: 30 → 0

CountUp

1.000+

Praxen

24/7

Erreichbar

<3s

Antwortzeit

Gradient & Shimmer Text

Static Gradient Text

Animated Gradient Text

Shimmer Text (Hero)

Section Varianten

Default und Accent Sections mit Container

Section variant="default"

Standard weisser/dunkler Hintergrund

Section variant="accent"

Gradient von --gradient-from zu --gradient-to

Spacing & Layout

Container, Breakpoints und Abstande

Container

max-width: 1200px (mx-auto)

padding: px-6 (mobile) → md:px-8 → lg:px-12

Section Spacing

py-16 (64px mobile) → md:py-24 (96px desktop)

Breakpoints

default

0px

Mobile

sm

640px

Small

md

768px

Tablet

lg

1024px

Desktop

Border Radius

lg (8px)
xl (12px)
2xl (16px)
full