Brand Guide

Corporate Identity & Corporate Design

Electric Horses — Autohaus Richter + Zech GmbH · Wendelstein bei Nürnberg
Version 2.0.0 · 2026-02-13

Grundsätze

Designprinzipien

Fünf Leitsätze, die jede Designentscheidung fundieren.

01

Zeitlosigkeit

Klassische Gestaltungsregeln statt kurzlebiger Trends. Design, das in fünf Jahren genauso aktuell wirkt wie heute.

02

Klarheit

Großzügiger Weißraum, klare Hierarchie, reduzierte Elemente. Weniger ist mehr.

03

Konsistenz

Jedes Element folgt demselben System — Farben, Typografie, Abstände. Keine Ausnahmen.

04

Zugänglichkeit

WCAG 2.1 AA Kontraste, lesbare Schriftgrößen, Keyboard-Navigation. Design für alle.

05

Energie

Das Logo transportiert Dynamik und Kraft — das Design setzt das subtil fort, ohne laut zu sein.

Farbsystem

Farbpalette

Warmes Orange trifft kühlen Slate — komplementärer Kontrast für Premiumwirkung. Alle Farben sind vom Logo abgeleitet.

Primary — Electric Orange

Die Hauptmarkenfarbe. Pferdekörper und HORSES-Text im Logo. CTAs, Akzente, Identifikation.

50#FEF6EE
100#FDECD8
200#FAD4AF
300#F6B77C
400#F19947
500#F58220Pantone 151 CC:0 M:47 Y:87 K:4
600#DB6B0C
700#B6530B
800#91420F
900#733812
950#3E1C06

Accent — Bolt Red

Blitz-Akzent im Logo. Hover-States, Highlights, punktuelle Energie.

50#FFF4F1
100#FFE7E1
200#FFD3C8
300#FFB3A1
400#FF876D
500#E84525Pantone 1795 C
600#D63215
700#B3260E
800#922311
900#7A2114
950#400E06

Slate — Kühle Neutraltöne

Der blaue Unterton bildet den komplementären Gegenpart zum warmen Orange. Ersetzt die reinen Grautöne und verleiht dem Design Tiefe und Premiumcharakter.

50#F8FAFC
100#F1F5F9
200#E2E8F0
300#CBD5E1
400#94A3B8
500#64748B
600#475569
700#334155
800#1E293B
900#0F172APantone 296 C
950#020617

Funktionale Farben

success #059669
warning #D97706
error #DC2626
info #0284C7

Dark Surface

