Our Brand.
Everything you need to represent Till Freitag correctly – logo, colors, typography, and rules.
Logo
Our logo is the central identifier. Always use it with sufficient clearance and never alter it.
Colors
The color palette defines our visual identity. All colors are defined in HSL and available as design tokens.
Primary Blue
#3264fa
224 96% 59%
Primary, links, headlines
Turquoise
#40eee6
177 82% 59%
Accents, badges, hover effects
Yellow (CTA)
#ffcc00
48 100% 50%
CTAs, highlights
Navy
#1a2744
224 50% 20%
Dark sections, footer
Warm Black
#3c3c3c
0 0% 24%
Body text
Color Variants
Each primary color has light, dark, and text variants for consistent application.
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
Three standardized gradients for different contexts.
Primary
bg-gradient-primary
Headlines, text gradient
Hero
bg-gradient-hero
Hero sections
CTA
bg-gradient-cta
CTA buttons, highlights
Button Variants
Three CTA variants for different background contexts.
CTA
Primary action
CTA Outline
Light backgrounds
CTA Outline Dark
Navy backgrounds
Typography
Montserrat is our only typeface – for headlines and body text. Consistent weight hierarchy is key.
Montserrat
Aa Bb Cc 123
The quick brown fox jumps over the lazy dog.
| Weight | Preview | Use case |
|---|---|---|
| 700 (Bold) | Montserrat | Main headlines (H1, H2) |
| 600 (Semibold) | Montserrat | Buttons, badges, subheadings |
| 500 (Medium) | Montserrat | Navigation, labels |
| 400 (Regular) | Montserrat | Body text, descriptions |
Do's & Don'ts
Do's
- Use the logo with sufficient white space
- Only use Montserrat as typeface
- Use semantic color tokens (bg-primary, text-foreground)
- Use HSL values for all colors
- Check contrast in light & dark mode
Don'ts
- Distort, rotate, or recolor the logo
- Mix other typefaces
- Use hardcoded hex values in components
- Use Playfair Display in UI
- Use CTA yellow for backgrounds