Huisstijlhandboek · Variant B

Maas

Typografisch en vlak: geen foto in de kop, wel een kop van 128 pixels. Diep navy met Maas-teal als accent.

01

Kleur

Navy diep#0f2143kopvlak, kosten-band, footer
Navy zacht#1b3160panelen op donker
Paper#e3eef0tekst op navy
Teal-mist#d3e8e6lichte band
Mist licht#eef6f5tweede paneel
Maas-teal#2f9c95accent, contactband, kosten-cijfers; witte tekst erop
Hairline#b7c8c8scheidingen

Tekst op navy is altijd Paper, nooit wit. Het accent is uitsluitend een vlak: kicker, knopvierkant, paneel. Nooit als tekstkleur, behalve voor de actieve pagina in de footer.

02

Typografie

H1 hero · 44→88 · 300
Hart voor uw zaak.
H1 · 40→96 · 300
Contact
H2 · 30→40 · 300
Op een geschil zit niemand te wachten.
H3 · 22→28 · 300
Gefinancierde rechtsbijstand
Lead · 22 / 1.5
Persoonlijke rechtsbijstand in strafrecht, huurrecht, sociaal zekerheidsrecht en mijnbouwschade.
Body · 16 / 1.6
Ik behandel uw zaak met zorg en kies voor een persoonlijke benadering. U heeft met mij te maken, van het eerste gesprek tot het laatste.
Kicker · 15 / 22 · 400
Introductie Rechtsgebieden

Koppen: Sora in weight 300, altijd. Body en interface: Manrope 400, knoplabels 500. Geen uppercase, geen letterspacing, geen vet in koppen. Beide via Google Fonts.

03

De snede

beide · 20px mobiel, 80px desktop
linksboven · beelden
rechtsonder · panelen
linksonder · alleen het kopvlak

Altijd dezelfde diagonaal. Kopvlak linksonder weg; beelden en panelen die eroverheen komen linksboven en/of rechtsonder. Radius alleen op kicker en pijlvierkant (4px) en op invoervelden. Grote vlakken: 0.

04

Componenten

Knop: label + los vierkant

Maak kennis

Meer actueel

Iconvierkant + contactrij

Berceusestraat 46

Lijstrij

Accordeon

Strafrecht voor particulieren
Verkeersdelicten, geweldsdelicten, vermogensdelicten, drugs- en wapendelicten.
Huurrecht
Woonruimte en bedrijfsruimte.

Formulierveld op band

Placeholder-beeld

Foto: portret 4:5

05

Fotografie

Weinig beeld, groot geplaatst: een brede zwart-witstrook (het touw) onder de kop, het portret klein en vierkant naast een statement. Nooit een foto in de kop zelf; de typografie draagt de pagina.

06

Toon

  • "Recht, zonder omwegen."
  • "Ik behandel uw zaak zelf."
  • Korte, stellige zinnen. Eén gedachte per regel.
  • U-vorm, ik-vorm.

07

Doen en niet doen

Doen
  • Koppen groot en licht; laat witruimte het werk doen.
  • Eén teal-vlak per scherm.
  • Lijstrijen op volle breedte met nummer en toelichting.
  • Cijfers in de displayfont, teal op navy.
Niet doen
  • Geen foto in de kop.
  • Geen overlap-panelen; deze variant is vlak.
  • Geen tweede accentkleur.
  • Geen vet, geen uppercase.

08

Tokens

:root{--ik-navy:#0f2143;
--ik-navy-soft:#1b3160;
--ik-paper:#e3eef0;
--ik-tint:#d3e8e6;
--ik-tint-2:#eef6f5;
--ik-accent:#2f9c95;
--ik-accent-ink:#ffffff;

--ik-bg:#fff;
--ik-ink:#0f2143;
--ik-ink-soft:#4a5a72;
--ik-line:#b7c8c8;
--ik-rule:#c5ccd3;
--ik-rule-dark:#3d5478;

--ik-font-display:"Sora",system-ui,sans-serif;
--ik-font-body:"Manrope",system-ui,sans-serif}

Gedeelde primitives staan in css/basis.css; deze tokens in css/variant-b.css.