📖
Einführung

PACE Design System 2.0

Living Style Guide für die PACE Markenarchitektur. Zentrale Referenz für Designer, Entwickler und alle Stakeholder. Aufgebaut nach dem Token + Component-Driven Prinzip.

Ein Design System ist wie ein Baukasten: Es definiert alle visuellen Bausteine einer Marke — Farben, Schriften, Buttons, Karten — damit alle Webseiten und Apps einheitlich aussehen. Statt jedes Mal von Null zu beginnen, greifen alle auf die gleichen Zutaten zurück.
T
Tokens
Farben, Schriften, Abstände, Motion
➔
Button
Base
Buttons, Inputs, Badges
➔
Composite
Navigation, Cards
➔
Feature
Roadmap, Hero Sections
Token + Component-Driven Design ersetzt das Atomic-Design-Modell durch einen pragmatischeren Ansatz: Tokens bilden das Fundament — alle visuellen Entscheidungen wie Farben, Schriften und Abstände, zentral definiert. Base Components (z. B. ein Button) sind eigenständig und überall wiederverwendbar. Composite Components (z. B. eine Card) kombinieren mehrere Base Components. Feature Components (z. B. die Roadmap Steps) sind projektspezifisch und enthalten PACE-Geschäftslogik.

Letzte Aktualisierung: März 2026 · Kontakt: design@pace.car

Introduction — Marke

Markenarchitektur

PACE operiert mit einer klaren Markenarchitektur für unterschiedliche Zielgruppen. Jede Marke hat eigene Akzentfarben und Gradienten.

PACE hat zwei Haupt-Marken: PACE Drive richtet sich an Autofahrer (mit gelbem Akzent) und PACE Cloud an Geschäftskunden wie Tankstellen (mit pinkem Akzent). Beide teilen das Cyan-Blau als Grundfarbe, aber sprechen ihre Zielgruppen unterschiedlich an.
PACE Mobility — Umbrella Brand
Übergeordnete Unternehmensmarke. Primärfarbe: Cyan #00CCF0
PACE Drive — B2C
Zielgruppe: Endkunden
Akzentfarbe: Gelb #FFDA01
Gradient: Cyan → Gelb
Tonalität: Freundlich, Du-Form
PACE Cloud — B2B
Zielgruppe: Tankstellen, OEMs, Flotten
Akzentfarbe: Pink #E62048
Gradient: Cyan → Pink
Tonalität: Professionell, Sie-Form
Tokens — Farben

Farbsystem

Triadisches Schema (Cyan–Gelb–Pink) + Neutraltöne + Statusfarben. Klicke auf eine Farbe, um den Hex-Wert zu kopieren.

Farben sind das Fundament jeder Marke. Unser System besteht aus drei Markenfarben (Cyan, Gelb, Pink), Grautönen für Text und Hintergründe, und Statusfarben (Grün = Erfolg, Rot = Fehler, Orange = Warnung). Für die dunkle Cloud-Webseite gibt es zusätzlich spezielle dunkle Hintergrundfarben.

Primärfarben

Brand Primary
HEX: #00CCF0
RGB: 0, 204, 240
--brand-primary
Accent B2C (Drive)
HEX: #FFDA01
RGB: 255, 218, 1
--brand-accent-b2c
Accent B2B (Cloud)
HEX: #E62048
RGB: 230, 32, 72
--brand-accent-b2b

Neutrale Farben

Black
#232729
--black
Dark Grey
#2e363a
--dark-grey
Mid Grey
#64747d
--mid-grey
Grey
#a0aeb5
--grey
Light Grey
#edf1f2
--light-grey
White
#ffffff
--white

PACE Cloud — Dark Theme Tokens

Spezifische Farbwerte für die dunkle PACE Cloud Website (B2B). Diese erweitern die Basispalette.

Cloud BG
#0F1215
--cloud-bg
Cloud Surface
#161B20
--cloud-bg2
Cloud Card
#1C2228
--cloud-card
Cloud Text
#F0F2F5
--cloud-text
Cloud Muted
#A0AEB5
--cloud-muted
Cloud Dim
#64747D
--cloud-dim

Statusfarben

Success
#76b532
--success
Warning
#ff9601
--warning
Error
#e2001a
--error
Info
#00CCF0
--info

Theme-Vergleich

