Petrol & Koper

Dark mode: de tokens wisselen alleen van ondergrond en tekst; petrol-500 en koper-500 blijven identiek zodat knoppen en badges in beide thema’s hetzelfde merk uitstralen. EV-goud, Qualified-paars en DV-grijs krijgen in het donker een lichtere tint om AA te halen.

Waarom Bricolage: een grotesk met optische maten en een eigenzinnige “g” en “a”, waardoor koppen een gezicht krijgen zonder speels te worden.

Waarom Plex: Sans en Mono delen dezelfde tekenaar en x-hoogte, dus een ACME-commando in een lopende zin blijft op één lijn staan.

Waarom: negen stappen zijn genoeg voor elke layout en te weinig om willekeurige pixelwaarden te verleiden.

Waarom: 12 kolommen delen door 2, 3, 4 en 6, wat precies de kaartrasters zijn die de site nodig heeft (twee ingangen, drie cases, vier domeinen, zes merken).

Waarom: 6px op controls en 12px op kaarten is scherp genoeg voor een security-merk en zacht genoeg om niet als formulier uit 2005 te lezen; 20px is alleen voor device-frames en sheets.

Waarom: 44px haalt de aanraaknorm op mobiel zonder op desktop log te ogen, en één knopkleur maakt de CTA-hiërarchie afdwingbaar in code.

Waarom: één featured-card per raster geeft de belangrijkste dienst gewicht zonder een extra kleur toe te voegen.

Waarom: de badge is het enige element waar een klant op vergelijkt; hij moet in een tabel, een kaart en een menu identiek lezen.

Waarom: het merk staat als bijschrift onder de productnaam, zodat de klant eerst op behoefte kiest en pas daarna op fabrikant.

Waarom: grijs houdt zes merken visueel gelijk en houdt de aandacht bij de koperen knop.

Waarom: social proof boven de vouw is het goedkoopste conversiemiddel dat de huidige site mist.

Waarom: de foutmelding vertelt de oplossing, niet alleen het probleem; dat scheelt de helft van de afhakers op offerteformulieren.

Waarom: twee niveaus dwingen redactionele keuzes af: elk product krijgt één plek, gegroepeerd op hoe een klant zoekt (type, validatie, tool) in plaats van hoe het bedrijf is georganiseerd.

Waarom: een accordion houdt de twee niveaus intact op mobiel en laat de CTA staan, waar een uitschuifmenu met 60 links hem juist verbergt.

:root{
  --ink:#0E1B26; --ink-2:#16283A;
  --petrol-900:#0F3A47; --petrol-700:#14505F; --petrol-500:#1E7A8C; --petrol-300:#6FB3C0; --petrol-100:#DCEEF1;
  --koper-700:#9E4519; --koper-600:#B8531F; --koper-500:#D8622A; --koper-300:#F0A77E; --koper-100:#FBE9DF;
  --bg:#F6F8F9; --surface:#FFFFFF; --surface-2:#EEF2F4; --line:#D9E0E4; --line-strong:#B9C4CB;
  --text:#0E1B26; --text-2:#465A66; --text-3:#5F717C; --on-dark:#F2F6F7; --on-dark-2:#B8C7CE;
  --ok:#1F8A4C; --warn:#C7860B; --danger:#C2352B; --info:#1E7A8C;
  --dv:#5B6B76; --ov:#1E7A8C; --ev:#8A5A0B; --ev-bg:#FBF1D9; --qual:#5B3FA6; --qual-bg:#EDE8F8;
  --r-1:6px; --r-2:12px; --r-3:20px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --shadow-1:0 1px 2px rgba(14,27,38,.06),0 1px 3px rgba(14,27,38,.08);
  --shadow-2:0 8px 24px -8px rgba(14,27,38,.18);
  --focus:0 0 0 3px #F6F8F9,0 0 0 6px var(--petrol-500);
  --font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --container:1200px; --gutter:24px;
}
/* dark */
[data-theme="dark"]{
  --bg:#0B151D; --surface:#12212C; --surface-2:#182B38; --line:#243947; --line-strong:#375062;
  --text:#EAF1F4; --text-2:#B8C7CE; --text-3:#87A0AC; --on-dark:#F2F6F7;
  --petrol-100:#143441; --koper-100:#3A2418; --ev-bg:#3A2C10; --qual-bg:#2A2140;
  --ev:#E0B457; --qual:#B9A3EE; --dv:#9FB0BA;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px -8px rgba(0,0,0,.6);
  --focus:0 0 0 3px #0B151D,0 0 0 6px var(--petrol-300);
}

Waarom: tokens in CSS-variabelen betekenen dat een merkkleur-wijziging één regel is, en dat Storyblok-redacteuren nooit iets buiten het systeem kunnen zetten.