Richtig
- ✓ Auf weißem oder schwarzem Hintergrund verwenden
- ✓ Mindestgröße: 24px digital, 10mm Print
- ✓ Schutzzone: Höhe des „R" auf allen Seiten
- ✓ Seitenverhältnis immer beibehalten
Logo & Markenzeichen
Das Hexagon-Logo ist das zentrale Erkennungszeichen der Marke.
Logo · Primär
Logo · Dunkel
Favicon · Kompakt
Falsch
- ✗ Logo verzerren oder rotieren
- ✗ Farben ändern oder Effekte hinzufügen
- ✗ Auf unruhigen Hintergründen platzieren
- ✗ Unter Mindestgröße verwenden
Farbpalette
Reduzierte Palette. Crimson Red als einziger Akzent auf neutraler Basis.
Crimson Red
HEX #C41E3A
RGB 196, 30, 58
CMYK 0 / 85 / 70 / 23
Primärer Akzent, CTAs, Logo, Highlights
Red Dark
HEX #A01A2E
RGB 160, 26, 46
CMYK 0 / 84 / 71 / 37
Hover-Zustände, Tiefe
Primary Black
HEX #1A1A1A
RGB 26, 26, 26
CMYK 0 / 0 / 0 / 90
Headlines, Footer, primärer Text
Dark Gray
HEX #2D2D2D
RGB 45, 45, 45
CMYK 0 / 0 / 0 / 82
Sekundärer dunkler Text
Steel Light
HEX #4A4A4A
RGB 74, 74, 74
CMYK 0 / 0 / 0 / 71
Body-Text, Icons
Text Muted
HEX #666666
RGB 102, 102, 102
CMYK 0 / 0 / 0 / 60
Labels, Muted Text
Neutral Gray
HEX #E8E8E8
RGB 232, 232, 232
CMYK 0 / 0 / 0 / 9
Borders, Trennlinien
Light Gray
HEX #F5F5F5
RGB 245, 245, 245
CMYK 0 / 0 / 0 / 4
Section-Hintergründe
White
HEX #FFFFFF
RGB 255, 255, 255
CMYK 0 / 0 / 0 / 0
Basis-Hintergrund, Cards
Success Green
HEX #4A7C4A
RGB 74, 124, 74
CMYK 40 / 0 / 40 / 51
Erfolgszustände, Checkmarks
Verwendungsregeln
- → Crimson Red nur für Akzente, CTAs und Markenzeichen — nie als großflächiger Hintergrund
- → Primary Black für Headlines und Footer-Hintergrund
- → Grau-Abstufungen für Text-Hierarchie und Borders
- → Weiß/Light Gray im Wechsel für Sektions-Hintergründe
- → Success Green nur für positive Zustände (Checkmarks, Pass-Labels)
Typografie
Drei Schriftfamilien. Klare Rollen. Keine Ausnahmen.
Display & Headlines
Playfair Display
Weights: 400, 700
Wir reden nicht. Wir bauen.
Markenname, Section-Titel, Hero-Text. Immer Uppercase für den Markennamen.
Body & UI
Inter
Weights: 300, 400, 500, 600, 700
Handwerk schlägt Vorlage. Performance schlägt Design-Trend.
Fließtext, Navigation, Buttons, Card-Überschriften. Primäre Leseschrift.
Technical & Labels
IBM Plex Mono
Weights: 400, 500, 600, 700
PHASE-01 · HANDWERK · PERFORMANCE · ERGEBNIS
Badges, Label-Plates, Code, Tags, Metriken. Immer Uppercase + Tracking.
Aa
Playfair Display Bold
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
1234567890
NOPQRSTUVWXYZ
abcdefghijklm
1234567890
Aa
Inter Semibold
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
1234567890
NOPQRSTUVWXYZ
abcdefghijklm
1234567890
Aa
IBM Plex Mono Medium
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
1234567890
NOPQRSTUVWXYZ
abcdefghijklm
1234567890
Tonalität
Wie Redline klingt — in jedem Text, jeder E-Mail, jedem Gespräch.
Klartext statt Blabla
Kurze Sätze. Aktive Sprache. Keine Füllwörter. Wenn ein Satz ohne ein Wort funktioniert, streiche es.
Ergebnisse statt Versprechen
Zeigen, nicht behaupten. Zahlen statt Adjektive. Konkrete Beispiele statt abstrakte Claims.
Technisch, nicht arrogant
Expertise zeigen, ohne herabzuschauen. Fachbegriffe nur, wenn sie der Klarheit dienen — nie zum Beeindrucken.
Deutsch-First
Primär Deutsch. Englische Fachbegriffe nur wenn branchenüblich (Landing Page, CMS, SEO). Kein Denglisch.
So schreiben wir
- "Wir bauen deine Website um — als Arbeitsprobe."
- "Das dauert Tage, nicht Monate."
- "Du kaufst keine Theorie."
So nicht
- "Wir bieten innovative, ganzheitliche Digitallösungen."
- "Unser agiler Prozess maximiert Ihre Synergien."
- "Wir begleiten Sie auf Ihrer digitalen Reise."
Bildsprache & Ikonografie
Industrial. Reduziert. Rot auf Schwarz-Weiß.
Visuelle Prinzipien
- → Monochromer Stil mit rotem Akzent als einzigem Farbsignal
- → Klare Linien, hoher Kontrast, keine Verläufe in Flächen
- → Geometrische Formen statt illustrativer Icons
- → Industrial-Ästhetik: Label-Plates, Seriennummern, Datenfelder
- → Kein Stock-Material — lieber abstrakt als generisch
Ikonografie
■
Quadrat
▲
Dreieck
◆
Raute
●
Kreis
◉
Bullseye
Geometrische Symbole ersetzen klassische Icons. Jedes Service-Feld hat ein festes Symbol.
Layout-Prinzipien
Konsistente Abstände, klare Hierarchie, responsive Grid.
1200px
Max-Width
Content-Container
4rem / 2.75rem
Section Padding
Desktop / Mobile
8px (lg)
Card Radius
Buttons: 1px
1.5rem
Grid Gaps
1rem auf Mobile
Responsive Breakpoints
Desktop> 1024px
Tablet768 – 1024px
Mobile480 – 768px
Small< 480px
