Pagina-recept & regels

Begin elke subpagina vanuit ditzelfde skelet en deze regels, dan zit de pagina in één keer in lijn met home. Geleerd tijdens het bijwerken van de AI Build Sprint pagina.

Het skelet — secties in volgorde, met achtergrond

1
Donkere inkt-hero .hero-ink — compact (padding 120/68), titel + intro links op ~2/3, een licht-wit info-kaartje rechts op ~1/3. Géén teal-gradient-hero op subpagina's.
2
Klantlogo-balk .logobar — de lopende marquee met de echte logo's. Nooit lege beeldslots.
3
Witte inhoudssecties .section — de sectie direct ónder de logobalk is wit (géén nw-surface-paper), zodat de balk doorloopt. Wissel daarna eventueel met paper voor ritme.
4
Teal-band .band-teal — voor één accentmoment, met het witte nw-icoon (mark-outline.svg) rechtsonder.
5
Gradient-CTA als afsluiter .cta--photo — de storm-foto met teal→inkt-overlay. Niet de platte teal.
6
Footer .site-footer — staat al overal goed; niet aanraken.

Regels — do / don't

Wel

Lopende tekst zonder ‘—’: gebruik punten, komma's of · bij labels.
Eyebrow rechtsboven via .sec-head, zonder lange streep.
Editorial kaarten (bovenlijn, geen kader) als standaard; witte kaart met badge alleen voor herkennings-/keuzemomenten.
Knoppen: één label, één pijl, een echte href.
Teal-vlakken krijgen diepte via een gradient + grain, niet één platte kleur.

Niet

Geen ‘—’ in zinnen (ziet er AI-achtig uit).
Geen oranje callouts of gekleurde blokjes met accent-rand; callouts zijn clean (bovenlijn + mono-label).
Geen rhombus-motif.svg (overlappende rechthoeken) — gebruik het nw-icoon.
Geen dubbele pijlen of dode #-links.
Geen platte teal-blokken zonder diepte.

Subpagina-hero — .hero-ink

De propositie · voorbeeldpagina

Compacte donkere hero. Titel links, info-kaart rechts.

Korte introzin van één of twee regels. Knop eronder, met daarnaast een korte ondersteunende zin.

Plan een kennismaking Vaste prijs voor vaste scope.

4–8 wk

van validatie naar productie

Lichte witte kaart op donker
Donkere tekst, teal accenten
~1/3 breedte

Het info-kaartje rechts is .prop-aside binnen .hero-ink — automatisch een lichte witte kaart met donkere tekst en teal accenten.

Kleur

Merk — teal

Teal 300

--nw-teal-300

Teal 500 · primair

--nw-teal-500 · #0094b8

Teal 600

--nw-teal-600

Teal 700 · diep

--nw-teal-700 · #00708f

Inkt & oppervlak

Ink 950

--nw-ink-950 · #07090b

Ink 600

--nw-ink-600

Ink 300

--nw-ink-300

Grijs-wash

--bg-subtle · #f4f6f7

Pagina

--bg-page · #ffffff

Signaal · warm

--nw-signal · #ff6a3d

Teal + inkt + wit + één warm signaal. Geen cobalt, geen paars. Diepte ontstaat door witte tinten op teal en grijstinten op wit — niet door nieuwe tinten.

Typografie

Display
Space Grotesk
400 · -0.025em

Werkende AI in productie.

Sectiekop
.section-title

Van AI-experiment naar werkende AI.

Subkop
h3 · Space Grotesk 500

Reviewer-in-the-loop, standaard.

Body
Hanken Grotesk
15–18px · 1.6

We bouwen één werkende, geïntegreerde AI-oplossing die je team echt gebruikt — en we draaien er zelf op, dus we weten dat het werkt. Lopende tekst staat in Hanken Grotesk: rustig en goed leesbaar naast de Space Grotesk-koppen.

Mono
JetBrains Mono
labels & cijfers

AI-first · sinds 2023 — 14 control families · 900+ evidence items

Koppen op Space Grotesk (--font-display), lopende tekst op Hanken Grotesk (--font-sans), runtime/labels op JetBrains Mono (--font-mono). Go small or go big — geen middenmaat.