📖
Einführung

PACE Design System 4.6

Living Style Guide für die gesamte PACE Markenarchitektur. Zentrale Referenz für alle digitalen Produkte: PACE Cloud, PACE Drive und zukünftige Anwendungen.

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.
HTML-Datei – als Referenz für Claude, Figma oder eigene Projekte nutzbar

Markenarchitektur

PACE operiert mit einer klaren Markenarchitektur für unterschiedliche Zielgruppen.

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. Vorzugsweise auf dunklem Grau.
PACE Drive – B2C
Zielgruppe: Endkunden
Akzentfarbe: Gelb #FFD700
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
Shared Design Language
Alle PACE-Produkte teilen: Inter als Schriftfamilie, identisches Spacing-System (4px Grid), gleiche Dark/Light Theme Tokens (HSL 207°), und die gleiche Primärfarbe Cyan #00CCF0. Nur Akzentfarben und Gradients unterscheiden sich pro Produkt.

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

Grundlagen – 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: #FFD700
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 Cloud

Spezifische Farbwerte für die dunkle PACE Cloud Website (B2B). Diese erweitern die Basispalette und sind systematisch vom Brand Cyan abgeleitet.

Die dunklen Hintergrund- und Textfarben der Cloud-Website sind keine zufälligen Grautöne – sie sind verwandt mit unserem Marken-Cyan. Stell dir vor, du nimmst das Cyan und machst es so dunkel und leise, dass es fast wie Schwarz aussieht – aber wenn du genau hinschaust, spürst du immer noch den kühlen, blauen Charakter. Deshalb wirkt unsere Website „professionell-kühl" statt „einfach nur dunkel".
Cloud BG
#0F1215
--cloud-bg
Cloud Surface
#161B1F
--cloud-bg2
Cloud Card
#1D2328
--cloud-card
Cloud Text
#F0F1F2
--cloud-text
Cloud Muted
#A2ACB4
--cloud-muted
Cloud Dim
#7B8893
--cloud-dim
Mehr erfahren: Wie die Dark-Farben abgeleitet werden

Einfach erklärt: Unsere Markenfarbe ist Cyan (ein helles, leuchtendes Blau). Für die dunkle Website brauchen wir Hintergründe, die fast schwarz sind – aber nicht „tot" wirken. Deshalb mischen wir einen Hauch dieses Cyans in alle dunklen Töne. Das Ergebnis: Die Website fühlt sich kühl und technologisch an, ohne dass man den Blauton bewusst wahrnimmt. Alle Hintergründe und Textfarben folgen dem gleichen Prinzip – sie sind keine willkürlichen Grauwerte, sondern eine „Familie".

Technisches Modell

Brand Cyan #00CCF0 → HSL(189°, 100%, 47%)
│
├— Hue: 189° + 18° = 207° (PACE Dark Blue)
│
├—─— Hintergründe hsl(207, 17%, L)
│ ├— bg-page    L:  7.0% = #0F1215
│ ├— bg-surface L: 10.5% = #161B1F +3.5
│ ├— bg-card    L: 13.5% = #1D2328 +3.0
│ └— bg-hover   L: 17.0% = #242C33 +3.5
│
├—─— Text hsl(207, S, L)
│ ├— text-muted    S:10% L: 32.5% = #4B545B
│ ├— text-tertiary  S:10% L: 53.0% = #7B8893
│ ├— text-secondary S:11% L: 67.0% = #A2ACB4
│ └— text-primary   S: 8% L: 94.5% = #F0F1F2
│
└—─— Borders rgba(255,255,255, α)
  ├— border-default α: 0.06
  └— border-strong  α: 0.10
Hue-Ableitung

Cyan (189°) + 18° = 207°
Kaltes Blau, verwandt mit Cyan, aber neutral genug für Hintergründe.

Saturation

Hintergründe: 17% (stark entsättigt)
Text: 8–11% – nimmt mit Helligkeit leicht ab.

Neue Tokens berechnen
Für zukünftige Dark-Tokens gilt: Hue immer 207°, Saturation zwischen 8–17%, Lightness nach Bedarf wählen. Beispiel für ein neues --bg-elevated: hsl(207, 17%, 20%)

Statusfarben

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

PACE Drive – Produkt-Tokens Drive

PACE Drive verwendet die identischen Dark-Theme-Tokens wie PACE Cloud (HSL 207°-System). Der Unterschied liegt ausschließlich in Akzentfarbe und Gradient.

