Lilienmeer
Meer & Lilien – Design Guide

Branding Guidelines

Ein umfassendes Design-System für Lilienmeer

Farbpalette

Primärfarben

Meerblau
Meerblau
Primär 1
#336699
Lila/Bordeaux
Lila/Bordeaux
Kontrast (Primär 2)
#5E3F6A

Farbabstufungen – Meerblau

Dunkel
Dunkelblau
Aktive States
#336699
Mittelhell
Mittelblau
Hover-States
#6699cc
Pastellhell
Hellblau
Subtile Hintergründe
#B3D1F0

Farbabstufungen – Lila/Bordeaux

Dunkel
Dunkel-Lila
Überschriften
#5E3F6A
Mittelhell
Mittel-Lila
Sekundärelemente
#7D5A8C
Pastellhell
Hell-Lila
Subtile Borders
#B89AC5

Neutrale Farben

Weiß
Weiß
Hintergrund
#ffffff
Hellgrau
Hellgrau
Alternative Hintergründe
#F5F5F5
Text Dunkel
Text Dunkel
Fließtext
#333333
Text Hell
Text Hell
Hints, Platzhalter
#999999

Typografie

Überschriften – Alex Brush

H1 – Alex Brush, 2.5rem / 40px
Das ist eine H1 Überschrift
H2 – Alex Brush, 2rem / 32px
Das ist eine H2 Überschrift

Weitere Überschriften – Raleway

H3 – Raleway, 1.5rem / 24px (Bordeaux)
Das ist eine H3 Überschrift

Fließtext & Sekundärtext – Poppins

Body Text – Poppins Regular, 1rem / 16px
Dies ist ein Beispiel für regulären Fließtext. Der Text sollte leicht lesbar sein und einen angenehmen Zeilenabstand von 1.6 haben. Dies ist ideal für längere Textpassagen auf deinem Blog, wo Leserlichkeit an erster Stelle steht.
Secondary Text – Poppins, 0.875rem / 14px
Dies ist sekundärer Text für Metadaten, Kategorien und weitere Informationen. Nutze hierfür die Farbe #5E3F6A für eine subtile Verbindung zur Brand.
Small Text – Poppins, 0.75rem / 12px
Dies ist kleiner Text für Hints, Platzhalter und Disabled States. Verwende die Farbe #999999.

Komponenten

Buttons

Verwendungsrichtlinien