Zusammenarbeiten

Brand Style Guide

Emden Consulting GmbH

Farben

Farbpalette

#1F4364

Dark Slate Blue

HEX #1F4364 RGB 31, 67, 100 CMYK 94 / 69 / 36 / 27
#89BDE2

Light Grey Blue

HEX #89BDE2 RGB 137, 189, 226 CMYK 54 / 14 / 4 / 0
#6791C3

Faded Blue

HEX #6791C3 RGB 103, 145, 195 CMYK 64 / 36 / 7 / 0
Erweitert

Website-Farben

Primary

#151c2b

Dark

#0f1420

Accent Dark

#6a9fc4

White

#ffffff

Gray

#6c757d

Logo

Logo-Varianten

Primär – Heller Hintergrund
SVG
Primär – Dunkler Hintergrund
SVG
Kompakt – Heller Hintergrund
SVG
Kompakt – Dunkler Hintergrund
SVG
Anatomie

Logo-Anatomie

Schriftart

Questrial Regular

Wortmarke

Dark Slate Blue (#1F4364)

Element "E"

Light Grey Blue (#89BDE2)

Element "C"

Faded Blue (#6791C3)

Winkel

30° / 330°

Schutzraum

15% der Gesamthöhe

Typografie

Schriften & Hierarchie

Montserrat

Website
Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700 ExtraBold 800
Aa Bb Cc 123

Questrial

Logo / Wortmarke
Regular 400
Emden Consulting

Hierarchie

H12.5rem / 800
From Your Head Into Their Screen
H21.8rem / 700
Unsere Philosophie
H31.3rem / 700
Better Digital
H41rem / 600
Digitalisierung im Gesundheitswesen
Body0.95rem / 400
Digitalisierung, Vernetzung und Transformation im Gesundheitswesen erfordern klare Strukturen und verbindliche Ziele.
Navigation13px / 500
Expertise   Über uns   Karriere   Kontakt
Komponenten

UI-Elemente

Buttons

Icons

Lightbulb
Gear
Lightning
Person
People
LinkedIn
Anwendung

Do's & Don'ts

✓
Logo auf weissem Hintergrund
✓
Logo auf dunklem Hintergrund
✓
Ausreichend Schutzraum um das Logo
✗
Logo verzerrt / gestreckt
✗
Logo in falschen Farben
✗
Logo auf unruhigem Hintergrund
✗
Logo zu klein dargestellt
Layout

Spacing & Grid System

Container

30px
max-width: 1200px
30px

Breakpoints

Mobile
≤ 768px
Desktop
> 768px

Spacing Scale

8px
16px
24px
30px
40px
50px
60px
80px
Barrierefreiheit

Farbkontrast & WCAG

Light Grey Blue on Dark
~7.5:1
AAA ✓
White on Dark
~18:1
AAA ✓
Light Grey Blue on White
~2.5:1
FAIL ✗
Dark Slate Blue on White
~9:1
AAA ✓
Gray on White
~4.6:1
AA ✓
Motion

Animation & Interaktion

Hover Scale (Bouncy)

Hover me
transition: all 0.3s cubic-bezier(.25, .9, .7, 1.5);
transform: scale(1.025);

Standard Ease

Hover me
transition: all 0.3s ease;
transform: scale(1.05);

Smooth Ease-Out

Hover me
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1.03);

Translate Up on Hover

Hover me
transition: all 0.3s ease;
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(137,189,226,0.3);
Dark Mode

Dunkles Farbschema

Typografie auf dunklem Hintergrund

So wirken Texte und Farben auf dem dunklen Hintergrund der Website. Die Accent-Farbe (#89BDE2) sorgt fuer Akzente und Links.

Heller Text (rgba 255,255,255,0.85) fuer Hauptinhalte

Gedaempfter Text (rgba 255,255,255,0.6) fuer sekundaere Inhalte

Subtiler Text (rgba 255,255,255,0.4) fuer Hinweise

Farbpalette im Dark Mode

#89BDE2 Accent
#6a9fc4 Accent Dark
Card BG
#151c2b Primary
#0f1420 Dark

Buttons im Dark Mode

Link-Farbe im Dark Mode →