Die Marke auf dunklen Oberflächen — Slate-900 (#0F172A) statt purem Schwarz.

E-Roller

SILENCE S01+

Elektromobilität mit herausnehmbarem Akku. 115 km Reichweite.

Highlight-Text

Heading auf Dark

Body-Text auf Slate-900 nutzt Slate-300 für optimale Lesbarkeit ohne grellen Kontrast.

Kontrast (WCAG 2.1 AA)

Weiß auf Slate-900
17.4:1 — AAA
Slate-900 auf Weiß
17.4:1 — AAA
Logo-Text auf Weiß
7.8:1 — AAA
Slate-600 auf Weiß
6.3:1 — AA
Weiß auf Primary-700
5.2:1 — AA
Weiß auf Primary-500
2.7:1 — Nur Großtext
Primary auf Slate-900
6.5:1 — AA
Primary-300 auf Dark
9.7:1 — AAA
Primary-500 auf Weiß erfüllt nicht AA für Fließtext. Für Text auf hellem Grund Primary-700+ verwenden. Auf Slate-900 ist Primary-500 uneingeschränkt einsetzbar.
Schrift

Typografie

Zwei Schriftfamilien als Self-hosted Variable Fonts. Keine externen CDN-Requests — DSGVO-konform.

Outfit — Headlines

Variable Font · SIL OFL · Self-hosted · 32 KB

Medium 500 — Die Zukunft fährt elektrisch
SemiBold 600 — Die Zukunft fährt elektrisch
Bold 700 — Die Zukunft fährt elektrisch
ExtraBold 800 — Die Zukunft fährt elektrisch

Geometrische Sans-Serif mit modernem, selbstbewusstem Charakter. Die leicht gerundeten Formen transportieren Wärme ohne die technische Präzision zu verlieren.

Source Sans 3 — Fließtext

Variable Font · SIL OFL · Self-hosted · 56 KB (Normal + Italic)

Regular 400 — Electric Horses bietet Ihnen die neuesten Elektrofahrzeuge führender Marken. Von wendigen E-Scootern bis zu leistungsstarken Elektromotorrädern.
Medium 500 — Beratung, Verkauf, Vermietung und Werkstatt aus einer Hand.
SemiBold 600 — Ihr Partner für Elektromobilität in der Region Nürnberg.
Italic 400 — Zitate, Hervorhebungen und ergänzende Angaben.

Adobes professionelle Schrift mit exzellenter Lesbarkeit in allen Größen. Die humanistischen Proportionen machen Fließtext angenehm zu lesen.

Typografische Skala

7xl — 72px Electric
6xl — 60px Horses
5xl — 48px E-Mobilität
4xl — 36px Unsere Marken
3xl — 30px Werkstatt & Service
2xl — 24px Probefahrt vereinbaren
xl — 20px Jetzt anfragen
lg — 18px Lead-Text für Einleitungen und hervorgehobene Absätze.
base — 16px Fließtext — der Standard für alle Inhalte der Website.
sm — 14px Captions, Meta-Informationen und Fußnoten.
xs — 12px Labels, Badges, technische Angaben.

Text-Behandlungen

Overline

Outfit SemiBold, 12px, Uppercase, Wide-Tracking, Primary-600

Lead-Text — Source Sans 3, 18px, Slate-600, Zeilenhöhe 1.75

Caption — Source Sans 3, 14px, Slate-400

System

Spacing & Layout

Ein 4px-Basis-Grid sorgt für harmonische Proportionen auf allen Ebenen.

Spacing-Skala

1 4px
2 8px
3 12px
4 16px
5 20px
6 24px
8 32px
10 40px
12 48px
14 56px
16 64px
20 80px
24 96px
32 128px
0.5 2px
1.5 6px
2.5 10px

Layout

Max-Width
1280px

Zentrierter Content-Container

Grid
12 Spalten

Flexibles Spaltenlayout

Gutter
24px / 16px

Desktop / Mobile

Padding
48px / 20px

Container-Seitenränder

Breakpoints

NameBreiteKontext
sm640pxSmartphones (Landscape)
md768pxTablets (Portrait)
lg1024pxTablets (Landscape) / kleine Desktops
xl1280pxDesktop (Standard)
2xl1536pxGroße Displays

Border-Radius

sm
4px
default
6px
md
8px
lg
12px
xl
16px
2xl
20px
full
9999px

Schatten-Elevation

xs
sm
default
md
lg
xl
Visuell

Gestaltungselemente

Blitz-Motiv

Der Blitz aus dem Logo als eigenständiges grafisches Element — Akzent, Trenner, Dekoration. Sparsam einsetzen.

Bildsprache

Ja
  • Helle, natürliche Beleuchtung
  • Klare Kompositionen mit Luft
  • Fahrzeuge in Bewegung oder urbanem Kontext
  • Authentische Situationen
  • Warme Farbtemperatur
Nein
  • Unscharfe oder verwackelte Fotos
  • Unter- oder überbelichtete Aufnahmen
  • Fotos mit zu geringer Auflösung
  • Chaotische Schnappschüsse ohne klare Intention
  • Überbearbeitete / stark gefilterte Fotos
  • Generische Stockfotos ohne Bezug

Iconografie

Empfohlen

Phosphor Icons

MIT-Lizenz · 1.200+ Icons × 6 Gewichte · phosphoricons.com · @phosphor-icons/react

Phosphor bietet sechs Stil-Varianten pro Icon — von Thin bis Duotone. Die geometrisch-moderne Formensprache harmoniert mit dem Outfit-Heading-Font und erlaubt feinste visuelle Hierarchie. Durch den Duotone-Stil lassen sich Brand-Farben direkt in die Iconografie integrieren.

Warum Phosphor?

6 Stil-Varianten

Thin, Light, Regular, Bold, Fill, Duotone — für jede Situation das passende Gewicht.

Duotone für Brand-Farben

Zweifarbige Icons transportieren die Markenfarben direkt in die Iconografie. Perfekt für Feature-Highlights und Hero-Bereiche.

Geometrisch & Modern

Die klare Geometrie spiegelt den Charakter der Outfit-Headings wider — technisch, aber warm.

MIT-Lizenz, keine Attribution

Frei für kommerzielle Nutzung, keine Vermerke nötig. Tree-shakeable, leichtgewichtig.

Stil-Varianten & Hierarchie

Jede Variante hat eine definierte Rolle im Design-System.

Regular Standard-UI

Navigation, Formulare, Listen — der Default für alle Interface-Elemente.

Bold Hervorhebungen

CTAs, wichtige Labels, Sektions-Header — stärker und aufmerksamkeitslenkend.

Fill Aktive States

Selected-Tabs, aktive Navigation, bestätigte Zustände — gefüllte Fläche = aktiv.

Duotone Brand-Akzente

Feature-Highlights, Hero-Bereiche, Marketing — zweifarbing mit Brand-Orange als Akzent.

Light Subtile Elemente

Dekorative Icons, sekundäre Info, Hintergrund-Elemente — leicht und unaufdringlich.

Thin Dekorativ

Große dekorative Darstellungen, Hintergrund-Patterns, übergroße Illustrationen.

Größen

16px Inline-Text, Badges, Labels, Breadcrumbs
20px Buttons, Navigation, Tabs, Menü-Items
24px Standard — Cards, Listen, Formulare (Default)
32px Feature-Highlights, Sektions-Header, Service-Icons
48px Hero-Bereiche, große Feature-Cards, Marketing

Farbregeln

Helle Oberflächen
Slate-600
Standard
Primary-500
Interaktiv
Primary-600
Hover / Aktiv
Slate-400
Deaktiviert
Dunkle Oberflächen
Slate-300
Standard
Primary-400
Interaktiv
Weiß
Hover / Aktiv
Slate-600
Deaktiviert

Relevante Icons für E-Mobility

Phosphor bietet direkte Icons für die meisten Anwendungsfälle. Hier die wichtigsten Kategorien:

Fahrzeuge & Transport

Car, CarSimple, Motorcycle, Moped, Bicycle, Van, Truck, Steering Wheel

Energie & Laden

Lightning, Battery (Full/High/Medium/Low/Empty/Charging/Plus), Plug, PlugCharging, ChargingStation, SolarPanel

Shop & E-Commerce

ShoppingCart, ShoppingBag, CreditCard, CurrencyEur, Tag, Receipt, Package, Truck

Navigation & UI

House, MagnifyingGlass, User, Gear, Bell, ArrowRight, Check, X, Plus, Minus, CaretDown, List, FunnelSimple

Kontakt & Kommunikation

Phone, Envelope, MapPin, Clock, CalendarBlank, ChatCircle, WhatsappLogo

Services & Werkstatt

Wrench, GearSix, Shield, Certificate, Handshake, Key, Toolbox

Alternative: Iconoir

Iconoir MIT-Lizenz · 1.600+ Icons · iconoir.com · iconoir-react

Iconoir bietet dedizierte EV-Icons, die in Phosphor fehlen: ev-charge, ev-plug, ev-plug-charging, ev-station, ev-tag. Für spezifische E-Mobility-Darstellungen (z.B. Ladesäulen-Finder, Reichweiten-Anzeige) kann Iconoir gezielt ergänzend eingesetzt werden.

Beide Bibliotheken nutzen Stroke-basierte Ästhetik (Iconoir: 1.5px, Phosphor Regular: 1.5px), was ein konsistentes Mischen ermöglicht.

Vergleich der evaluierten Bibliotheken

BibliothekIconsStileLizenzEV-IconsBewertung
Phosphor1.200+6MITGutEmpfohlen
Iconoir1.600+1MITExzellentErgänzung
Tabler5.9842MITGutAlternative
Lucide1.000+1MITGutZu einfach
Remix Icon2.4942Apache 2.0MittelWeniger modern
Heroicons4504 GrößenMITUnzureichendNicht geeignet
Solar Icons7.000+6CC BY 4.0UnbekanntAttribution nötig

Do's & Don'ts

Ja
  • Konsistent eine Stil-Variante pro Kontext verwenden
  • Icons immer mit mindestens 8px Abstand zu Text
  • Farben aus dem Token-System (Slate/Primary)
  • 24px als Standard-Größe beibehalten
  • Duotone nur für ausgewählte Highlights
Nein
  • Verschiedene Icon-Bibliotheken mischen (außer Iconoir-Ergänzung)
  • Icons unter 12px verwenden
  • Dekorative Icons ohne semantischen Zweck überladen
  • Farben verwenden, die nicht im Token-System definiert sind
  • Fill- und Outline-Stile im gleichen Kontext mischen
UI

Komponenten

Grundlegende UI-Elemente, die das Design-System in Aktion zeigen.

Buttons

Produkt-Cards

E-Roller

SILENCE S01+

Der meistverkaufte Elektroroller Europas. 115 km Reichweite, herausnehmbarer Akku.

ab 6.390 €
E-Motorrad

ZERO SR/F

190 km Reichweite, 110 PS. Das ultimative Elektro-Naked-Bike für Enthusiasten.

ab 22.990 €
Micro-Car

MICROLINO

Die Kugel. 230 km Reichweite, legendäres Design, passt in jede Parklücke.

ab 21.690 €

Formular

Alerts

Erfolg: Ihre Anfrage wurde gesendet.
Hinweis: Dieses Fahrzeug ist nur auf Bestellung verfügbar.
Fehler: Bitte füllen Sie alle Pflichtfelder aus.
Info: Probefahrten nach Terminvereinbarung.
Druckmedien

Print-Spezifikationen

CMYK, Pantone, RAL und Materialvorgaben für alle Druckerzeugnisse.

Druckfarben

primary-orange C:0 M:47 Y:87 K:4 Pantone 151 C RAL 2003 (Pastellorange, nächste Annäherung) HEX: #F58220
accent-red C:0 M:70 Y:84 K:9 Pantone 1795 C HEX: #E84525
logo-text-dark C:0 M:0 Y:0 K:70 Pantone Cool Gray 10 C HEX: #4D4D4D
midnight C:85 M:65 Y:35 K:65 Pantone 296 C HEX: #0F172A
black C:0 M:0 Y:0 K:100 HEX: #000000
white C:0 M:0 Y:0 K:0 HEX: #FFFFFF

Visitenkarte

Logo
Max Mustermann
Verkaufsberater E-Mobilität

T: 09129 / 123 456
max@electric-horses.de
www.electric-horses.de
Logo
Spezifikationen
  • Format: 85 × 55 mm
  • Beschnitt: 3mm umlaufend
  • Papier: 350 g/m² Bilderdruckkarton, matt kaschiert
  • Druck: 4/4-farbig (Euroskala)
  • Optional: Partieller UV-Lack auf Logo

Weitere Druckmedien

Briefpapier

DIN A4, 100 g/m² Offset, naturweiß. Logo oben rechts, 15mm vom Rand. Fußzeile: Inter 7pt, Slate-400. Akzentlinie 0.5pt, Primary-500.

Fahrzeugbeschriftung

Mindestbreite 200mm. ORACAL 751C Hochleistungs-Plotterfolie. Pantone 151 C. Auf dunklen Fahrzeugen: weiße Logo-Variante.

Typografie Print

Body: 10pt / 14pt Zeilenabstand. Minimum: 8pt. Headlines: Outfit SemiBold/Bold.

Technisch

Design Tokens

Maschinenlesbare Designwerte für die Implementierung. Self-hosted, keine Abhängigkeiten.

CSS Custom Properties

/* Farben */
color: var(--color-primary-500);
background: var(--color-surface-dark);

/* Typografie */
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--font-bold);

/* Spacing */
padding: var(--space-4) var(--space-6);
gap: var(--space-4);

/* Schatten & Radius */
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);

/* Focus */
box-shadow: var(--focus-ring);

Dateien

src/data/design-tokens.jsonMaschinenlesbare Tokens (JSON)
src/styles/tokens.cssCSS Custom Properties + @font-face
public/fonts/*.woff2Self-hosted Variable Fonts (88 KB total)