The design system behind pedalix.com
A living reference, rendered with the very tokens the live site uses. Click any value to copy it.
Colors
Brand gradient
Celeste → yellow. Animated. Hero moments and accent bars only. var(--gradient-brand)
Primary
The main color of the brand.
Secondary
The second most important color of the brand.
Accents
Up to three accents. Currently tokenised: violet, for badges and data-viz.
Neutrals
Backgrounds, surfaces, dividers.
Semantic
Typography
Poppins, three weights. Major-third scale, body anchored at 18px / 1.6. Each role carries its own line-height and tracking.
| Role | Size · weight | Sample |
|---|---|---|
| Display | clamp(3.5rem, 6vw, 5rem) · 700 | From signal to execution |
| H1 | clamp(2.5rem, 4.5vw, 4rem) · 600 | From signal to execution |
| H2 | clamp(2rem, 3.2vw, 3rem) · 600 | From signal to execution |
| H3 | 1.75rem · 600 | From signal to execution |
| Lead | 1.375rem · 400 | From signal to execution |
| Body | 1.125rem · 400 | From signal to execution |
| Overline | 0.875rem · 600 · +0.08em | From signal to execution |
Rhythm & spacing
An 8px rhythm scale carries the whole layout. Sections breathe at 96px (desktop) / 48px (mobile).
Pedalix patterns
The signature effects from pedalix.com: the yellow heading highlight, the pill badge, the accent divider and the dark hero band.
We make GTM multiplayer
The signature element. A yellow marker behind exactly one word per heading, never across whole sentences.
Small uppercase label, fully rounded. Eyebrow above the hero and sections.
From signal to execution
A short celeste line under section intros.
Get multiplayer.
Hero, header and footer sit on #1E1F25 with celeste accents.
Logos
The main logo is the celeste mark. Click any logo to download the SVG file.
Components
Three button variants, one focus ring, consistent states.
Card with gradient edge
Surfaces lift above bg; the 2px edge uses the brand gradient.