Logo & Icon Variants
Backgrounds
✓
Deep Navy
Page background
#000D1C
rgb(0, 13, 28)
✓
Dark Navy
Sections & areas
#001222
rgb(0, 18, 34)
✓
Surface Navy
Cards & panels
#062237
rgb(6, 34, 55)
✓
Elevated
Hover · Borders · Dividers
#124061
rgb(18, 64, 97)
Accent · Brand Cyan
✓
Cyan Primary
Logo · CTAs · Links · Icons
#01BFFB
rgb(1, 191, 251)
✓
Cyan Light
Hover · Glow · Highlights
#6BDFF1
rgb(107, 223, 241)
✓
Cyan Deep
Active states · Gradient end
#058FC1
rgb(5, 143, 193)
✓
Cyan Muted
Disabled · Subtle UI
#336D91
rgb(51, 109, 145)
Typography
✓
White
Headings · H1–H3
#FFFFFF
rgb(255, 255, 255)
✓
Ice Blue
Body text · Subheadings
#C0F6FC
rgb(192, 246, 252)
✓
Muted Blue
Placeholder · Labels · Meta
#336D91
rgb(51, 109, 145)
Brand Background Image
background.png
Usage Examples
Primary Button
Outline Button
Card / Panel
Tinted Badge
Muted Label
CSS Custom Properties
/* Bösger Digital – Brand Tokens */ :root { /* ── Backgrounds ── */ --bg-deep: #000D1C; /* Page background */ --bg-base: #001222; /* Sections */ --bg-surface: #062237; /* Cards, panels */ --bg-elevated: #124061; /* Hover, borders */ /* ── Accent – Cyan ── */ --accent: #01BFFB; /* Primary brand cyan */ --accent-light: #6BDFF1; /* Glow, highlights */ --accent-deep: #058FC1; /* Active, gradient */ --accent-muted: #336D91; /* Disabled, subtle */ --accent-tint: rgba(1,191,251,0.12); /* ── Typography ── */ --text-primary: #FFFFFF; /* Headings */ --text-body: #C0F6FC; /* Body, subheadings */ --text-muted: #336D91; /* Placeholder, meta */ }