Interne referentiepagina. Consolideert de oude Webflow-export style-guide.html en ui.html in één overzicht van het merksysteem.

stijlgids

Kleuren

brand-pink-700

#cd2da5

brand-blue-500

#1d4edb

brand-green-500

#1d5e48

brand-yellow-500

#fefd11

cta-yellow

#fcff5c

Type scale

h1 jij kiest, wij vergelijken

h2 jij kiest, wij vergelijken

h3 jij kiest, wij vergelijken

h4 jij kiest, wij vergelijken

h5 jij kiest, wij vergelijken

h6 jij kiest, wij vergelijken

Body tekst in font-sans (Geist). Vergelijk energie, internet & tv, mobiel en verzekeringen op prijs én voorwaarden, en zie binnen 60 seconden welk aanbod het beste bij je past.

Buttons

Chat met Ollie

Vergelijk nu - Gratis

Pills

100% onafhankelijk

150+ aanbiedersGratis. Eerlijk. Snel.

StatCard

9,4/10

beoordeling

2.3M+

vergelijkingen

€12M+

bespaard door onze gebruikers

StepCard

Stap 1

Vertel Ollie wat je zoekt

Gewone taal, geen formulieren
Binnen 60 seconden resultaat

Stap 2

Vergelijk eerlijk

Op prijs én voorwaarden
Geen gesponsorde resultaten

Stap 3

Stap direct over

Wij regelen de overstap
Je kan elke dag overstappen

TestimonialCard

Binnen tien minuten geswitcht van energieleverancier, inclusief een korting die ik zelf nooit had gevonden.

Marieke de Boer

Bespaarde €340 per jaar

FaqItem

Ja, altijd. Jij betaalt nooit iets: wij verdienen alleen een vergoeding van de aanbieder als jij besluit over te stappen. Dat verandert niets aan de prijs die je betaalt en niets aan de volgorde van de resultaten.

Marquee

Beoordeeld met een 9,4/10 door onze gebruikers

100% onafhankelijk sinds 2025

Volledig gratis te gebruiken

Veilig & GDPR compliant

Motion

Het bewegingssysteem uit @/components/brand/motion is de handtekening van het merk. Elke pagina gebruikt Reveal om secties binnen te laten komen, SplitHeading voor grote koppen, TiltCard rond interactieve kaarten en Magnetic rond hero-CTA's.

SplitHeading — kop komt letter voor letter omhoog; accent via accent + accentClassName (pink op wit, yellow op blauw/groen)

jij kiest, wij vergelijken

Reveal — scroll-getriggerde fade + rise, optioneel met delay in ms voor stagger

Reveal zonder delay

Verschijnt zodra dit blok in beeld scrollt.

Reveal met delay={150}

Volgt 150 ms later voor een stagger-effect.

TiltCard — 3D-tilt die de muis volgt; wikkel om interactieve kaarten

Beweeg je muis hierover

De kaart kantelt subtiel mee met de cursor.

Magnetic — CTA-knop trekt licht naar de cursor; alleen voor hero-niveau CTA's