Brand Identity: Color & Asset System

The complete official brand palette and logo variants behind every Bösger surface, from consulting to code. Click any color to copy its hex value.

Logo & Icon Variants

Backgrounds

Deep Ocean

Page background

#12385F

rgb(18, 56, 95)

Base Ocean

Sections & areas

#174470

rgb(23, 68, 112)

Surface Ocean

Cards & panels

#1D5183

rgb(29, 81, 131)

Elevated Ocean

Hover · Borders · Dividers

#2E6CA3

rgb(46, 108, 163)

Accent · Brand Cyan

Cyan Primary

CTAs · Links · Icons

#62D6FF

rgb(98, 214, 255)

Cyan Light

Hover · Glow

#A8ECFF

rgb(168, 236, 255)

Cyan Deep

Active · Chips

#2BB3EE

rgb(43, 179, 238)

Cyan Muted

Subtle UI

#8FB9E0

rgb(143, 185, 224)

Cyan Tint

Tinted backgrounds · Badges

rgba(98,214,255,0.14)

--accent-tint

Warm Counterpoint · Amber

Amber

Availability · Highlights

#FFC266

rgb(255, 194, 102)

Ink on Light

Text on buttons & badges

#0F3358

rgb(15, 51, 88)

Logo Cyan

Logo files only

#01BFFB

rgb(1, 191, 251)

Typography

White

Headings

#FFFFFF

rgb(255, 255, 255)

Ice Blue

Body text · Subheadings

#EEF8FF

rgb(238, 248, 255)

Soft Blue

Labels · Meta

#C4DCEF

rgb(196, 220, 239)

Brand Background Image

Usage Examples

Primary Button Outline Button Card / Panel Tinted Badge Muted Label

CSS Custom Properties

BRAND TOKENS

/* Bösger Digital – Brand Tokens (Ocean Bright) */
:root {
  /* ── Backgrounds ── */
  --bg-deep:      #12385F;   /* Page background */
  --bg-base:      #174470;   /* Sections */
  --bg-surface:   #1D5183;   /* Cards, panels */
  --bg-elevated:  #2E6CA3;   /* Hover, borders */

  /* ── Accent – Cyan ── */
  --accent:       #62D6FF;   /* CTAs, links, icons */
  --accent-light: #A8ECFF;   /* Glow, highlights */
  --accent-deep:  #2BB3EE;   /* Active, gradient */
  --accent-muted: #8FB9E0;   /* Subtle UI */
  --accent-tint:  rgba(98,214,255,0.14);

  /* ── Warm counterpoint ── */
  --warm:         #FFC266;   /* Availability, highlights */
  --on-warm:      #0F3358;   /* Text on cyan and amber */

  /* ── Typography ── */
  --text-primary: #FFFFFF;   /* Headings */
  --text-body:    #EEF8FF;   /* Body, subheadings */
  --text-muted:   #C4DCEF;   /* Labels, meta */
}

Bösger Digital – Complete Brand Color Reference

Background Colors

Deep Ocean – #12385F – rgb(18, 56, 95) – CSS: --bg-deep – Use: Page background, deepest level
Base Ocean – #174470 – rgb(23, 68, 112) – CSS: --bg-base – Use: Sections and areas
Surface Ocean – #1D5183 – rgb(29, 81, 131) – CSS: --bg-surface – Use: Cards and panels
Elevated Ocean – #2E6CA3 – rgb(46, 108, 163) – CSS: --bg-elevated – Use: Hover states, borders, dividers

Accent Colors (Cyan)

Cyan Primary – #62D6FF – rgb(98, 214, 255) – CSS: --accent – Use: CTAs, links, icons, eyebrow labels
Cyan Light – #A8ECFF – rgb(168, 236, 255) – CSS: --accent-light – Use: Hover, glow, highlights
Cyan Deep – #2BB3EE – rgb(43, 179, 238) – CSS: --accent-deep – Use: Active states, chips, gradient end
Cyan Muted – #8FB9E0 – rgb(143, 185, 224) – CSS: --accent-muted – Use: Disabled, subtle UI
Cyan Tint – rgba(98,214,255,0.14) – CSS: --accent-tint – Use: Tinted backgrounds and badges

Warm Counterpoint (Amber)

Amber – #FFC266 – rgb(255, 194, 102) – CSS: --warm – Use: Availability, prices, key highlights (the one warm counterpoint)
Ink on Light – #0F3358 – rgb(15, 51, 88) – CSS: --text-on-accent – Use: Text on cyan buttons and amber badges
Logo Cyan – #01BFFB – rgb(1, 191, 251) – Use: Original logo cyan, used in the logo and icon files only

Typography Colors

White – #FFFFFF – rgb(255, 255, 255) – CSS: --text-primary – Use: Headings
Ice Blue – #EEF8FF – rgb(238, 248, 255) – CSS: --text-body – Use: Body text, subheadings
Soft Blue – #C4DCEF – rgb(196, 220, 239) – CSS: --text-muted – Use: Labels, meta text (4.5:1 or better on every surface)

CSS Custom Properties

/* Bösger Digital – Brand Tokens (Ocean Bright) */
:root {
  /* ── Backgrounds ── */
  --bg-deep:      #12385F;   /* Page background */
  --bg-base:      #174470;   /* Sections */
  --bg-surface:   #1D5183;   /* Cards, panels */
  --bg-elevated:  #2E6CA3;   /* Hover, borders */

  /* ── Accent – Cyan ── */
  --accent:       #62D6FF;   /* CTAs, links, icons */
  --accent-light: #A8ECFF;   /* Glow, highlights */
  --accent-deep:  #2BB3EE;   /* Active, gradient */
  --accent-muted: #8FB9E0;   /* Subtle UI */
  --accent-tint:  rgba(98,214,255,0.14);

  /* ── Warm counterpoint ── */
  --warm:         #FFC266;   /* Availability, highlights */
  --on-warm:      #0F3358;   /* Text on cyan and amber */

  /* ── Typography ── */
  --text-primary: #FFFFFF;   /* Headings */
  --text-body:    #EEF8FF;   /* Body, subheadings */
  --text-muted:   #C4DCEF;   /* Labels, meta */
}