Huisstijlhandboek · Variant D

Portret

Het gezicht is het merk: het portret op halve schermbreedte in de kop, werkwijze als accordeon, koraal als accent.

01

Kleur

Navy#132758kopvlak, tekst, footer
Navy zacht#1f3a74placeholders
Paper#e9eef7tekst op navy
Mist koel#e6ebf2lichte band
Mist licht#f3f5f9kaartpaneel
Koraal#e4604daccentpaneel, kicker, knopvierkant
Hairline#b9c3d2scheidingen

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: Plus Jakarta Sans in weight 300, altijd. Body en interface: Plus Jakarta Sans 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

Het zwart-witportret draagt alles en staat op elke pagina groot in de kop. Verder alleen beelden met een mens erin (de handdruk) of met handen (ondertekenen, touw). Geen gebouwen, geen symbolen.

06

Toon

  • "Uw zaak. Mijn aandacht."
  • "Zo werk ik" in drie stappen, in de ik-vorm.
  • Direct en persoonlijk; de bezoeker spreekt met een mens.
  • U-vorm, ik-vorm.

07

Doen en niet doen

Doen
  • Het portret altijd groot, nooit als klein rondje.
  • Koraal alleen als vlak.
  • Werkwijze als accordeon, niet als kaartraster.
  • Elke pagina opent met het gezicht.
Niet doen
  • Geen foto's van gebouwen of symbolen.
  • Geen tweede persoon in beeld, behalve cliënten.
  • Geen koraal als tekstkleur.
  • Geen vette koppen.

08

Tokens

:root{--ik-navy:#132758;
--ik-navy-soft:#1f3a74;
--ik-paper:#e9eef7;
--ik-tint:#e6ebf2;
--ik-tint-2:#f3f5f9;
--ik-accent:#e4604d;
--ik-accent-ink:#1a1a2e;

--ik-bg:#fff;
--ik-ink:#132758;
--ik-ink-soft:#4d5b78;
--ik-line:#b9c3d2;
--ik-rule:#c7ccd6;
--ik-rule-dark:#4a5b80;

--ik-font-display:"Plus Jakarta Sans",system-ui,sans-serif;
--ik-font-body:"Plus Jakarta Sans",system-ui,sans-serif}

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