Huisstijlhandboek · Variant W

Wegwijs

Structuur én leesbaarheid: een genummerde inhoudsopgave in de kop, kosten als eerste sectie, 18px body en hoge contrasten. Navy met bosgroen.

01

Kleur

Navy#132758kopvlak, tekst, footer — de eigen navy van ikiz.nl
Navy zacht#22376einhoudsopgave-paneel
Paper#e6edf6tekst op navy
Groen-mist#dfeee7lichte band
Mist licht#f1f7f4kaartpaneel, contactvlakken
Bosgroen#2e7d5baccentpaneel, kicker, knopvierkant, bedragen; altijd met witte tekst
Hairline#b3c6bbscheidingen

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: Archivo in weight 300, altijd. Body en interface: Lexend 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

Leer mij kennen

Iconvierkant + contactrij

+31 (0)6 11 73 64 98
ikiz@ikiz.nl
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

Mensen en handen: het portret, de handdruk, het ondertekenen, het touw. Rustig licht, veel ruimte in het beeld. Informatie staat nooit alleen in een foto; elk beeld heeft een echte alt-tekst.

06

Toon

  • "Weet waar u staat."
  • "Ook als u geen advocaat kunt betalen."
  • Genummerde structuur: 01 tot 05, ook in de tekst.
  • Moeilijke woorden uitgelegd: toevoeging, eigen bijdrage, griffierecht.
  • U-vorm, ik-vorm.

07

Doen en niet doen

Doen
  • Elke pagina opent met een genummerde inhoudsopgave: de bezoeker ziet meteen wat er staat en springt er direct heen.
  • Kosten als eerste sectie na de kop, als genummerde tabel met de bedragen in bosgroen.
  • Body 18px, koppen groot en licht, knoppen minimaal 48px hoog, contrast minimaal 4,5:1.
  • Telefoon en e-mail ook als grote klikbare vlakken, niet alleen als regel.
  • Nummer alles wat een reeks is.
Niet doen
  • Geen tekst onder 16px, ook niet in de footer.
  • Geen tweede accentkleur naast bosgroen.
  • Geen bosgroen als lopende tekstkleur op wit; alleen als vlak of als bedrag.
  • Geen informatie die alleen in een foto staat.
  • Geen vette koppen, geen uppercase.

08

Tokens

:root{--ik-navy:#132758;
--ik-navy-soft:#22376e;
--ik-paper:#e6edf6;
--ik-tint:#dfeee7;
--ik-tint-2:#f1f7f4;
--ik-accent:#2e7d5b;
--ik-accent-ink:#ffffff;

--ik-bg:#fff;
--ik-ink:#132758;
--ik-ink-soft:#44506a;
--ik-line:#b3c6bb;
--ik-rule:#c7ccd6;
--ik-rule-dark:#4a5b80;

--ik-font-display:"Archivo",system-ui,sans-serif;
--ik-font-body:"Lexend",system-ui,sans-serif;
--ik-body-size:18px;
--ik-body-lh:1.65}

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