Das Designsystem hinter pedalix.com
Eine lebende Referenz, gerendert mit denselben Tokens, die die Live-Seite verwendet. Klicke einen Wert an, um ihn zu kopieren.
Farben
Brand-Gradient
Celeste → Yellow. Animiert. Nur für Hero-Momente und Akzentleisten. var(--gradient-brand)
Primary
Die Hauptfarbe der Marke.
Secondary
Die zweitwichtigste Farbe der Marke.
Akzente
Maximal drei Akzente. Aktuell tokenisiert: Violet, für Badges und Data-Viz.
Neutrals
Hintergründe, Oberflächen, Trenner.
Semantisch
Typografie
Poppins, drei Gewichte. Major-Third-Skala, Body bei 18px / 1.6 verankert. Jede Rolle bringt Zeilenhöhe und Tracking selbst mit.
| Rolle | Grösse · Gewicht | Beispiel |
|---|---|---|
| Display | clamp(3.5rem, 6vw, 5rem) · 700 | Vom Signal zur Umsetzung |
| H1 | clamp(2.5rem, 4.5vw, 4rem) · 600 | Vom Signal zur Umsetzung |
| H2 | clamp(2rem, 3.2vw, 3rem) · 600 | Vom Signal zur Umsetzung |
| H3 | 1.75rem · 600 | Vom Signal zur Umsetzung |
| Lead | 1.375rem · 400 | Vom Signal zur Umsetzung |
| Body | 1.125rem · 400 | Vom Signal zur Umsetzung |
| Overline | 0.875rem · 600 · +0.08em | Vom Signal zur Umsetzung |
Rhythmus & Abstaende
Eine 8px-Rhythmus-Skala traegt das gesamte Layout. Sektionen atmen mit 96px (Desktop) / 48px (Mobil).
Pedalix-Patterns
Die wiedererkennbaren Effekte von pedalix.com: gelbes Heading-Highlight, Pill-Badge, Akzent-Divider und das dunkle Hero-Band.
Wir machen GTM multiplayer
Das Signature-Element. Ein gelber Marker hinter genau einem Wort pro Heading, nie über ganze Sätze.
Kleines Label in Versalien, abgerundet. Eyebrow über Hero und Sektionen.
Vom Signal zur Umsetzung
Kurze Celeste-Linie unter Sektions-Intros.
Get multiplayer.
Hero, Header und Footer liegen auf #1E1F25 mit Celeste-Akzenten.
Logos
Hauptlogo ist die Celeste-Mark. Klicke ein Logo an, um die SVG-Datei herunterzuladen.
Komponenten
Drei Button-Varianten, ein Fokus-Ring, konsistente Zustände.
Karte mit Gradient-Kante
Oberflächen heben sich über bg ab. Die 2px-Kante nutzt den Brand-Gradient.