Styleguide
Design tokens en componenten, getranscribeerd uit Checkout Page.fig. Tokens staan in Styles/pay.css (Razor) en tailwind.config.js (Angular-build).
Kleuren
brand
#dd1a58 · primaire CTA, accenten
indigo
#585fff · kaartacties (Betalen)
success
#009b89 · betaald / conversie ↑
warn
#f9a000 · conversie ↓
ink
#0e0e0e · widget-achtergrond
panel
#1a1a23 · donker paneel
chip
#242430 · donkere chip / topbar
ink2
#1d1d1d · tekst
muted
#636363 · secundaire tekst
faint
#a5a5a5 · placeholders, hints
hairline
#f4f4f4 · kaart-ring, dividers
ring2
#e9e9f7 · banktegel-ring
fieldring
#dbdbdb · formulierveld-ring
tablering
#efeeee · tabelkaart-ring
slateink
#334155 · reporting-koppen
Typografie
Host Grotesk · UI-stem · tracking −0.02em
€ 1.249,00
Kies je bank
Betaal met je bank
display 30 · kop 24/400 · knop/label 16/600, line-height 1
Plus Jakarta Sans · Lufga-substituut · body
Classic Car Parts
Je wordt doorverwezen naar de geselecteerde bank om de betaling af te ronden.
Het resterende bedrag verloopt op 26-12-2025, 11:42 GMT+1
merchant 14/500 · body 15/400 · note 13/400
Inter · formulieren & tabellen
Kaarthouder naam
Volledige naam op kaart
250.000 · 85% · 67%
label 13/500 · input 14/400 · tabelcel 15/600
Radii & spacing
2px
chips
5px
kaart-actie
6px
veld / Apple Pay
10px
werkpaard: kaarten, tegels, CTA
16px
kaart / paneel
20px
tabelkaart
24px
filterpil
5
7
10
15
20
24
30
werkelijke gaps uit de source · kaarten pad 30 · lijsten gap 10
Knoppen
PayButton · h57 · r10 · hover licht op · press scale .99
kaart-actie · h48 · r5 · Inter 15/600
donkere actie / Apple Pay · h45 · r6
Tegels & rijen
ING
donker: paneel #1a1a23 · ring rgba(255,255,255,.18) · zoekveld chip #242430
Formulier & filters
veld · h45 · r6 · ring #dbdbdb · focus indigo
filterpil · r24 · pad 12/16 · label faint + waarde ink
Merk & partners
logo hercolort via currentColor · magenta op licht, wit op ink
echte merken uit de fig · banken 35px · methoden 25px · kaartmerken 20/14
Lufga is vervangen door Plus Jakarta Sans (licentie). Motion: cubic-bezier(.2,0,0,1), 120–200 ms; knoppen schalen naar .99 bij indrukken.