Brand Style Guide

02

Farbpalette

Primärfarben

Black
#1d1d1d
Primary · Text · Background (dark)
White
#ffffff
Surface · Reverse text
Off-White
#f6f6f4
Page background · Cards

Graustufen

Gray Dark
#595959
Secondary text · Icons
Gray Mid
#909090
Labels · Placeholders
Gray Light
#e8e8e8
Borders · Dividers

Dark Mode Overlay-Töne

White 45%
rgba(255,255,255,0.45)
Body text on dark
White 18%
rgba(255,255,255,0.18)
Borders on dark · Dividers
White 8%
rgba(255,255,255,0.08)
Subtle hover / accent areas

03

Typografie

Playfair Display Headings · Display · Serife · Google Fonts
Display Gutes Design.
H1 / 2.2rem Kreativität trifft Handwerk.
H2 / 1.5rem Projekte mit Haltung.
Kursiv / Akzent manchmal braucht es Zeit.
IBM Plex Sans Condensed Body · UI Text · Sans-Serif · Google Fonts
Lead / 300 Ich begleite Projekte von der Idee bis zur fertigen Umsetzung — mit Blick für das Wesentliche.
Body / 400 Print, Web, Fotografie, UX/UI — vier Disziplinen, ein Qualitätsanspruch.
Strong / 600 Emrach Achmet Oglou
Caption / 300 eoglou | media design — Stolberger Str. 36–38, 52068 Aachen
IBM Plex Mono Labels · Navigation · Badges · Metadaten · Google Fonts
Label / UC — Bald wieder erreichbar
Body / 300 UX · UI · Print · Web · Photography · Brand
Code / inline eoglou | media design

Live-Beispiel — Typografisches Zusammenspiel

— Bald wieder erreichbar

Gutes Design
braucht manchmal
etwas Zeit.

Die Seite befindet sich gerade in der Überarbeitung. Sie möchten ein Projekt starten oder haben eine Anfrage?

04

Abstände & Grid

Spacing-Skala

4px
XS
8px
S
16px
M
24px
L
40px
XL
64px
2XL
96px
3XL

Border-Radius & Kanten

2px
Buttons / Tags
4px
Cards / Inputs
0px
Dividers / Rules
50%
Logo / Avatar

05

UI-Komponenten

Buttons — Light
Primär Sekundär Ghost →
Buttons — Dark
Zum Briefing → Ghost
Tags & Badges
Print Web UX/UI Photography
Status-Dots
Online Wartung Inaktiv
Formularfelder
Trennelemente
oder

06

Sprache & Ton

Präzise

Wenige Worte, klare Aussage. Kein Fülltext, keine Floskeln. Jeder Satz trägt etwas.

Beispiel

„Briefing starten. Wir melden uns innerhalb von 24 Stunden."

Ruhig

Keine Ausrufezeichen, kein Hype. Die Qualität der Arbeit spricht — nicht die Beschreibung.

Beispiel

„Gutes Design braucht manchmal etwas Zeit."

Direkt

Du-Form, klare Handlungsaufforderungen, kein Konjunktiv wo eine Aussage gemeint ist.

Beispiel

„Zum Briefing — starte dein Projekt."

Professionell

Kein Social-Media-Ton, keine Emojis. Fachsprache wo sinnvoll, sonst klar und verständlich.

Beispiel

„UX · UI · Print · Web · Photography"

Do & Don't

✓  Do
„Briefing starten"
„Wir melden uns innerhalb von 24 Stunden."
„Print · Web · Photography · UX/UI"
„eoglou | media design"
Monospace für Labels, Serif für Headlines
✕  Don't
„Jetzt anfragen!!!" (Ausrufezeichen, Hype)
„Wir würden uns freuen, wenn…" (Konjunktiv)
Emojis in offiziellen Texten
„eoglou grafikdesign" (alter Betriebsname)
Logo verzerren, skalieren ohne Proportionen