CORPORATE IDENTITY

Design System

Die visuelle Identität von flooas. Farben, Typografie, Komponenten und Richtlinien für ein konsistentes Erscheinungsbild auf allen Seiten.

flooas

Markenfarben

Die Brand-Palette basiert auf einem Cyan-to-Purple-Gradient und einer kräftigen Primärfarbe.

Primary

#1E96FC

--primary

Buttons, Links, aktive States

Primary Hover

#0A7AE6

--primary-hover

Hover-States

Primary Light

#F0F7FF

--primary-light

Hintergründe, Badges

Primary Muted

rgba(30, 150, 252, 0.08)

--primary-muted

Subtile Akzente

Accent (Cyan)

#00D4FF

--accent

Gradient-Start, Akzente

Accent End (Purple)

#7B2FF7

--accent-end

Gradient-Ende

Brand Gradient

linear-gradient(135deg, #00D4FF 0%, #1E96FC 50%, #7B2FF7 100%)

Subtle variant (8% opacity)

Neutrale Farben

Background

#FFFFFF

Seitenhintergrund

Surface

#F8FAFC

Karten, erhöhte Flächen

Elevated

#F1F5F9

Hover, Inputs

Hover

#E2E8F0

Hover-Hintergründe

Text Primary

#0F172A

Überschriften

Text Secondary

#475569

Body-Text

Text Tertiary

#94A3B8

Labels, Platzhalter

Border

#E2E8F0

Standard-Rahmen

Feedback-Farben

Success

#10B981

Erfolg, Bestätigung

Error

#EF4444

Fehler, Warnungen

Warning

#F59E0B

Hinweise, Achtung

Empfehlungen & Status

Aktuelle Design-Entscheidungen und Empfehlungen zur Abstimmung.

Einheitliche Primärfarbe

Aktiv

Die aktuelle Cyan-Blue-Palette (#1E96FC) mit Gradient zu Purple wird konsistent auf allen Seiten eingesetzt. Der Gradient verleiht der Marke einen modernen, hochwertigen Charakter.

Inter als System-Font

Aktiv

Inter bietet exzellente Lesbarkeit auf allen Geräten und passt zum minimalistischen Design-Ansatz. Die Gewichtungen 400-700 decken alle Anwendungsfälle ab.

Kein visuelles Rauschen

Aktiv

Wie bei Booking und Airbnb: klare Hierarchien, viel Weißraum, dezente Schatten statt Gradients auf Karten. Der Gradient bleibt dem Brand-Bereich vorbehalten.

Konsistente Komponenten

Empfehlung

Alle Buttons, Karten und Badges verwenden die gleichen Design-Tokens. Keine Seite hat individuelle Styles, die vom System abweichen.

Barrierefreiheit

Empfehlung

Alle Farbkombinationen erfüllen WCAG AA. Die Primärfarbe auf Weiß hat ein Kontrastverhältnis von 3.2:1 (AA für große Texte). Für kleine Texte wird --text-primary (#0F172A) verwendet.