Design system

Alle elementen van de Vonk website.

Kleuren, typografie, knoppen, kaarten, labels, formulieren en de bewegingen. Gebouwd met Inter, GSAP, Lenis en de React Bits patronen. Dit is de bron voor elke nieuwe pagina.

Kleuren

Twee gronden (ink en paper), één accent (orange). Donker is een accent op drie plekken, de rest is licht. Oranje is één ding per scherm.

ink #13171FGrond van hero, Vonkie en slot. Tekst op licht.
ink-soft #1C2230Panelen op donker.
ink-raised #262D3DHover en randen op donker.
navy #0F1A2EKoppelingen sectie.
paper #FAF9F7Grond van lichte secties. Tekst op donker.
white #FFFFFFKaarten en Cijfers sectie.
orange #FF6B2CHet accent. Eén ding per scherm.
orange-soft #FF9152Hover, kicker op donker.
teal #14B8A6Gelukt, live, positief.
warn #D94A2BAandacht. Spaarzaam.
grey #9AA3B2Secundaire tekst op donker.
grey-dark #6B7585Secundaire tekst op licht.
line #2A3242Randen op donker.
line-light #E6E2DCRanden op licht.

Typografie

Alles in Inter. Koppen 800 met strakke spatiëring, nooit een serif. Cijfers in kolommen tabular.

Display XL, heroHet systeem waar je autobedrijf op draait.
Display L, sceneKenteken erin. De rest vult zich.
Display M, sectieEén systeem voor het hele bedrijf.
Stat, groot cijfer41.280
H3, kaarttitelInbox en Vonkie
KickerPILOT FASE VOOR AUTOBEDRIJVEN
LeadElke auto dezelfde dag online. Elke aanvraag binnen een minuut beantwoord.
BodyVonk is je voorraadsysteem. Merk, uitvoering, APK en kilometerstand komen vanzelf binnen.
Mono, kenteken en bedragenXR-123-T € 18.950

Labels en status

Teal is live of gelukt, oranje is in bouw of in test, grijs is binnenkort of in aanvraag.

LiveIn pilotIn bouwIn testOntworpenBinnenkortAanvraag looptXR-123-TKicker in oranje

Kaarten

Op licht: wit met een lijn, geen schaduw. Op donker: ink-soft met een zachte rand. Module kaarten lichten op onder de muis.

EtalageIn pilot

Voorraad

Het hart van Vonk: je complete voorraadbeheer.

VerkoopIn pilot

Inbox en Vonkie

EtalageIn bouw

Website

BinnenkortBinnenkort
Inruil en taxatieReviewsBoekhouding

Formulieren

Op donker

Aanmelden

Chat van Vonkie

Berichten van de klant rechts in ink-raised, van Vonkie links in ink. Auto's als kaartjes met foto, prijs en kilometerstand.

Vonkieonline
21:41
Hebben jullie een kleine automaat onder de 20k?
Ja, twee die goed passen:
Volkswagen Polo42.180 km € 18.950
Toyota Aygo X18.900 km € 19.750
Beantwoord in 3 seconden

Beweging

Eén easing voor alles, korte afstanden, 400ms voor verschijnen en 900ms of scrub voor grote objecten. Per scene maximaal één achtergrond, één groot object en één tekstanimatie. Bij prefers-reduced-motion staat alles stil.

SplitText: kop per regel uit een masker

Kenteken erin.De rest vult zich.

CountUp: cijfers tellen op

0

Staven groeien van onderaf

FadeContent: verschijnen met stagger

LiveIn bouwBinnenkort

TiltedCard: scherm uit de diepte, volgt de muis

Voorraad
Live
KentekenXR-123-T
MerkVolkswagen
Bouwjaar2021
Km42.180

OrbitImages: partijen in een baan om Vonk

RDW
AutoScout24
Marktplaats
Hexon

Donkere secties

Filmkorrel op 5 procent over elk donker vlak, een oranje gloed als enige lichtbron, nooit meer dan één gloed per scene.

Pilot fase

We bouwen Vonk samen met de eerste autobedrijven.

Dit is het slot van de homepage, en de stijl voor de hero en de Vonkie scene.