Huisstijl voor het web

Zo ziet Stelvio Business Consultancy eruit op het web

De merkkleuren en Poppins lagen al vast in het brandbook. Dit document legt de rest vast: welk design we volgen, het sectie-ritme, de kleurverdeling en de vaste componenten — zodat elke pagina die we vanaf nu maken hetzelfde voelt.

Het design-besluit: we gaan verder op de combinatie — het typografische fundament en de witruimte van stijlproef A, de donkere foto-opening van stijlproef B, en het dubbel-donkere kopritme van Dennis: hero én de sectie eronder in antraciet, daarna wit voor alles wat gelezen moet worden. Oranje blijft accent en wordt nooit een leesvlak.

1 · Het sectie-ritme (de sandwich)

Hero — antraciet met documentaire fotowitte kop, oranje knop · hoogtelijnen-motief subtiel

Kernband — antraciet, één tint donkerdercijfers of kernbelofte · oranje accenten

Leescontent — witalles wat gelezen moet worden: diensten, expertise, uitleg

optioneel: smalle oranje kernlijnmax. één per pagina

Leescontent — witcases, consultants, FAQ

Foto-reveal-band — vaste foto door het vensterquote eroverheen · de adempauze

Leescontent — witlaatste inhoudsblok

CTA — antraciet"Let's talk about your SAP challenge" + oranje knop

Footer — antraciet donkernavigatie, NAP, kruislink club

De pagina opent donker (autoriteit, rust) en sluit donker (richting: contact). Alles ertussen is licht, want lezen op donker vermoeit.
Subpagina's zonder grote foto: zelfde ritme, maar de hero mag dan effen antraciet met hoogtelijnen-motief zijn.
Nooit twee donkere content-secties direct ná het leesgedeelte laten volgen — de reveal-band is de enige onderbreking.

2 · Kleurverdeling

±55% wit

±37% antraciet

Antraciet #353231
hero, kernband, cta, footer, koppen op wit

Antraciet-diep #2a2726
tweede donkere sectie, footer-bodem

Oranje #f05a28
knoppen, links, details, kernlijn — nooit leesvlak

Grijs #606161
bijschriften en secundaire tekst

Warm wit #faf8f6
de leesondergrond; kaarten zuiver wit #ffffff

Oranje-zweem #fdeee7
pills en zachte accenten op wit

Oranje-regels: maximaal één primaire knop per scherm; links altijd in de brandkleur (nooit browser-blauw); op donker de tekstvariant iets lichter voor contrast.
Geen grote oranje vlakken. De smalle kernlijn (±60px hoog, witte tekst, alleen cijfers/feiten) is de enige uitzondering — maximaal één per pagina.

3 · Typografie

Rol	Letter	Gebruik
Koppen & knoppen	Poppins 600/700	groot en royaal; H1 op hero mag fors (tot ±3,9rem), letterafstand licht negatief
Lopende tekst	Inter 400/500	15–16px, regelbreedte max ±68 tekens, regelhoogte 1,65
Eyebrows/labels	Poppins 600, kapitaal	klein, ruime letterafstand, oranje op wit / oranje-licht op donker
Cijfers	tabelcijfers	kernband, cases, tabellen

4 · Componenten

Let's talk Explore our expertise SAP EAM Read the case →

Knoppen: primair = oranje (alleen voor contact-acties: "Let's talk", "Start the conversation" op het formulier); secundair = ghost met inktrand. Nooit twee primaire naast elkaar.
Cards: wit, 1px lijn, 12–16px radius, zachte schaduw alléén waar de card klikbaar of "levend" is (consultant-band); statische inhoud liever open met lijnen (het genummerde raster uit stijlproef A).
Consultant-cards: ronde foto met oranje ring, voornaam + achternaam, module-pill, eigen woorden als spreuk.

5 · Fotografie & motief

Foto-grading

Documentair: werkend, niet poserend
Verzadiging ~45–60%, licht contrast omhoog
Donkere gradient-overlay op hero's zodat witte tekst leest
Eén grading voor álle foto's — één wereld

Hoogtelijnen-motief

Contourlijnen (de Stelvio-pas) als stil achtergrondmotief
Op wit: antraciet op ±14% · op donker: wit op ±18%
Oranje middelpunt mag, spaarzaam
Nooit achter lopende tekst, alleen in hero's en cta's

6 · Gedrag & toegankelijkheid

Beweging minimaal en doelgericht: zachte scroll-reveals, de consultant-band, de foto-reveal-band. Alles respecteert prefers-reduced-motion en werkt zonder JavaScript.
Contrast WCAG AA overal; corporate inkopers toetsen hierop.
Mobiel: de vaste reveal-achtergrond wordt gewoon scrollend; het donkere openingsblok blijft.

Referenties: stijlproef A en B in Orders/Stelvio/Webdesign · brandbook (kleuren, logo, Poppins) · toon-kader in het bedrijfsprofiel. Dit document is de bron voor het wireframe-naar-design-traject en de bouw.