Unsere Marke.
Alles, was du brauchst, um Till Freitag korrekt darzustellen – Logo, Farben, Typografie und Regeln.
Logo
Unser Logo ist das zentrale Erkennungsmerkmal. Bitte verwende es immer mit ausreichend Freiraum und verändere es nicht.
Farben
Die Farbpalette definiert unsere visuelle Identität. Alle Farben sind in HSL definiert und als Design-Tokens verfügbar.
Primary Blue
#3264fa
224 96% 59%
Hauptfarbe, Links, Headlines
Turquoise
#40eee6
177 82% 59%
Akzente, Badges, Hover-Effekte
Yellow (CTA)
#ffcc00
48 100% 50%
CTAs, Highlights
Navy
#1a2744
224 50% 20%
Dark Sections, Footer
Warm Black
#3c3c3c
0 0% 24%
Fließtext
Farbvarianten
Jede Hauptfarbe hat Light-, Dark- und Text-Varianten für konsistente Anwendung.
Blue-Palette
Blue
#3264fa
bg-primary
Blue Light
#6b91fb
bg-blue-light
Blue Dark
#1a4ad6
bg-blue-dark
Turquoise-Palette
Turquoise
#40eee6
bg-accent
Turquoise Light
#8cf5f0
bg-turquoise-light
Turquoise Dark
#1cc4bc
bg-turquoise-dark
Turquoise Text
#147a74
text-turquoise
Yellow-Palette
Yellow
#ffcc00
bg-yellow
Yellow Light
#ffdb4d
bg-yellow-light
Yellow Dark
#cca300
bg-yellow-dark
Yellow Text
#8a6914
text-yellow
Neutral-Palette
Background
#ffffff
bg-background
Muted
#f3f4f4
bg-muted
Border
#e5e5e5
border
Muted Foreground
#737373
text-muted-foreground
Navy Light
#3b5590
bg-navy-light
Foreground
#3c3c3c
text-foreground
Navy
#1a2744
bg-navy
Gradients
Drei standardisierte Farbverläufe für verschiedene Kontexte.
Primary
bg-gradient-primary
Headlines, Text-Gradient
Hero
bg-gradient-hero
Hero-Sektionen
CTA
bg-gradient-cta
CTA-Buttons, Highlights
Button-Varianten
Drei CTA-Varianten für verschiedene Hintergrund-Kontexte.
CTA
Haupt-Aktion
CTA Outline
Helle Hintergründe
CTA Outline Dark
Navy-Hintergründe
Typografie
Montserrat ist unsere einzige Schriftart – für Headlines und Fließtext. Konsistente Gewichtung ist entscheidend.
Montserrat
Aa Bb Cc 123
The quick brown fox jumps over the lazy dog.
| Gewicht | Preview | Einsatz |
|---|---|---|
| 700 (Bold) | Montserrat | Hauptüberschriften (H1, H2) |
| 600 (Semibold) | Montserrat | Buttons, Badges, Unterüberschriften |
| 500 (Medium) | Montserrat | Navigation, Labels |
| 400 (Regular) | Montserrat | Fließtext, Beschreibungen |
Do's & Don'ts
Do's
- Logo mit ausreichend Weißraum verwenden
- Nur Montserrat als Schriftart nutzen
- Semantische Farbtoken verwenden (bg-primary, text-foreground)
- HSL-Werte für alle Farben nutzen
- Kontrast in Light & Dark Mode prüfen
Don'ts
- Logo verzerren, drehen oder einfärben
- Andere Schriftarten mischen
- Hardcoded Hex-Werte in Komponenten nutzen
- Playfair Display im UI verwenden
- CTA-Gelb für Hintergründe verwenden