KEK Design System

Levende referentie voor Kunst & Kadootjes. Elk component hieronder is gebouwd met de echte Gutenberg/Kadence-blokken en kleuren; wijzig je de Kadence global palette of typografie, dan wisselt alles hier mee. Vaste naamgeving: KEK / ….

1. Kleuren — Kadence global palette

Enige bron van waarheid. De --kek-* tokens verwijzen hiernaar; neutrals zijn afgeleid van --kek-ink via color-mix.

palette1
Turquoise · –kek-teal · #01A49E
palette2
Petrolgroen · –kek-teal-deep · #01837E
palette3
Donkergroen · –kek-ink · #3D4642
palette8
Pastelgeel · –kek-yellow · #FCEDB0
palette9
Wit · –kek-white · #FFFFFF
–kek-surface
licht vlak / hover
–kek-line
randen / lijnen
–kek-muted
gedempte tekst
–kek-star
reviewsterren
–kek-danger
rood accent

2. Typografie — Inter

H1 · Kop niveau 1 (32px)

H2 · Kop niveau 2 (28px)

H3 · Kop niveau 3 (24px)

H4 · Kop niveau 4 (21px)

Body — Inter Regular, 18px, regelhoogte 1.6. De donkerte kunst van betaalbare beelden en cadeaus: dit is hoe lopende tekst eruitziet in de huisstijl. Een voorbeeldlink in petrolgroen.

3. Knoppen — Kadence Button (synced patterns)

Invoegen via / → KEK / Primaire knop of KEK / Secundaire knop, dan eigen tekst/link. Palet-gedreven.

KEK / Primaire knop

Knop

KEK / Secundaire knop

Knop

KEK / Witte knop (op kleurvlak)

Voor gebruik op een gekleurd vlak (bv. de product-tegel). Blokstijl KEK Wit op een Knop-blok. Heeft een hover-state (licht op + schaduw).

Shop nu

4. Product-cart — één component, alle states

Eén kaart voor álle contexten: shop, carrousels, gerelateerde producten, upsells en zoekresultaten. Je plaatst ‘m door een Products- of Product Carousel-blok te gebruiken — de kaart erft automatisch deze stijl. Alle states hieronder zijn categorie- en prijsgedreven; je stelt niets per kaart in.

  • Standaard — geen label.
  • B-keuze — teal blob linksboven (categorie tweedekans, vorm uit Figma). Onderdrukt “Aanbieding”: die korting ligt er al in besloten.
  • Aanbieding — teal pill linksboven bij een sale-prijs, alléén als het géén B-keuze is.
  • Handgemaakt — witte pill linksonder op de foto (categorie productie-handgemaakt).
  • Favoriet aan/uit — hartje rechtsboven: mint-outline = uit, gevuld teal = aan. Klik om te wisselen (localStorage kek-favs).
  • Van/voor-prijs — bij korting de oude prijs doorgestreept; bij beide prijzen staan de centen kleiner.
  • Lange titel — altijd maximaal 2 regels, daarna “…”.

Van links naar rechts: standaard · B-keuze · Aanbieding · Handgemaakt. Klik op een hartje om de favoriet-state te zien.

Lange titel — afgekapt op 2 regels:

5. Mega-menu — custom (bewuste uitzondering)

Het mega-menu wijkt bewust af van native Kadence: shortcode

, exact volgens Figma (categorielijst links + sub-items rechts). Zie de header bovenaan deze pagina.

6. USP-balk — herbruikbaar blok

Synced pattern KEK / USP-balk: 4 USP’s met teal checkbox-vinkje. Invoegen via / → “KEK / USP-balk”. Eén keer bewerken → overal bij. Voorbeeld:

Alle producten zijn op voorraad

Bestelling ophalen mogelijk

Voor 12:00 besteld, morgen in huis

Verzending gratis én verzekerd vanaf €75

7. Call-out / melding

Eén stijl voor álle WooCommerce-meldingen (bron: mu-plugin kek-callout.php). Info en succes — zoals “toegevoegd aan winkelmand” en “Heeft u een cadeaubon?” — zijn identiek: crème vlak, teal rand (--kek-teal), ink-tekst op gewicht 500 en --kek-teal-deep links. Tekst ≈ 9,7:1 en links ≈ 4,6:1, dus boven de WCAG AA-norm (4,5:1). Fout blijft rood. Niet los stylen — de klassen .woocommerce-info, .woocommerce-message en .woocommerce-error erven deze stijl automatisch.

Heeft u een cadeaubon? Klik hier om uw code toe te voegen
Product is toegevoegd aan je winkelmand. Bekijk winkelmand
Vul een geldig e-mailadres in om verder te gaan.