PACE Drive sieht auf den ersten Blick genauso „dunkel und premium" aus wie PACE Cloud – die gleichen Hintergrundfarben, die gleichen Textfarben. Der Unterschied: Wo Cloud Rot/Pink als Akzent nutzt, verwendet Drive Gelb/Gold. So erkennt man sofort, ob man auf der B2C-App-Seite (Drive) oder der B2B-Plattform (Cloud) ist.
Drive Accent
HEX: #FFD700
RGB: 255, 218, 1
--brand-accent-b2c
Drive Accent Dark
HEX: #CCB001
RGB: 204, 176, 1
--drive-accent-dark
Drive Accent Light
HEX: #FFEC80
RGB: 255, 236, 128
--drive-accent-light
Token-Sharing zwischen Cloud und Drive
Identisch (Shared): --bg-page, --bg-surface, --bg-card, --bg-hover, --text-primary, --text-secondary, --text-tertiary, --text-muted, --border-default, --border-strong, alle Spacing/Radii/Motion-Tokens

Produktspezifisch:
Cloud: --brand-accent-b2b (#E62048), --gradient-cloud (Cyan→Rot), --gradient-text (Cyan→Rot)
Drive: --brand-accent-b2c (#FFD700), --gradient-drive (Cyan→Gelb), --gradient-text-drive (Cyan→Gelb)

Theme-Vergleich

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

🌙 Dark Theme Shared
bg-page: #0F1215
bg-surface: #161B1F
bg-card: #1D2328
text-primary: #F0F1F2
text-secondary: #A2ACB4
text-tertiary: #7B8893
border: rgba(255,255,255,0.08)
☀️ Light Theme Shared
bg-page: #edf1f2
bg-surface: #f7f9fa
bg-card: #ffffff
bg-muted: #e2e8ea
bg-hover: #d1d9dd
text-primary: #232729
text-secondary: #2e363a
text-tertiary: #64747d
text-muted: #a0aeb5
border-default: #d1d9dd
border-strong: #c0cace

Gradienten

PACE Drive
Drive Gradient (B2C)

Cyan → Gelb – warm, einladend

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

Cyan → Pink – technisch, kraftvoll

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

Cyan als Fläche, vorzugsweise auf dunklem Grau – kein Verlauf

#00CCF0 (Brand Primary)

Gradient-Text Shared

Farbverläufe als Textfarbe – für Headlines und Akzente. Jedes Produkt hat seinen eigenen Text-Gradient.

PACE Cloud
Cloud Text-Gradient Cloud
--gradient-text: linear-gradient(90deg, #00CCF0 20%, #E62048 80%)
PACE Drive
Drive Text-Gradient Drive
--gradient-text-drive: linear-gradient(90deg, #00CCF0 20%, #FFD700 80%)
Hinweis: Gelb auf Weiß
#FFD700 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.
Grundlagen – 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, 6vw, 5rem)Bold (700)1.08-0.035em
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.

Grundlagen – 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
Komponenten – Buttons

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 4s
Secondary 14px 32px 1px 500 none
Karriere 8px 20px 1.5px 600 karriereBreathe 4s
Ghost / Text 0 none 600 none
Produkt-Varianten
Die Cloud Buttons atmen zwischen Cyan und Rot. Die Drive Buttons atmen zwischen Cyan und Gelb. Alle anderen Eigenschaften (Padding, Radii, Font-Weight) sind identisch.

Drive Button-Varianten Drive

PACE Drive Buttons nutzen den gleichen Aufbau, aber Gelb statt Rot im Breathing-Gradient.

Cyan ↔ Gelb breathe
Gelb accent breathe
CSS-Klassen

Diese Klassen sind in index.html definiert und können direkt verwendet werden:

/* Prominent CTA – Breathing Gradient */ .btn-prominent { display: inline-flex; align-items: center; padding: 14px 32px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 700; background: linear-gradient(...); /* Cyan↔Rot */ border: 2px solid rgba(0,204,240,0.5); animation: prominentBreathe var(--duration-breathe) ease-in-out infinite; } /* Primary – Subtle Breathing */ .btn-primary { padding: 14px 32px; border-radius: var(--radius-btn); font-weight: 600; background: var(--bg-card); border: 1px solid rgba(0,204,240,0.2); animation: primaryBreathe var(--duration-breathe) ease-in-out infinite; } /* Secondary – Kein Breathing */ .btn-secondary { padding: 14px 32px; border-radius: var(--radius-btn); font-weight: 500; background: var(--bg-card); border: 1px solid var(--border-default); } /* Karriere Pill */ .btn-karriere { padding: 8px 20px; border-radius: var(--radius-full); font-weight: 600; background: var(--bg-card); border: 1.5px solid rgba(0,204,240,0.3); animation: primaryBreathe var(--duration-breathe) ease-in-out infinite; }
Disabled & Loading States
disabled: opacity 0.4
disabled: opacity 0.4
loading: spinner + no pointer
/* ====== PRODUCT LABELS ====== */ .product-label { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 9999px; vertical-align: middle; margin-left: 8px; } .product-label--cloud { background: rgba(230,32,72,0.1); color: #E62048; border: 1px solid rgba(230,32,72,0.2); } .product-label--drive { background: rgba(255,218,1,0.1); color: #FFD700; border: 1px solid rgba(255,218,1,0.2); } .product-label--shared { background: rgba(0,204,240,0.08); color: #00CCF0; border: 1px solid rgba(0,204,240,0.15); }
Ghost / Text Button

Verwendung: Ghost Buttons sind für sekundäre Aktionen in Cards und Inline-Kontexten. Primär-Farbe: Cyan für vorwärts gerichtete Aktionen, Tertiary für „Zurück“-Aktionen.

Komponenten – Formulare

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
Komponenten – Badges

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
Seitenaufbau – Roadmap

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#F0F1F2, 15px, font-weight 700
Text#A2ACB4, 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.

Komponenten – Cards

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 #1D2328
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.

Seitenaufbau – Icons

Icon-System

Streamline Icons (Outline-Variante) als primäres Icon-Set. Lottie-Animationen für die drei Kernprodukte. Alle Icons werden über CSS-Filter oder direkte SVG-Färbung eingefärbt.

Icons sind kleine Symbole, die Inhalte visuell unterstützen – z. B. ein Zahnrad für Einstellungen oder ein Pfeil für Navigation. Wir nutzen Streamline Icons in einer einheitlichen Strichstärke, damit alle Icons zusammenpassen. Für die drei Hauptprodukte (Fueling, Washing, Charging) gibt es zusätzlich animierte Icons.

Größen

Variante Größe Verwendung
Default 44 × 44 px Cards, Feature-Listen, Lösungs-Übersicht
Small 36 × 36 px Mobile Cards, kompakte Layouts
Inline 24 × 24 px Neben Text, in Buttons, Navigation
Micro 16 × 16 px Inline-Pfeile, Chevrons in Buttons

Farbgebung (Dark Theme)

SVG-Icons einfärben
Streamline-SVGs werden im Dark Theme über filter oder direkte fill/stroke-Änderung eingefärbt. Standard: Cyan (#00CCF0) für Feature-Icons in Cards, Text-Secondary (#A2ACB4) für neutrale/informative Icons.

Lottie-Animationen

Produkt Motiv Loop Fallback
Fueling Zapfsäule true (endlos) Statisches SVG-Icon
Washing Auto + Tropfen true (endlos) Statisches SVG-Icon
Charging Batterie + Blitz true (endlos) Statisches SVG-Icon
Lottie-Größe
Lottie-Icons verwenden die gleichen Größen wie statische Icons (44×44 default, 36×36 mobile). JSON-Daten werden inline im Script-Block eingebettet, nicht als externe Dateien geladen.
Seitenaufbau – Bildsprache

Bildsprache & Overlays

Regeln für Bildformate, Seitenverhältnisse, Gradient-Overlays und die responsive object-position Steuerung.

Bilder brauchen klare Regeln: Welches Format für welchen Zweck, wie werden sie zugeschnitten, und wie sorgen wir dafür, dass Text über Bildern lesbar bleibt? Unsere Overlays (halbtransparente Farbverläufe über Bildern) stellen sicher, dass weißer Text immer gut sichtbar ist.

Seitenverhältnisse

Kontext Ratio Typische Höhe Hinweis
Hero (Fullscreen) 16:9 / frei min-h-screen / min-h-[70vh] object-fit: cover + Gradient-Overlay
Service Card ~16:9 220px (180px mobile) Grayscale-Filter im Ruhezustand
CTA Box frei min-height: 420px 60% Overlay + zentrierter Text
Team/Kultur ~3:2 220px Kein Filter, Cyan-Border-Akzent

Gradient-Overlays auf Hero-Bildern

Horizontal (Text links)
to right: 0.85 → 0.4 → 0.12
Vertikal (Fade to BG)
to bottom: 0.08 → 0 → 0 → 1.0

Object-Position System

Jedes Hero-Bild erhält eine eigene CSS-Klasse (z. B. .img-pace09048) mit responsiven object-position-Werten. Diese Klassen steuern, welcher Bildausschnitt bei verschiedenen Viewports sichtbar ist – besonders wichtig für Portraits, wo Gesichter nicht abgeschnitten werden dürfen.

Responsive Breakpoints
Mobile-first: Basiswert → @media(min-width:768px) → @media(min-width:1024px). Bei Portraits das Gesicht immer im sichtbaren Bereich halten.

Service-Card Bildfilter

Default: filter: grayscale(0.4) brightness(0.7)
Hover: filter: grayscale(0) brightness(0.9)

Komponenten – Tabellen

Tabellen

Spezifikation für Datentabellen in der Dark-Umgebung. Konsistentes Styling für alle tabellarischen Inhalte.

Produkt Stationen Länder Status
Fueling 13.800+ 15 Live
Washing 2.400+ 4 Live
Charging 5.000+ 8 Beta

Regeln: Header nutzen text-secondary, uppercase, font-size: 12px. Zeilen-Trenner: rgba(255,255,255,0.04). Zebra-Stripes sind optional.

Komponenten – Zitate

Zitate & Blockquotes

Stil für Zitate, Testimonials und hervorgehobene Aussagen.

„PACE hat unsere Tankstellen-Infrastruktur in drei Monaten digitalisiert. Die Integration war reibungslos.“

– Max Mustermann, CTO bei Beispiel GmbH

„50 Millionen Transaktionen sprechen für sich.“

– Internes Zitat, PACE

Regeln: Zitate nutzen font-style: italic, 18px, line-height: 1.7. Linke Border: Cyan für externe Zitate, Rot für interne/PACE-Zitate. Deutsche Anführungszeichen: „…“

Seitenaufbau – Hero

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
Grundlagen – 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
prominentBreatheLight 4s ease-in-out Prominent Button (Light Theme)
primaryBreatheLight 4s ease-in-out Primary Button (Light Theme)
prominentBreatheDark 4s ease-in-out Prominent Button (Dark-BG Sections in Light)
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
Weitere Anwendungen – UI Patterns

UI Patterns Coming Soon

Wiederverwendbare Interface-Patterns für Apps, Dashboards und interne Tools. Navigation Patterns, Data Display, Form Patterns, Feedback & Notifications.

In Planung
Diese Sektion wird die Design-Patterns dokumentieren, die über einzelne Komponenten hinausgehen: Login-Flows, Dashboard-Layouts, Onboarding-Sequences, Empty States, Error Handling, Loading States.
Weitere Anwendungen – Screendesign

Screendesign & Figma Coming Soon

Figma-Bibliothek, Screendesign-Spezifikationen, Handoff-Richtlinien. Token-Export für Figma Variables, Komponenten-Mapping zwischen Code und Design.

In Planung
Geplante Inhalte: Figma Component Library, Auto-Layout-Spezifikationen, Design Token Export (JSON → Figma Variables), Naming Conventions für Figma-Layers, Handoff-Checklisten.
Seitenaufbau – Mobile

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.

Richtlinien – Barrierefreiheit

Barrierefreiheit & Kontraste

WCAG 2.1 AA als Mindeststandard. Alle Text-Hintergrund-Kombinationen müssen ein Kontrastverhältnis von mindestens 4.5:1 (Normaltext) bzw. 3:1 (großer Text ≥ 18px bold) einhalten.

Barrierefreiheit bedeutet, dass die Website für alle Menschen nutzbar ist – auch für Personen mit eingeschränktem Sehvermögen. Kontrast beschreibt, wie gut sich Text von seinem Hintergrund abhebt. Je höher der Kontrast, desto besser lesbar. Die WCAG-Richtlinien definieren Mindestanforderungen.

Kontrastmatrix (Dark Theme)

Textfarbe Auf Hintergrund Ratio WCAG AA
text-primary (#F0F1F2) bg-page (#0F1215) 16.6:1 ✓ Pass
text-secondary (#A2ACB4) bg-page (#0F1215) 8.1:1 ✓ Pass
text-tertiary (#7B8893) bg-page (#0F1215) 5.2:1 ✓ Pass
text-tertiary (#7B8893) bg-card (#1D2328) 4.4:1 ⚠ Large only
brand-primary (#00CCF0) bg-page (#0F1215) 8.9:1 ✓ Pass
accent-b2c (#FFD700) white (#FFFFFF) 1.4:1 ✗ Fail
Kritische Kombinationen vermeiden
#FFD700 (Gelb) niemals als Textfarbe auf hellem Hintergrund.
#7B8893 (Tertiary) nur für Labels und Captions, nicht für Fließtext auf Cards.
#4B545B (Muted) nur für dekorative Elemente, nicht für lesbaren Text.

Viewport & Zoom

Pinch-to-Zoom darf nicht deaktiviert werden. Korrekte Viewport-Konfiguration:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> /* NICHT verwenden: */ maximum-scale=1.0, user-scalable=no

Fokus-Indikatoren

Alle interaktiven Elemente müssen einen sichtbaren Fokus-Indikator haben. Standard: box-shadow: 0 0 0 3px rgba(0,204,240,0.3) beim :focus-visible State.

Referenz – CSS Tokens

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 4.1 – Tokens Farb-Ableitungsmodell: Hue 207° (Cyan 189° + 18°) Backgrounds: hsl(207°, 17%, L%) | Text: hsl(207°, 8–11%, L%) */ :root { /* Brand Colors */ --brand-primary: #00CCF0; /* Cyan */ --brand-primary-dark: #00a8c7; --brand-primary-light: #80e5f7; --brand-accent-b2c: #FFD700; /* Gelb (Drive/B2C) */ --brand-accent-b2b: #E62048; /* Rot (Cloud/B2B) */ /* Neutrals */ --black: #232729; --dark-grey: #2e363a; --mid-grey: #64747d; --grey: #a0aeb5; --light-grey: #edf1f2; /* PACE Cloud Dark Theme – hsl(207°, 17%, L%) */ --cloud-bg: #0F1215; /* L:7% */ --cloud-bg2: #161B1F; /* L:10.5% */ --cloud-card: #1D2328; /* L:13.5% */ --cloud-hover: #242C33; /* L:17% */ --cloud-text: #F0F1F2; /* S:8% L:94.5% */ --cloud-muted: #A2ACB4; /* S:11% L:67% */ --cloud-dim: #7B8893; /* S:10% L:53% */ --cloud-border: rgba(255,255,255,0.06); --cloud-border-strong: rgba(255,255,255,0.08); /* Gradients */ --gradient-drive: linear-gradient(135deg, #00CCF0 0%, #FFD700 100%); --gradient-cloud: linear-gradient(135deg, #00CCF0 0%, #E62048 100%); --gradient-text: linear-gradient(90deg, #00CCF0 20%, #E62048 80%); /* PACE Brand = Cyan als Fläche, kein Tri-Color-Verlauf */ /* Status */ --success: #76b532; --success-light: #e8f5d6; --warning: #ff9601; --warning-light: #fff3e0; --error: #e2001a; --error-light: #fce4ec; --info: #00CCF0; --info-light: #e0f7fa; /* 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; /* Motion & 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; --duration-breathe: 4s; /* 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); }

PACE Drive – Zusätzliche Tokens Drive

/* ====== PACE DRIVE TOKENS ====== */ /* Alle Shared-Tokens (bg, text, border, spacing, motion) sind identisch. */ /* Nur diese Tokens unterscheiden sich: */ --brand-accent-b2c: #FFD700; /* Drive Accent (Gelb) */ --drive-accent-dark: #CCB001; /* Drive Accent dunkel */ --drive-accent-light: #FFEC80; /* Drive Accent hell */ --gradient-drive: linear-gradient(135deg, #00CCF0 0%, #FFD700 100%); --gradient-text-drive: linear-gradient(90deg, #00CCF0 20%, #FFD700 80%); /* Drive Button Animations */ /* prominentBreatheDrive – Cyan ↔ Gelb (statt Cyan ↔ Rot) */ /* primaryBreatheDrive – gleiche Struktur, Gelb-Akzent */
Weitere Anwendungen – HTML Slides

Präsentationen

Fullscreen HTML-Präsentationen mit scroll-snap, IntersectionObserver-Animationen und Dark/Light-Theme. Alle Farben und Tokens werden aus diesem Styleguide geerbt – der Skill und das Template referenzieren diese Quelle.

Architektur

Jede Präsentation ist eine einzelne HTML-Datei mit eingebettetem CSS und JS. Die Struktur besteht aus drei Schichten:

pace-tokens.css
Alle CSS Custom Properties aus diesem Styleguide – Farben, Spacing, Radii, Schatten, Transitions. Wird per <link> eingebunden.
pace-base.css
Animations-System, Slide-Grundstruktur, Navigation, Theme-Toggle, Logo-Klassen. Framework-Code ohne inhaltliche Gestaltung.
Präsentation.html
Slide-Inhalte, Komponenten, individuelle Anpassungen. Nutzt die Klassen aus pace-base.css und die Tokens aus pace-tokens.css.

Slide-System

Slides sind fullscreen Sektionen mit scroll-snap-align: start. Jeder Slide ist ein <section class="slide"> mit einem .slide__inner-Container für den Content.

KlasseBeschreibungHintergrund (Dark)Hintergrund (Light)
.slide--heroEröffnungsslide mit Gradient und Glow-Effektlinear-gradient(160deg, #0a1628, #0F1215, #0d1a1c)linear-gradient(160deg, #dff0f7, #edf1f2, #e0f2f0)
.slide--darkStandard-Slide auf dunklem Grundvar(--bg-page) = #0F1215var(--bg-page) = #edf1f2
.slide--surfaceLeicht erhöhter Hintergrundvar(--bg-surface) = #161B1Fvar(--bg-surface) = #f7f9fa
.slide--accentAkzent-Slide für Zwischentitellinear-gradient(160deg, #0d1a1c, #0F1215)linear-gradient(160deg, #e0f2f0, #edf1f2)
.slide--ctaCall-to-Action / Abschluss-Slidelinear-gradient(160deg, #0a0c14, #0d1a1c, #0F1215)linear-gradient(160deg, #f0f4f6, #e8eef0, #edf1f2)
.slide--adminAdmin/Settings-Kontext (orangener Glow)wie .slide--dark + orangener Glowwie .slide--dark + orangener Glow
 
<section class="slide slide--hero">
  <div class="slide__inner">
    <!-- Content hier -->
  </div>
</section>

Hinweis: .slide__inner hat max-width: 960px und padding: 48px 64px. Für PDF-Export kann per CSS-Injection ein breiteres Layout erzwungen werden.

Animations-System

Elemente mit der Klasse .anim starten unsichtbar und werden durch den IntersectionObserver beim Betreten des Slides eingeblendet. Richtungs- und Timing-Varianten:

KlasseEffektStandard-Dauer
.animFade in + nach oben (translateY 30px → 0)0.6s
.anim--leftVon links einschieben (translateX -30px)0.6s
.anim--rightVon rechts einschieben (translateX 30px)0.6s
.anim--scaleHineinzoomen (scale 0.92 → 1)0.6s
.anim-chipChip-Animation (translateY 10px, 0.4s)0.4s
.anim-bounceIcon-Bounce (scale 1→1.2→0.95→1)0.6s
.anim-glowPulsierender Schatten-Glow2s loop
.anim-pulseFlow-Pfeil-Pulsieren2s loop

Delay-Klassen: .anim-d1 (0.1s) bis .anim-d8 (0.8s) – steuern die gestaffelte Einblendung innerhalb eines Slides.

<!-- Beispiel: gestaffelte Animation -->
<div class="eyebrow anim anim-d1">Kategorie</div>
<h2 class="slide-title anim anim-d2">Titel</h2>
<p class="slide-desc anim anim-d3">Beschreibung</p>
<div class="stat-grid anim anim-d4">...</div>

Keyframes

Vordefinierte Keyframe-Animationen für Spezialeffekte:

KeyframeZweck
@keyframes fadeInUpStandard fade-in von unten
@keyframes fadeInLeft / fadeInRightSeitliches Einschieben
@keyframes fadeInScaleZoom-in von 0.92
@keyframes gradientShiftCyan→Rot Gradient-Text-Animation (6s)
@keyframes orbFloatFloating Orbs Schwebebewegung (4–6s)
@keyframes breatheCyan↔Rot Border-Breathing für CTA-Button (4s)
@keyframes pingPulseGlow-Dot-Pulsieren für Hero-Badge (1.5s)
@keyframes pulseGlowPulsierender Cyan-Schatten
@keyframes pulseGlowOrange / Green / RedFarbvarianten des Glow-Effekts
@keyframes shimmerSchimmernder Hintergrund-Sweep
@keyframes floatSanftes Schweben (translateY ±6px)
@keyframes flowPulsePulsieren für Flow-Pfeile
@keyframes iconBounceIcon-Bounce (scale 1→1.2→0.95)
@keyframes countUpZahlen-Einblendung

Website-Patterns (aus pace.cloud)

Adaptierte Patterns aus der pace.cloud Website für den Einsatz in Präsentationen. Sparsam einsetzen – pro Slide maximal ein auffälliges animiertes Element.

PatternKlasseBeschreibungMax / SlideMax / Präsentation
Gradient Text.gradient-textAnimierter Cyan→Rot Verlaufstext für Hero-Headlines11–2
Hero Badge.hero-badgePill mit animiertem Glow-Dot als Slide-Eyebrow12–3
Floating Orbs.orb--cyan / .orb--redBlurred Gradient-Kreise als Deko-Hintergrund2 (1× cyan + 1× red)2–3 Slides
Breathe Button.btn-breatheCTA-Button mit Cyan↔Rot Border-Animation11
Glass Card.glass-cardFrosted-Glass-Karte für Bild/Orb-Hintergründe4beliebig

Grundregel: Pro Slide maximal ein auffälliges animiertes Element (Gradient-Text ODER Breathe-Button ODER Orbs). Statische Patterns (Glass-Card, Hero-Badge) dürfen kombiniert werden.

Zusätzliche Präsentations-Tokens

Diese Tokens erweitern die globalen Design-Tokens für den Präsentations-Kontext. Sie nutzen die gleichen Basiswerte:

/* Präsentations-spezifische Tokens (ergänzend zu :root) */
:root {
  /* Farb-Dims für halbtransparente Hintergründe */
  --brand-primary-dim: rgba(0,204,240,0.15);
  --brand-orange-dim: rgba(255,150,1,0.15);
  --brand-green-dim: rgba(134,203,40,0.15);
  --brand-yellow-dim: rgba(255,218,1,0.12);
  --brand-red-dim: rgba(230,32,72,0.15);

  /* Zusätzliche Farben */
  --brand-orange: #FF9601;
  --brand-green: #86CB28;
  --brand-yellow: #FFD700;          /* = --brand-accent-b2c */
  --brand-red: #E62048;             /* = --brand-accent-b2b */

  /* Breathe-Animation */
  --duration-breathe: 4s;
}

Die -dim-Varianten werden für Chip-Hintergründe, Info-Boxen und Icon-Container verwendet. Sie erzeugen einen halbtransparenten Farbfleck, der in beiden Themes funktioniert.

Komponenten-Katalog

Alle verfügbaren Bausteine für Präsentationen. Jede Komponente nutzt ausschliesslich Design-Tokens aus diesem Styleguide.

Typografie

KlasseFont-Size (Base)WeightFarbe
.eyebrow10px700var(--brand-primary)
h1.hero-title56px800var(--text-primary), <span> = Cyan
h2.slide-title36px800var(--text-primary)
.slide-desc16px400var(--text-secondary)

Cards & Daten

KomponenteKlasseBeschreibung
Stat Card.stat-grid + .stat-card4er-Grid mit Kennzahlen (Value + Label + optional Sub)
Compare Card.compare-card--problem / --solutionGegenüberstellung mit farbigem Top-Border (Orange vs. Cyan)
Advantage Card.adv-grid + .adv-card3er-Grid mit Icon, Titel, Text, Checkliste
Praxis Box.praxis-boxCase-Study-Box mit Header, Subtext und Stat-Grid
Info Box.info-box--cyan / --orange / --greenHervorgehobene Info mit Icon und Text

UI-Elemente

KomponenteKlasseBeschreibung
Chips.chip--cyan / --orange / --greenTags mit Icon, farbigem Hintergrund (dim-Tokens)
Badges.badge--cyan / --orange / --greenKleine Labels, pill-förmig
Partner Grid.partner-grid + .partner-chip6er-Grid für Partner-Logos/Namen, --highlight und --soon Varianten
Flow-Diagramm.flow + .flow__node + .flow__arrowHorizontaler Prozessablauf mit animierten Pfeilen
CTA Block.cta-blockZentrierter Call-to-Action mit Headline, Big-Text, Kontaktzeile
Divider.divider-contentZwischentitel-Slide mit grossem Icon und Text

Logo in Präsentationen

Immer das originale SVG verwenden, nie nachbauen! Die SVG-Quelldateien liegen in _Vorlagen/logos/. Es gibt 14 Varianten in drei Kategorien:

Signets – Symbol only (240×240)

DateiFillVerwendung
pace_symbol_rgb_color.svg#00CCF0 (Cyan)Deko-Element, Divider, Branding-Akzent
pace_symbol_rgb_white.svg#FFFFFFWasserzeichen, auf dunklem/Foto-BG
pace_symbol_rgb_black.svg#232729Auf hellem/Cyan-BG

Horizontal – Signet + „PACE“ (702×240)

DateiSignetTextVerwendung
pace_horizontal_rgb_color_white.svg#00CCF0#FFFFFFStandard – Global Header (Dark)
pace_horizontal_rgb_color_black.svg#00CCF0#232729Global Header (Light)
pace_horizontal_rgb_mono_white.svg#FFFFFF#FFFFFFAuf Fotos, busy BGs, Cyan-Flächen
pace_horizontal_rgb_mono_black.svg#232729#232729Co-Branding, Print, helle Flächen

Vertikal – Signet über „PACE“ (804×840)

DateiSignetTextVerwendung
pace_vertical_rgb_color_white.svg#00CCF0#FFFFFFCTA-Slide zentriert (Dark)
pace_vertical_rgb_color_black.svg#00CCF0#232729CTA-Slide zentriert (Light)
pace_vertical_rgb_mono_white.svg#FFFFFF#FFFFFFAuf Fotos, busy BGs
pace_vertical_rgb_mono_black.svg#232729#232729Print, helle Flächen

Kontext-Regeln

Slide-KontextLogoCSS-Klasse
Global Header (Dark)horizontal_color_white.pace-logo-horizontal.pace-logo-auto
Global Header (Light)horizontal_color_black.pace-logo-horizontal.pace-logo-auto
CTA / Closing (zentriert, Dark)vertical_color_white.pace-logo-vertical
CTA / Closing (zentriert, Light)vertical_color_black.pace-logo-vertical
Hero Deko-Elementsymbol_color.pace-logo-signet + opacity:0.08
Divider / Section-Trennersymbol_color.pace-logo-signet (zentriert)
Slide mit Foto-Hintergrundhorizontal_mono_white.pace-logo-white
 
/* Logo-Klassen (aus pace-base.css) */
.pace-logo-horizontal { width:140px; height:auto }     /* Global Header */
.pace-logo-vertical   { width:180px; height:auto }     /* CTA Slides */
.pace-logo-signet     { width:64px; height:64px }      /* Symbol only */

/* Farbsteuerung */
.pace-logo-white g { fill:#FFFFFF !important }
.pace-logo-black g { fill:#232729 !important }

/* Theme-responsive Auto-Switch (inline SVG) */
.pace-logo-auto g                        { fill:#FFFFFF }
[data-theme="light"] .pace-logo-auto g   { fill:#232729 }
.pace-logo-auto g#pace_signet            { fill:#00CCF0 !important }

/* Global Header – fixiert auf jedem Slide */
.global-header {
  position:fixed; top:28px; left:64px; right:64px;
  display:flex; align-items:center;
  z-index:200; pointer-events:none;
}

Light-Theme Overrides (Präsentationen)

Alle Präsentations-Komponenten reagieren auf [data-theme="light"]. Die Hintergrund-, Border- und Schatten-Tokens werden automatisch über die CSS Custom Properties vererbt. Zusätzlich gibt es komponentenspezifische Overrides:

/* Slide-Hintergründe */
[data-theme="light"] .slide--hero { background: linear-gradient(160deg, #dff0f7 0%, #edf1f2 40%, #e0f2f0 100%) }
[data-theme="light"] .slide--cta  { background: linear-gradient(160deg, #f0f4f6 0%, #e8eef0 50%, #edf1f2 100%) }
[data-theme="light"] .slide--accent { background: linear-gradient(160deg, #e0f2f0 0%, #edf1f2 100%) }

/* Karten: bg-card + Schatten ersetzen dunkle Borders */
[data-theme="light"] .stat-card,
[data-theme="light"] .compare-card,
[data-theme="light"] .adv-card,
[data-theme="light"] .partner-chip,
[data-theme="light"] .praxis-box { box-shadow: var(--shadow-sm) }

/* Chips & Badges: Leichtere Hintergrund-Transparenzen */
[data-theme="light"] .chip--cyan { background: rgba(0,204,240,0.1); color: var(--brand-primary-dark) }
[data-theme="light"] .chip--orange { background: rgba(255,150,1,0.1); color: #cc7800 }
[data-theme="light"] .chip--green { background: rgba(134,203,40,0.1); color: #5a8a1a }

Navigation & JavaScript

Jede Präsentation enthält folgende UI-Elemente und Interaktionen:

ElementKlasse / IDFunktion
Progress Bar.progressFortschrittsbalken oben, Cyan, 3px Höhe
Nav Dots.slide-navFixiert rechts, Punkte pro Slide, aktiver = Cyan + scale(1.3)
Slide Counter.slide-counterFixiert unten rechts, z.B. „3 / 6“
Keyboard Hints.kb-hintFixiert unten links, zeigt Tastaturkürzel
Theme Toggle.theme-toggleFixiert oben rechts, wechselt Dark/Light
 
/* IntersectionObserver – Kern des Animations-Systems */
const ANIM_CLASSES = '.anim, .anim-chip, .anim-pulse, .anim-bar, .anim-bounce, .anim-glow';

const slideObserver = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.querySelectorAll(ANIM_CLASSES).forEach(el => el.classList.add('visible'));
      // Update nav dots, counter, progress bar...
    } else {
      e.target.querySelectorAll(ANIM_CLASSES).forEach(el => el.classList.remove('visible'));
    }
  });
}, { threshold: 0.6 });

PDF-Export

HTML-Präsentationen können per Playwright-Script als randloses A4-PDF exportiert werden:

ParameterWertErklärung
Viewport1684 × 1190 pxExaktes A4-Landscape-Ratio (297:210 = 1.4143)
Device Scale2Retina-Qualität
MethodeScreenshot pro Slide → ReportLabPixelperfekt, keine Playwright-PDF-Artefakte
V2 (grösser)max-width: 1160pxCSS-Injection für ~20% mehr Content-Fläche

Das Script blendet Navigation, Theme-Toggle und Tagline aus, erzwingt alle Animationen auf visible, und erstellt pro Slide einen Screenshot. Die Screenshots werden mit ReportLab randlos auf A4 Landscape zusammengefügt.

Referenzdateien

DateiZweck
pace-template.htmlLeere Vorlage mit allen Styles und JS – Ausgangspunkt für neue Präsentationen
pace-components.htmlInteraktive Komponenten-Bibliothek mit Live-Previews und Copy-Snippets
00-shared/styleguide.htmlDieser Styleguide – Single Source of Truth für alle Tokens
_Vorlagen/logos/*.svg14 originale PACE-Logo-SVGs (3 Signets, 4 Horizontal, 4 Vertikal, 3 weitere)
html_to_pdf.pyPlaywright-Script für PDF-Export (Standard + V2 grösser)