Gegenüberstellung der Dark- und Light-Tokens für Hintergründe, Text und Borders.

🌙 Dark (PACE Cloud)
bg-page: #0F1215
bg-surface: #161B20
bg-card: #1C2228
text-primary: #F0F2F5
text-secondary: #A0AEB5
text-tertiary: #64747D
border: rgba(255,255,255,0.08)
☀️ Light (PACE Drive)
bg-page: #f7f9fa
bg-surface: #ffffff
bg-card: #ffffff
text-primary: #232729
text-secondary: #2e363a
text-tertiary: #64747d
border: #edf1f2

Gradienten

PACE Drive
Drive Gradient (B2C)

Cyan → Gelb — warm, einladend

linear-gradient(135deg, #00CCF0 0%, #FFDA01 100%)
PACE Cloud
Cloud Gradient (B2B)

Cyan → Pink — technisch, kraftvoll

linear-gradient(135deg, #00CCF0 0%, #E62048 100%)
PACE Brand
Tri-Color Gradient

Gelb → Cyan → Pink — vollständige Marke

linear-gradient(135deg, #FFDA01 0%, #00CCF0 50%, #E62048 100%)
Hinweis: Gelb auf Weiß
#FFDA01 NICHT als Textfarbe auf weißem Hintergrund! Kontrast nur 1.37:1 — WCAG Fail. Nur auf dunklen Hintergründen oder als Akzent in Gradienten verwenden.
Tokens — Typografie

Schriftsystem

Inter ist die primäre Schriftfamilie für alle digitalen Anwendungen. Die Logo-Wortmarke nutzt exklusiv Proxima Soft.

Typografie bedeutet: Welche Schriftart nutzen wir, in welchen Größen und Dicken? Wir verwenden „Inter“ — eine moderne, gut lesbare Schrift. Überschriften sind groß und fett, Fließtext mittelgroß, kleine Hinweise klein. Das sorgt für eine klare Hierarchie: Man erkennt sofort, was wichtig ist.

Schriftschnitte

The quick brown fox jumps over the lazy dog
Light
300
The quick brown fox jumps over the lazy dog
Regular
400
The quick brown fox jumps over the lazy dog
Medium
500
The quick brown fox jumps over the lazy dog
Semibold
600
The quick brown fox jumps over the lazy dog
Bold
700
The quick brown fox jumps over the lazy dog
Extrabold
800

Typografie-Skala

ElementSizeWeightLine HeightLetter Spacing
H1 (Hero)clamp(2.5rem, 5vw, 4.5rem)Extrabold (800)1.05-0.03em
H2clamp(2rem, 4vw, 3rem)Bold (700)1.15-0.02em
H3clamp(1.3rem, 2.5vw, 1.8rem)Semibold (600)1.3-0.015em
H418–20pxSemibold (600)1.4-0.01em
Body Large18–20pxRegular (400)1.60
Body16pxRegular (400)1.60
Small14pxRegular (400)1.50
Caption12pxMedium (500)1.40.01em
Overline11pxBold (700)1.20.1em
Stat Numberclamp(2.5rem, 4vw, 2.8rem)Extrabold (800)1.0-0.02em

Live-Vorschau: PACE Cloud (Dark)

Overline / Section Label
Die Zukunft
der Mobilität
Eine Plattform für Tanken, Waschen und Laden — europaweit vernetzt, digital bezahlt.
15
Länder
1,8 Mio.
Nutzer
50 Mio.
Transaktionen
Responsive Typografie
Headlines nutzen clamp() für fluid-responsive Größen. Dadurch skaliert die Schrift zwischen Mobile und Desktop ohne Breakpoints.
Typografische Sonderzeichen
Zeichen Name Unicode Verwendung
– Halbgeviertstrich (En Dash) U+2013 / – Gedankenstriche im Fließtext, immer mit Leerzeichen: Bezahlen – direkt und sicher
— Geviertstrich (Em Dash) U+2014 Nicht verwenden – im Deutschen nicht üblich

Regel: Als Gedankenstrich wird ausschließlich der Halbgeviertstrich (–) verwendet, mit je einem Leerzeichen davor und danach. Der Geviertstrich (—) ist nicht zulässig.

Tokens — Spacing

Spacing & Border Radii

4px Grundraster, 8px Basis-Einheit. Konsistente Abstände über alle Komponenten.

Spacing (Abstände) regelt, wie viel Platz zwischen Elementen ist. Statt willkürliche Werte zu nutzen, arbeiten wir mit einem festen Raster: Alles basiert auf Vielfachen von 4 Pixeln. Das sorgt dafür, dass Seiten aufgeräumt und harmonisch aussehen. Border Radii bestimmen, wie rund Ecken sind — von fast eckig bis kreisrund.

Spacing-Skala

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-6
24px
--space-8
32px
--space-12
48px
--space-16
64px
--space-24
96px

Border Radii

XS
4px
SM
6px
MD
8px
LG
12px
XL
16px
2XL
24px
Full
9999px
Base Component

Buttons

Ein durchdachtes Button-System mit 5 Varianten. Der Prominent-Button hebt sich durch einen wabernden inneren Cyan↔Rot-Verlauf ab. Alle animierten Buttons nutzen „Breathing“-Animationen, die einen lebendigen Eindruck vermitteln ohne abzulenken.

Buttons sind die wichtigsten Klick-Elemente. Unser System unterscheidet nach Wichtigkeit: Der „Prominent“-Button ist am auffälligsten — er hat einen leuchtenden Rand, der sanft zwischen Blau und Rot pulsiert, plus einen inneren Farbverlauf. Je weniger wichtig die Aktion, desto dezenter der Button. So erkennen Nutzer auf einen Blick, was die Hauptaktion ist.
border:2px, V4 bold gradient, 4s
border:1px, 5s breathe
no animation
pill shape, 4s
Spezifikationen

Wichtig: Alle Buttons verwenden border-radius: 10px (--radius-btn). Dies weicht bewusst vom Standard --radius-md (8px) ab, um Buttons optisch hervorzuheben.

Variant Padding Border Font-weight Animation
Prominent 14px 32px 2px 700 prominentBreathe 4s
Primary 14px 32px 1px 600 primaryBreathe 5s
Secondary 14px 32px 1px 500 none
Karriere 8px 20px 1.5px 600 karriereBreathe 4s
Base Component

Formulare

Konsistente Form-Elemente mit subtiler Cyan-Fokusierung und standardisiertem Error-State.

Formulare sind Eingabefelder, in denen Nutzer Text eingeben, Optionen auswählen oder Nachrichten schreiben. Wenn man ein Feld anklickt, leuchtet der Rand cyan auf — das zeigt klar, wo man gerade tippt. Ist eine Eingabe fehlerhaft, wird der Rand rot. So wissen Nutzer sofort, was korrigiert werden muss.
Input Fields
Dieses Feld enthält einen Fehler
Select & Textarea
Fokus & States
State Border-color Box-shadow
Default rgba(255,255,255,0.08) none
Focus #00CCF0 0 0 0 3px rgba(0,204,240,0.1)
Error #E62048 none
Base Component

Badges & Tags

Kleine Label-Komponenten für Kategorisierung, Status und Feature-Kennzeichnung.

Badges sind kleine farbige Etiketten, die Zusatzinformationen vermitteln: „Neu“, „Beta“, oder Statusanzeigen wie „Erfolgreich“ und „Fehler“. Sie fallen durch ihre Farbe auf und helfen Nutzern, Inhalte schnell einzuordnen, ohne langen Text lesen zu müssen.
DESIGN SYSTEM
Success
Warning
Error
Info
Pill-Style Tags
React
TypeScript
Design System
Figma
Hero Pills (Page Indicator)
Connected Car Platform
Fueling
Flottenmanagement

Regel: Hero Pills verwenden text-transform: uppercase, color: #00CCF0 und font-weight: 700. Letter-spacing: 0.08em.

Feature Labels
Neu
Enterprise
Beta
Feature Component

Roadmap Steps (V2F)

Animierte Schritt-für-Schritt Darstellung mit SVG-Straße, fahrendem LKW und Glasmorphism-Cards. Wird auf allen Produktseiten (Fueling, Washing, Charging) eingesetzt.

Die Roadmap zeigt den Ablauf eines Prozesses als animierte Straßenkarte. Ein LKW fährt eine kurvige Straße entlang, an der drei Stationen als pulsierende Punkte markiert sind. Daneben schweben Info-Karten mit Icon, Nummer und Beschreibung. Auf Mobilgeräten wird die SVG-Straße ausgeblendet und durch eine vertikale Timeline mit Gradient-Linie (Cyan → Rot) ersetzt.
Aufbau
ElementWert
Scene Background#0F1215 (--cloud-bg)
Scene Border1px solid rgba(255,255,255,0.04)
Scene Radius16px (--radius-xl)
Dot-Gridradial-gradient(rgba(0,204,240,0.03)), 32px Raster
Straße (Außen)#1a2029, 32px breit
Straße (Innen)#232b35, 22px breit
Mittelstreifenrgba(255,255,255,0.06), gestrichelt 10/10
Glow-TrailGradient #00CCF0 → #E62048, 6s Animation
StationenPulsierende Kreise, 2× Cyan + 1× Rot (Ziel)
FahrzeugLKW (🚛), animateMotion auf SVG-Pfad
Info-Cards
EigenschaftWert
Backgroundrgba(28,34,40,0.95) + backdrop-filter: blur(10px)
Border1px solid rgba(0,204,240,0.12)
Radius16px (--radius-xl)
Nummer#00CCF0, 22px, font-weight 800
IconStreamline Light SVG, 32×32px
Titel#F0F2F5, 15px, font-weight 700
Text#A0AEB5, 13px, line-height 1.5
HovertranslateY(-4px) + box-shadow cyan glow
Mobile Fallback (<768px)

SVG-Straße und Dot-Grid werden ausgeblendet. Cards werden vertikal gestapelt mit einer Gradient-Linie (Cyan → Rot) als Timeline-Indikator links.

Composite Component

Cards

Erhöhte Container mit subtilen Hover-Effekten. Alle nutzen die Standard-Easing cubic-bezier(0.23,1,0.32,1) für 0.4s Transition.

Cards sind die rechteckigen Kästen, in denen Inhalte gruppiert werden — z. B. ein Produkt mit Bild und Beschreibung. Wenn man mit der Maus darüber fährt, hebt sich die Card leicht an und bekommt einen feinen blauen Rand. Das vermittelt Interaktivität: „Hier kannst du klicken.“
Base Card
Eine einfache Card mit dezenter Hover-Animation nach oben.
Image Placeholder
Content Card
Card mit Bild-Placeholder und Content.
Logo
Card Spezifikationen
Property Value
Background #1C2228
Border 1px solid rgba(255,255,255,0.04)
Border-radius 16px (--radius-xl)
Hover transform translateY(-6px)
Hover shadow 0 20px 60px rgba(0,0,0,0.4)
Transition all 0.4s cubic-bezier(0.23,1,0.32,1)
Service Cards (Schnelleinstiege)

Die drei Produkt-Cards auf der Homepage (Fueling, Washing, Charging) nutzen eine erweiterte Card-Variante mit größerem Bild und Lottie-Icon-Badge.

Property Value
Bildhöhe 220px
Titel 1.4rem / font-weight: 700
Body Padding 36px 28px 28px
Icon-Badge 52×52px, border-radius: 50%, kein Border, kein Schatten
Icon-Badge Position absolute, top: 196px, left: 28px (halb über Bildkante)
Icon-Badge Inhalt Lottie-Animation (28×28px), loop: true, autoplay: true
Lottie-Dateien fueling.json, washing.json, charging.json (64×64, 30fps)
CTA-Link 14px / font-weight: 600 / var(--brand-primary) / Pfeil animiert +4px bei Hover

Hinweis: Die Lottie-Animationen werden inline im HTML eingebettet (nicht per Fetch), um CORS-Probleme bei lokaler Vorschau zu vermeiden. Alle drei Cards sind als <a>-Links zu den jeweiligen Produktseiten implementiert.

Feature Component

Hero Sections

Large-Scale Komponenten für visuelles Impact. Gradient-Text, floating Orbs und Overlay-Layer schaffen Tiefe.

Der Hero-Bereich ist das große Bild ganz oben auf einer Seite — der erste Eindruck. Unsere Heroes nutzen „Gradient-Text“ (Text mit Farbverlauf von Blau zu Rot) und schwebende, unscharfe Lichtkreise („Orbs“) im Hintergrund. Das erzeugt Tiefe und eine moderne, technologische Atmosphäre.
Gradient Text
Magische Innovation
linear-gradient(90deg, #00CCF0 20%, #E62048 80%) mit gradientShift animation
Floating Orbs Demo
Hero Spezifikationen
Element Property Value
Gradient Text background linear-gradient(90deg, #00CCF0, #E62048)
Gradient Text animation gradientShift 6s ease-in-out infinite
Orbs filter blur(40px–50px)
Orbs animation orbFloat 4s–6s ease-in-out infinite
Tokens — Motion

Animationen & Motion

Ein durchdachtes Bewegungs-System mit 8 Keyframe-Animationen und standardisierter Easing für kohärente UX.

Animationen geben der Seite Leben. Beim Scrollen gleiten Elemente sanft ins Bild statt abrupt zu erscheinen. Buttons pulsieren dezent, um Aufmerksamkeit zu erzeugen. Alle Bewegungen nutzen die gleiche „Geschwindigkeitskurve“ — sie starten schnell und bremsen sanft ab. Das fühlt sich natürlich und hochwertig an.
Keyframe Library
Name Duration Easing Usage
prominentBreathe 4s ease-in-out Prominent Button
primaryBreathe 5s ease-in-out Primary Button
gradientShift 6s ease-in-out Gradient Text
fadeInUp 0.8s cubic-bezier(0.23,1,0.32,1) Scroll Reveal
pingPulse 1.5s ease-in-out Indicator Pulse
scrollWheel 1.5s ease-in-out Scroll Indicator
orbFloat 4s–6s ease-in-out Hero Orbs
lineGlow 3s ease-in-out Header Gradient Line
Reveal Animationen (Scroll-Trigger)
⬆️
fadeInUp
➡️
reveal-right
📦
reveal-scale
Motion Standards
Property Value Note
Standard Easing cubic-bezier(0.23,1,0.32,1) Für alle Transitions & Reveals
Reveal Duration 0.8s Scroll-Trigger Animations
Stagger Increment 0.1s .stagger-1, .stagger-2, .stagger-3
Card Transition all 0.4s cubic-bezier(0.23,1,0.32,1) Hover Effects
Responsive

Mobile Overflow-Schutz

Umfassender Schutz gegen horizontales Scrollen auf iOS/Mobile.

Regel CSS
Global html, body { overflow-x: hidden !important; width: 100% !important; }
Container section, .page, header, footer { overflow-x: clip !important; }
Texte h1, h2, h3, p { overflow-wrap: break-word; }
Dekorative Orbs Verkleinert (200×200px bzw. 140×140px unter 480px), negative Positionen eliminiert
Header-Gradient max-width: min(90%, 100vw)

Hinweis: overflow-x: clip ist zuverlässiger als hidden auf iOS, da es keine neuen Scroll-Container erzeugt.

Tokens — CSS-Referenz

CSS Design Tokens

Alle Werte als CSS Custom Properties — Single Source of Truth. Kopiere diesen Block in dein Projekt.

Dieser Bereich ist für Entwickler: Die „Tokens“ sind ein Code-Block, den Programmierer direkt in ihre Projekte einfügen können. Damit stehen alle Farben, Abstände und Schatten als vordefinierte Variablen zur Verfügung — niemand muss Hex-Codes auswendig lernen.
/* PACE Design System 2.0 — Tokens */ :root { /* Brand Colors */ --brand-primary: #00CCF0; --brand-primary-dark: #00a8c7; --brand-accent-b2c: #FFDA01; --brand-accent-b2b: #E62048; /* Neutrals */ --black: #232729; --dark-grey: #2e363a; --mid-grey: #64747d; --grey: #a0aeb5; --light-grey: #edf1f2; /* PACE Cloud Dark Theme */ --cloud-bg: #0F1215; --cloud-bg2: #161B20; --cloud-card: #1C2228; --cloud-text: #F0F2F5; --cloud-muted: #A0AEB5; --cloud-dim: #64747D; --cloud-hover: #232B33; /* Gradients */ --gradient-drive: linear-gradient(135deg, #00CCF0, #FFDA01); --gradient-cloud: linear-gradient(135deg, #00CCF0, #E62048); /* Spacing (4px base grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* Border Radii */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --radius-btn: 10px; /* Transitions */ --ease-out: cubic-bezier(0.16,1,0.3,1); --ease-smooth: cubic-bezier(0.23,1,0.32,1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.12); --shadow-xl: 0 20px 40px rgba(0,0,0,.15); }