Stijlgids

De visuele signatuur van Bewonersvereniging De Krijgsman: voor redacteuren, ontwikkelaars en AI's. Versie 1.1, juni 2026.

1. Kernprincipes

Leesbaarheid eerst. Basistekst 17px (mobiel) tot 19px (desktop), regelafstand 1.65, regels max. 70 tekens. Contrast minimaal 4.5:1 (WCAG AA).
Eén rood. Al het rood is #E2001A (hover #B30014). Nooit #FF0000 of andere tinten.
Eén opvallende actie per sectie. Maximaal één rode knop; in het menu alleen "Lid worden".
Standaard Odoo-componenten. Geen maatwerk waar een standaard snippet bestaat.
Geen gedachtestreepjes in teksten: gebruik komma, dubbele punt of punt. Bereiken als "2 tot 4 uur".

2. Kleuren

Primair rood
#E2001A
knoppen, links, accenten

Rood hover
#B30014
hover en actief

Zwart
#000000
titelbanden, logo

Bijna-zwart
#101010
CTA-banden, footerbalk

Wit
#FFFFFF
achtergrond, footer

Wit
#FFFFFF
basisachtergrond

Koppen
#222222
tekstkleur koppen

Bodytekst
#383838
lopende tekst

Secundair
#555555
bijschriften, datums

Tekst op wit: #222222 en #383838. Tekst op zwart of foto: wit. Rood alleen als accent, nooit voor lange tekst. Secundaire tekst nooit lichter dan #555555.

3. Typografie

Koppen: Bitter (slab-serif), 700 voor H1 en H2, 600 voor H3 tot H6. Fallback Georgia.
Body en UI: Source Sans 3, 400 normaal, 600/700 voor nadruk. Fallback Arial.
Schaal: de rem-basis loopt vloeiend van 17px naar 19px via clamp(17px, 16.2px + 0.25vw, 19px); alle maten in rem schalen mee.

Woordafbreking: lopende tekst breekt op mobiel automatisch af (taal nl). Koppen alleen op handmatige punten: "Bewonersvereniging" altijd als Bewoners-vereniging, en "De Krijgsman" blijft bij elkaar (op mobiel een eigen regel).

4. Knoppen

Primaire actie Secundaire actie

Radius 3px, geen schaduwen of verlooptinten. Outline-knoppen worden wit op donkere achtergronden.
Knoppen in tekstblokken krijgen 0.3rem verticale marge zodat ze gestapeld (mobiel) ruimte houden.
In kaarten staat de knoppenrij onderaan vastgepind, zodat rijen kaarten gelijk uitlijnen.

5. Componenten

Titelband: elke pagina opent met een zwarte band, witte Bitter-kop (700) en een lead van één zin.
Kaarten: wit met rand #E8E8E8, radius 6px, subtiele schaduw, icoon of klein beeld (88px) gecentreerd boven de titel, gelijke hoogte per rij.
CTA-band: bijna-zwart, kop plus één zin links, één rode knop rechts, onderaan de pagina.
Checklijsten: rood vinkje met hangende inspringing (1.7em), 0.85rem tussen items.
Blogkaarten: cover vlak tegen de randen zonder eigen schaduw, geen auteur-overlay, 1.25rem marge, datum onderaan vastgepind, subtiele hover-lift.
Teamkaarten: zwart-wit portret rond uitgesneden; contact uitsluitend via icoon-knoppen waarbij adressen gecodeerd zijn tegen scraping; mobiel 1 per rij, desktop 4.
Formulieren en zoekvelden: formulieren staan in een witte kaart met subtiele schaduw; labels altijd zichtbaar, velden minimaal 44px hoog, zoekvelden wit met rand #999999 en rode focus.

6. E-mail naar leden

Opbouw in Odoo. E-mails maak je in Email Marketing op het lege thema, zodat de body in de o_layout / oe_structure-wrapper zit en blokken sleepbaar en bewerkbaar zijn. Startpunt: dupliceer de mailing “MASTER — De Krijgsman nieuwsbrief”.

Opmaak. Maximaal 600px breed, witte kaart. Header met de witte logovariant op een beeldband. Koppen Bitter (fallback Georgia), bodytekst Source Sans 3 (fallback Arial), 17px. Tekst #383838, koppen #222222, secundaire tekst #555555. Links en knoppen #E2001A; één rode primaire knop per mail, een tweede keuze als outline-knop. De kleuren en fonts staan in de design-element-stijlvariabelen bovenin de body.

Vast. Footer in wit met copyright en afmeldlink. Onderteken met de volledige bestuurslijst. Onderwerpregel kort en concreet, ongeveer 45 tekens. Geen gedachtestreepjes; aanhef op voornaam met terugval op “bewoner”.

7. Stem en toon

Warm, direct en buurtgericht: "je", niet "u". Korte zinnen. Elke pagina eindigt met een duidelijke vervolgstap. Ondertekening vanuit het bestuur waar persoonlijk contact past. Webshopteksten passen bij een lidmaatschap: "direct actief na betaling", nooit levertijden of garanties.

8. Logo's en downloads

Voor drukwerk, presentaties en digitale uitingen. SVG en EPS zijn vectorbestanden en geschikt voor elk formaat, van visitekaartje tot spandoek; PDF is handig voor drukkers en kantoorgebruik. Gebruik de witte variant op zwarte of fotografische achtergronden. Bewerk de logo's nooit: niet uitrekken, hertekenen of van kleur veranderen.