Design system · v1.0 prototype

Lab + donker podium

De bouwstenen van de nieuwe Galaxy Gadgetz-webshop. Een lichte, rustige winkel waarin roze alleen de actie aanwijst, met een donker podium voor de momenten waarop je iets ontdekt of ziet werken. Elke component heeft een commerciële of vertrouwensfunctie, en geen enkele component suggereert bewijs dat er niet is.

Pijlers
Discover · Select · Experience · Trust
Fonts
Inter (UI, koppen) + JetBrains Mono (lab-laag)
Grid
4/8 px · 390 → 600 → 900 → 1200 · max 1280
Norm
WCAG 2.2 AA · tap ≥ 44 px · reduced motion
Status
Prototype 9 okt 2026 · inhoud is voorbeeld

Fundament

Principes en compliance

Vijf ontwerpregels die elke pagina volgt. De compliance-regels zijn harde eisen uit het strategisch dossier (§3.3 en §13.2), geen stijlvoorkeur.

1 · Product eerstOp mobiel staan productroute, prijs, levering en koopknop boven decoratie. Hero's blokkeren nooit informatie.
2 · Roze is actieRoze (#C42F7A) markeert de primaire actie en een enkel accent. Geen verloop, geen gloed, geen roze vlakken.
3 · Claims kloppenPrijs, levertijd en specificaties komen uit de productdata. Medialabels laten zien wat een echte opname is en wat illustratief.
4 · Podium is schaarsHet donkere podium is alleen voor Ontdek, demo's, campagne en 3D/AI. De winkel zelf blijft licht.
5 · Eerlijke statenLeeg, fout, niet leverbaar en geweigerde toestemming zijn ontworpen, nooit verborgen of gefaket.
6 · ToegankelijkContrast ≥ 4.5:1, focusring 2 px met offset, tap ≥ 44 px, één H1, alles met het toetsenbord bedienbaar.
Wel
  • Statuslabels Uitgelicht, Nieuw en Niet leverbaar.
  • Levertijd per product én per leverroute, vóór de betaling. Meerdere herkomsten: per pakket tonen.
  • Reviewmodule met lege staat. Alleen geverifieerde kopers.
  • AI-beeld en -video altijd gelabeld Illustratief (AI); echte demo's Echte demo.
  • Kortingsprijs alleen met de regel Laagste prijs afgelopen 30 dagen: € ..
Nooit
  • Fictieve reviews of sterren, "Bestseller" of "Populair" zonder verkoopdata.
  • Trustpilot- of keurmerklogo's zonder geldige aansluiting.
  • Aftellers, "X mensen kijken", "nog maar 2 op voorraad" of andere kunstmatige urgentie.
  • "Morgen in huis" als algemene belofte.
  • Doorgestreepte prijzen zonder controleerbare laagste prijs van de afgelopen 30 dagen.

Fundament

Kleur en contrast

Contrastwaarden worden live uit de tokens berekend (WCAG 2.x relatieve luminantie). AA vraagt 4.5:1 voor tekst en 3:1 voor grote tekst en grafische delen van bediening.

Lichte winkel

Roze: actiekleur

Status en feedback

Donker podium

Gemeten tekstparen

VoorbeeldVoorgrondAchtergrondGebruikRatio

Fundament

Typografie

Inter blijft de huisletter (continuïteit met de huidige site), met zware, strak gespatieerde koppen. JetBrains Mono is de lab-laag voor specificaties, maten, labels en labels. Schaal is vloeiend tussen 390 en 1280 px.

Lab-laag (mono)

Eyebrow · sectielabel Nieuw 45 x 9,5 x 9,5 cm · 420 g · 2700-6500 K
Mono nooit voor lopende tekst of knoppen..gg-mono · .gg-eyebrow

Fundament

Ruimte, radius, schaduw, lagen

Alles op een 4/8-grid. Sectieruimte is vloeiend (48 → 96 px), zijmarge groeit per breakpoint (16 / 24 / 32 / 40 px).

Spacing

Radius

Schaduw

Breakpoints en z-index

TokenWaardeGebruik
basis390 pxOntwerpstart, 2 productkolommen, filters in sheet, vaste koopbalk op PDP
sm600 px3 productkolommen, servicestrook 2 kolommen
md900 pxDesktopnavigatie met megamenu, zoekveld in header, koopbalk verdwijnt
lg1200 px4 productkolommen, merkregel naast logo
container1280 pxMaximale inhoudsbreedte
z-index100 · 200 · 300 · 350 · 400 · 500 · 600 · 700 · 800 · 900sticky · header · megamenu · koopbalk · overlay · drawer · modal/zoeken · toast · prototype-badge · cookie

Fundament

Beweging

Kort en functioneel: beweging bevestigt een actie of laat zien waar iets vandaan komt. Bij prefers-reduced-motion worden alle duurtokens 0 ms en stoppen loops (Ken Burns, shimmer, auto-rotate).

Easing standaard cubic-bezier(.2,.7,.2,1); spring alleen voor microinteracties (teller, vinkje).--gg-dur-1..4 · --gg-ease

Fundament

Iconen

Eén eigen lijnset op een 24-raster, lijn 1,75 px (2 px onder 18 px), ronde uiteinden. Altijd met tekstlabel of aria-label; decoratief aria-hidden. Gebruik: GG.icon('truck').

Bediening

Knoppen

Eén primaire stijl (roze, radius 10 px). Per scherm(deel) maximaal één primaire knop: op de productpagina is dat In winkelmand, in de winkelmand Veilig afrekenen.

Varianten .gg-btn--primary · --secondary · --ink · --tertiary · --icon

Alle producten

States

Hover/active/focus hier geforceerd getoond. Loading houdt de breedte vast; "Toegevoegd" bevestigt 1,6 s..is-loading · .is-done · :disabled

Maten en vol-breed --sm · --lg · --block

Klein wordt op touch automatisch 44 px hoog.@media (pointer: coarse)

Op donker podium

Bekijk alle producten
Wel
  • Werkwoord + object: "In winkelmand", "Bekijk in 3D".
  • Secundair voor alternatieven, tertiair voor navigatie.
Niet
  • Twee roze knoppen naast elkaar.
  • "Koop nu, op = op" of andere druktekst.

Bediening

Formulieren

Label altijd boven het veld, nooit alleen een placeholder. Foutmelding onder het veld, gekoppeld met aria-describedby, en zegt wat er moet gebeuren. Validatie bij verlaten van het veld en bij verzenden (form[data-gg-validate]).

Dit e-mailadres lijkt niet te kloppen. Voorbeeld: naam@voorbeeld.nl

Bijv. A of 2-hoog

Velden zijn 48 px hoog, tekst 16 px (voorkomt inzoomen op iOS)..gg-field · .gg-input · .gg-select · .gg-textarea · .gg-input-group

Live validatie

Checkbox, radio, switch

Checkbox
Filter met aantal
Radio
Switch
Hele rij is klikbaar (≥ 44 px)..gg-check · .gg-radio · .gg-switch

Bediening

Varianten, keuzekaarten en aantal

Varianten zijn radioknoppen in een fieldset. Een uitverkochte variant blijft kiesbaar zodat de klant ziet wanneer hij terugkomt; de koopknop wordt dan "Niet leverbaar".

Kleur: Zwart
Aantal: 1 stuk
Stepper
Stepper: min 1, max 10 per artikel; bij max wordt + uitgeschakeld en volgt een melding..gg-options · .gg-option.is-unavailable · .gg-stepper
Keuzekaart voor verzend- en betaalmethode in de checkout..gg-choice

Bediening

Chips

Filterchips zijn knoppen met aria-pressed; categoriechips zijn links. Op mobiel in een horizontale scroller (.gg-scroller) zonder pagina-overflow. Filteropties zonder resultaten worden uitgeschakeld, niet verborgen.

Categoriechips met beeld; actieve categorie met aria-current="page"..gg-chip--category

Product en bewijs

Statuslabels en medialabels

Gewone webshoplabels met een vaste betekenis. Geen labels die iets beloven wat niet uit de productdata blijkt.

LabelBetekenisAlleen tonen als
UitgelichtExtra aandacht in de shopTijdelijk, bijvoorbeeld voor een nieuw of seizoensproduct.
NieuwRecent toegevoegdMaximaal 60 dagen na publicatie.
Niet leverbaarTijdelijk geen voorraadAltijd, zodra voorraad 0 is. Met verwachting zonder datum te beloven.
BestsellerGebaseerd op verkoopdataNiet in dit ontwerp. Pas met aantoonbare, consistente verkoopdata.

Medialabels

Op elke video, AI-visual en 3D-weergave, linksboven, niet weg te klikken.GG.mediaLabel('demo' | 'ai' | '3d' | 'render')

Product en bewijs

Prijsblok

Prijzen inclusief btw, tabulaire cijfers. De kortingsstaat bestaat alleen als ontwerpstaat: een doorgestreepte prijs is altijd de eigen laagste prijs van de afgelopen 30 dagen, en dat staat er letterlijk onder.

Render met GG.price(product, { variant, size: 'lg', vat: true })..gg-price

Product en bewijs

Leverinfo per route

Levertijd hoort bij het product en de route, niet bij de winkel. De verwachte periode wordt berekend uit vandaag en de werkdagen van de route. Geen "morgen in huis" als algemene belofte.

Compact op kaarten en in de winkelmand, uitgebreid op de PDP, multi-route in winkelmand en checkout.GG.delivery(p, { compact | box }) · GG.deliveryMulti(['eu','nl'])

Product en bewijs

Productkaart

Hele kaart is één link (naar de PDP); de snelknop staat erboven. Volgorde: beeld met status, naam die zegt wat het is, korte belofte, prijs, levering. Tweede foto verschijnt bij hover (alleen muis).

Standaard, met demo, uitverkocht GG.renderProductCard(p)

Uitgelicht, groot { layout: 'editorial' }

Compact / lijst en laadskelet { layout: 'compact' } · GG.renderSkeletonCard()

Product en bewijs

Categorie- en use-case-tegel, sectiekop

Tegels openen een gebruikssituatie, niet een productsoort: de vraag uit het dossier staat erop. De navigatie werkt met 2, 3 of 4 categorieën; categorieën met status later verschijnen niet in menu's.

Shop op gebruikssituatie

Waar wil je het makkelijker hebben?

Vier routes, elk met handige producten.

Alle producten
Sectiekop: eyebrow (mono), H2, optionele sub, link rechts..gg-section-head · GG.renderTile(category)

Product en bewijs

Media: echte demo, illustratief (AI), 3D

Eerst correcte productfoto's, daarnaast een korte echte demo. AI-sfeer en 3D zijn optioneel en altijd gelabeld. Video: stille loop met poster en ondertitels, pas afspelen na tik, nooit autoplay boven de vouw. 3D: poster eerst, model-viewer laadt pas na "Bekijk in 3D".

Wel
  • Demo: echt product, herkenbare situatie, 6-20 s, ondertitels aan.
  • 3D alleen waar vorm of maat de keuze bepaalt (hier: draagbare radio).
  • Koopknop blijft altijd zichtbaar en bruikbaar naast de media.
Niet
  • AI-beeld dat een eigenschap toont die het product niet heeft.
  • AI-video gebruiken als bewijs dat iets werkt.
  • Zware video of 3D laden voordat iemand erom vraagt.

Externe media zonder toestemming

Deze video staat bij een externe dienst

Je hebt marketingcookies geweigerd. Laad de video eenmalig, of bekijk de foto's en specificaties hieronder.

Staat "consent geweigerd": geen stille tracking, wel een gelijkwaardig alternatief..gg-player (consent)

Product en bewijs

Specificaties, accordion, tabs

Specs in een echte tabel met waarden in mono. Op de PDP staan lange blokken in een accordion (mobiel) of tabs (desktop). Onbekende waarden worden niet ingevuld maar gemarkeerd.

GG.renderSpecs(p)

45 cm breed, ongeveer de breedte van een 24-inch monitor. Past op schermen van 0,8 tot 3 cm dik.

.gg-accordion[data-gg-accordion] · data-single

Pijltjestoetsen wisselen tussen tabs; Home en End springen naar de eerste en laatste.

[role=tablist] · .gg-segment

Product en bewijs

Reviewmodule

Bij lancering zijn er geen reviews; de lege staat is daarom de standaard. Reviews komen alleen van geverifieerde kopers, na levering. De gevulde weergave hieronder is een voorbeeldweergave en mag alleen in deze bibliotheek staan.

Standaard op elke PDP.GG.renderReviewsEmpty()

Reviews (voorbeeldweergave)

Voorbeeldweergave · geen echte review

1 review van een geverifieerde koper. We publiceren alle reviews, ook kritische. Reviewbeleid

[Voornaam]Geverifieerde koper4/5

[Tekst van de koper. Wat werkte, wat niet. Wordt niet ingekort of aangepast.]

Reactie Galaxy Gadgetz: [optioneel]

Score als tekst (4/5), geen sterren. Alleen tonen met echte, gecontroleerde reviews..gg-review

Kopen

Winkelmand: drempel, regel, totalen, bundel

De drempelbalk is instelbaar (settings.free_shipping_threshold) en verdwijnt als die null is. Aanvullers komen uit complements van de producten in de mand, nooit uit "anderen kochten ook".

Drempelbalk

Winkelmandregel en totalen

    Verwijderen toont een toast met "Ongedaan maken". Fout bij aantal: melding onder de regel.GG.renderLineItem(item) · .gg-totals

    Bundelmodule

    Alleen echte, logische combinaties. Geen nep-bundelkorting: de prijs is de som, tenzij er een vastgestelde bundelprijs is..gg-bundle

    Kopen

    Servicestrook

    Alleen beloftes die operationeel waar zijn. Retourtermijn is een placeholder (14 dagen bedenktijd) tot het beleid is vastgesteld.

    GG.renderServiceStrip()

    Feedback en navigatie

    Meldingen, toast, tooltip

    Meldingen staan in de pagina (blijvend), toasts bevestigen een handeling (tijdelijk, met optionele actie). Kleur draagt nooit alleen de betekenis: er is altijd een icoon en tekst.

    Deze bestelling komt in 2 pakketten. Het pakket uit de EU kan 2 dagen later aankomen.
    Je retour is aangemeld. We stuurden een bevestiging naar naam@voorbeeld.nl.
    Bevat een lithium-accu. Neem dit product mee in je handbagage, niet in de ruimbagage.
    .gg-alert--info · --success · --warning · --error
    Bedenktijd
    Toasts: rechtsonder (desktop), onderaan (mobiel), aria-live="polite", pauzeren bij hover. Tooltip: klik/tap of hover, Esc sluit.GG.toast(msg, { type, action }) · GG.tooltip(text)

    Feedback en navigatie

    Modal, sheet, drawer

    Alle lagen: focus gaat erin en blijft erin (focus-trap), Esc en klik op de achtergrond sluiten, de pagina scrolt niet mee, en focus gaat terug naar de knop die opende. Sheet: van onder op mobiel, van rechts vanaf 900 px (filters). Drawer: winkelmand.

    GG.openLayer(id | el) · data-gg-open · data-gg-close

    Retour aanmelden

    Je meldt een retour aan voor bestelling GG-10421. Je hebt nog 11 dagen bedenktijd.

    Filters 17 producten

    Levering

    Statische weergave; de knoppen hierboven openen de echte lagen..gg-layer.gg-modal · .gg-sheet · .gg-drawer

    Feedback en navigatie

    Leeg, fout, laden

    Elke staat zegt wat er aan de hand is en biedt een volgende stap. Foutstaten noemen geen technische details, wel een referentie voor de klantenservice.

    Geen producten met deze filters

    Probeer een filter minder.

    Dit lukt nu even niet

    We konden de producten niet laden. Je winkelmand is bewaard.

    Contact

    Referentie: GG-ERR-7F3A

    Producten laden

    Duurt het langer dan een paar seconden, dan is je verbinding traag. We tonen eerst de foto's.

    Laden in lijsten: skeletkaarten (zie Productkaart), in knoppen: .is-loading..gg-state · --error · --boxed · .gg-spinner

    Feedback en navigatie

    Cookiebanner, herroepen, prototype-badge

    Weigeren en Accepteren zijn gelijkwaardig: zelfde stijl, zelfde grootte, naast elkaar. Instellingen klapt de keuzes uit. De herroepingsknop is een vaste, goed vindbare online functie (dossier §13.2), naast het modelformulier.

    GG.showCookieBanner()

    Bestelling herroepen

    Je hebt 14 dagen bedenktijd na ontvangst. Vul je bestelnummer en e-mailadres in, dan bevestigen we je herroeping direct per mail.

    Start herroepingLiever het modelformulier (pdf)
    Ook in de footer als .gg-withdraw-link en in elke orderbevestiging..gg-withdraw
    Prototype · producten, prijzen en levertijden zijn voorbeelden
    Op elke pagina linksonder, inklapbaar, laat kliks door..gg-proto-badge

    Feedback en navigatie

    Header, footer en vaste koopbalk

    Header en footer worden door app.js in elke pagina gezet (zie bovenaan en onderaan deze pagina). Hoofdroutes: Shop (megamenu op gebruikssituatie), Ontdek, Cadeaugids. Klantenservice staat in de utility-balk, het mobiele menu en de footer. Zoeken is op mobiel altijd zichtbaar onder de header en schuift bij scrollen in tot een icoon.

    1. Utility-balk: drie ware service-USP's, merkregel en secundaire links.
    2. Logo + merkregel (merkregel vanaf 1200 px).
    3. Shop-megamenu: kolom per gebruikssituatie met de klantvraag, sublinks en een uitgelicht product met reden. Hover, klik en toetsenbord (↓ opent, Esc sluit).
    4. Zoeken: overlay met recente zoekopdrachten, categorieën, gidsen, producten en een eerlijke "geen resultaten"-staat. / opent, Enter gaat naar /zoeken/.
    5. Winkelmand: teller en drawer met drempelbalk, multi-route-melding, aanvullers en totaal inclusief verzending.

    Vaste koopbalk (mobiel, PDP)

    Monitor light bar · Zwart€ 39,95

    Verschijnt pas als de koopknop uit beeld scrollt, en verbergt geen keuzevelden: heeft het product varianten die nog niet gekozen zijn, dan scrolt de knop terug naar de keuze in plaats van toe te voegen. Klasse body.has-buybar tilt de prototype-badge op.

    .gg-buybar.is-visible