Grond
--bg-dark- HEX
- RGB
- CMYK
- omgerekend, niet geprofileerd
- RAL
- dichtstbijzijnde, ΔE 3,1
- Pantone
- dichtstbijzijnde, ΔE 0,8
hero en donkere secties
De Bron
Voor iedereen die iets maakt met dit merk: een drukker, een webbouwer, een gevelbouwer of iemand die volgende maand begint. Hier staat wat vastligt en wat niet.
Versie 1.0 deze pagina is de enige geldige uitgave
Wat u hier kiest geldt ook voor Bestand > Afdrukken. Neem een afdruk mee naar het werk; stuur hem niet rond. Wie het document nodig heeft, krijgt het adres van deze pagina.
Kaldevo Groep B.V. is een verzonnen onderneming. Deze pagina legt vast hoe het merksysteem van die demonstratie in elkaar zit; de waarden zijn echt en na te rekenen, het bedrijf is dat niet.
Wie leest dit
Een keuze markeert de hoofdstukken die op uw werk van toepassing zijn en wijst aan waar u begint. Ze verbergt niets: u ziet altijd het hele document.
Vier merken: de groep en drie werkmaatschappijen. De vraag welk merk op welk stuk hoort, komt elke week terug. Hieronder staat het antwoord, zodat niemand hem opnieuw hoeft te stellen.
De afzender bepaalt het merk. Niet het onderwerp, niet de klant, en niet wat het mooiste staat. Wie het stuk verstuurt, met wie de klant een overeenkomst sluit, dát merk staat erop. Aan die ene regel is elke rij hieronder af te leiden, en bij een geval dat er niet bij staat leidt u hem er zelf uit af.
| Het stuk | Welk merk |
|---|---|
| Een offerte | Het merk van de werkmaatschappij die het werk doet. Het groepsmerk staat er niet naast. |
| Een offerte waarin twee bedrijven samen leveren | Beide merken, naast elkaar, op gelijke hoogte. Tussen de twee ligt de vrije ruimte van allebei, dus minstens twee basismaten. |
| Een factuur | Het merk van de entiteit die factureert. Dit volgt uit het briefhoofd en is geen keuze. |
| Een vacature | Het merk van het bedrijf waar iemand in dienst komt. |
| Een e-mailhandtekening | Het merk van het bedrijf waar de afzender in dienst is. |
| Bedrijfskleding, een bus, een bord op het werk | Het merk van het bedrijf dat het werk uitvoert. |
| Een bericht over de groep | Het groepsmerk. De drie namen mogen in de tekst genoemd worden; hun logo’s komen er niet bij te staan. |
| Een beursstand van de groep | Het groepsmerk op de stand, de drie merken bij het werk dat ze tonen. |
Eén regel per merk. Dit is de zin die op de site staat, en dus de zin die u hergebruikt in een advertentie, een vacature of een offerte. Schrijf er geen eigen variant naast.
| Merk | Vak | De regel |
|---|---|---|
| Kaldevo Groep | de holding | De grond, de meting en de stroom van hetzelfde project |
| Van Rossem | Bouw & Infra | Grondverzet, wegenbouw en waterbouw voor gemeenten, waterschappen en netbeheerders, van voorbereiding tot oplevering. |
| Bergman | Meet & Regel | Instrumentatie en industriële automatisering voor installaties die continu moeten draaien. |
| Verhorst | Elektrotechniek | Paneelbouw, schakel- en verdeelkasten en besturingstechniek, ontworpen en gebouwd in eigen werkplaats. |
| Situatie | Wat vastligt |
|---|---|
| Een bord op het werk met de opdrachtgever erbij | Het eigen merk staat links, dat van de opdrachtgever rechts. Gelijke optische hoogte: het merkteken van beide even hoog, niet het omhullende vlak. |
| De afstand ertussen | De vrije ruimte van beide raakt elkaar, dus minstens twee basismaten. Bij een merk van 8 mm hoog is dat 4 mm. |
| Het merk van de ander | Wordt niet aangepast. Niet omgekleurd, niet op één kleur gezet, niet op maat gerekt. Vraag hun eigen bestand op. |
| Een bord met drie of meer merken | Dan geen rij maar een raster, met dezelfde tussenruimte in beide richtingen. Bij twijfel: vraag het na in plaats van te schikken. |
| Onderdeel | Wat vastligt |
|---|---|
| Het beeldmerk | Voor alle vier hetzelfde teken, uit dezelfde tekening. Dat is wat ze zichtbaar familie maakt. |
| De naam | Per merk een eigen naam naast het teken. Een werkmaatschappij voert nooit de naam van de groep en andersom. |
| Het accent | Per merk één eigen kleur, in twee sterktes. De acht gedeelde waarden zijn voor alle vier gelijk; zie Kleur. |
| Letter, raster en ruimte | Voor alle vier gelijk. Er is geen werkmaatschappij met een eigen letter of een eigen indeling. |
| Naar elkaar verwijzen | Binnen een werkmaatschappij wijst niets naar een zuster. De enige weg omhoog is de groep, en die staat apart gezet. |
| Een nieuwe werkmaatschappij | Krijgt hetzelfde beeldmerk en een eigen accent uit het palet. Er wordt geen nieuw teken getekend, en de naam moet in één regel naast het teken passen op de kleinste maat van 28 pixels. |
Dat zou eenvoudiger zijn, en het is de fout die na een overname het vaakst wordt gemaakt. De drie namen dragen hun eigen klantenkring: een aannemer die twintig jaar met Van Rossem werkt, herkent Van Rossem. Zet u daar het groepsmerk neer, dan is de winst één logo minder en het verlies een relatie die opnieuw uitgelegd moet worden.
Andersom net zo goed. Twee merken op één offerte laten zien dat het nog geen één bedrijf is, precies op het moment dat een klant daarop let. Vandaar één merk per stuk, en de afzender bepaalt welke.
Vijf woordmerken en vier beeldmerken, elk in twee uitvoeringen: achttien vastgelegde bestanden. Welke u pakt hangt van één ding af, en dat is de grond waarop hij komt te staan.
| Onderdeel | Wat vastligt |
|---|---|
| Welke uitvoering | Witte inkt op een donkere grond, donkere inkt op een lichte. Er is geen derde. Beide staan op transparant, dus u kunt ze op elke grond zetten waar het contrast klopt. |
| Kleinste maat | Op scherm 28 pixels hoog, op drukwerk 8 mm. Achtentwintig pixels is bij de gebruikelijke 96 per inch 7,41 mm; die 8 is naar boven afgerond zodat u niet op de grens werkt. Daaronder lopen de vlakken in het merkteken dicht en blijft er een vlek over. |
| Basismaat | Een kwart van de hoogte van het merkteken. In de tekening is dat 17,79 van 71,17. Omdat het een verhouding is, geldt hij in elke eenheid: bij een merk van 8 mm hoog is de basismaat 2 mm, bij twee meter is het 50 cm. |
| Vrije ruimte | Minstens één basismaat rondom. Binnen die ruimte staat niets: geen tekst, geen lijn, geen rand van een foto. |
| Schalen | Altijd op hoogte, nooit op breedte. Zet u een breedte, dan rekent uw programma de hoogte uit en staat het merkteken uitgerekt. |
| Wat niet mag | Roteren, uitrekken of scheeftrekken. Een verloop of een schaduw. Een andere vulling dan de twee uitvoeringen. En het merkteken losknippen van de naam. Daar is het losse beeldmerk voor, en dat staat bij de downloads. |
| Favicon | Per bedrijf een eigen bestand, als vector en als bitmap van 32 pixels. Op 16 en 32 pixels blijven de drie vormen staan met de spleet ertussen open, dus het slibt niet dicht. |
| Beginscherm | 180 × 180 pixels, uit hetzelfde bestand als het favicon, zodat die twee niet uiteen kunnen lopen. |
De onderbroken lijn is de grens. Daarbinnen staat alleen het merk; daarbuiten mag alles. De afstand tussen die lijn en het merk is overal gelijk aan één basismaat, en dat is een kwart van de hoogte van het merkteken.
Deze drie tekeningen worden bij elke bouw uit de logobestanden zelf gerekend, niet nagetekend. Verandert de tekening ooit, dan verschuift deze lijn mee.
Negen keer hetzelfde merk, negen keer fout. Elke tekening hoort bij een regel die hierboven in de tabel staat; dit is die tabel, maar dan zichtbaar. Zo hoort het:
Ook deze negen worden uit het logobestand zelf gerekend. Er is geen los mapje met voorbeelden dat achter kan gaan lopen op de tekening.
De vrije ruimte had ook “20 pixels” kunnen zijn. Dan klopt hij op een briefpapier en nergens anders: op een beursstand van drie meter is twintig pixels niets, en op een favicon van zestien is het meer dan het merk zelf.
Door de ruimte aan de hoogte van het merkteken te binden verandert er niets aan de regel als het formaat verandert. U hoeft dus geen tabel met maten per drager bij te houden, en u kunt niet op de verkeerde regel uitkomen doordat u de verkeerde rij pakt. Er is er maar één.
Voor wie het platform beheert. Alle achttien varianten staan in components/Logo.tsx; niets daarbuiten verwijst nog naar een pad in de logomap, dus er is geen variant die met de hand gekozen kan worden. Het beginscherm en het favicon komen uit dezelfde icon.svg, en de doos om het logo gebruikt aspect-ratio zodat de breedte de tekening volgt.
Acht waarden gelden overal, en daarnaast heeft elk bedrijf één eigen accent in twee sterktes. Bij elke kleur staan vijf notaties: voor het scherm, voor drukwerk, voor lak en voor een steunkleur.
Deze acht gelden in alle vier de omgevingen.
--bg-darkhero en donkere secties
--bg-utilityheader en juridische band
--ink-90015,72 : 1 op wit
--ink-70012,27 : 1 op wit
--ink-5005,66 : 1 op wit
--ink-300geen tekstwaarde
--on-dark15,72 : 1 op de grond
--on-dark-muted8,10 : 1 op de grond
Elke omgeving heeft twee waarden: één voor een witte grond en één voor de donkere. Welke u pakt, volgt uit waar hij op komt te staan.
5,73 : 1 tegen wit
4,50 : 1 tegen de grond
6,10 : 1 tegen wit
4,56 : 1 tegen de grond
5,36 : 1 tegen wit
4,52 : 1 tegen de grond
5,08 : 1 tegen wit
4,54 : 1 tegen de grond
Een kleur bestaat niet als één getal. Een beeldscherm maakt hem met licht, een drukpers met inkt op papier, een lakspuit met pigment. Dezelfde kleur heeft in elk van die drie een eigen notatie, en wie er één opschrijft dwingt de rest om te gokken. Vandaar alle vijf, en vandaar dat erbij staat hoe hard elk getal is.
HEX en RGB zijn exact. Dat is de kleur zelf. CMYK is omgerekend zonder kleurprofiel: uw drukker komt met zijn eigen profiel en een proef op andere waarden uit, en die van hem wint. RAL en Pantone zijn de dichtstbijzijnde uit een vaste reeks, met de afstand erbij. Die afstand heet ΔE: onder de 2 ziet vrijwel niemand het verschil, boven de 5 ziet iedereen het. Staat er dus ΔE 6,2 bij een Pantone, neem die dan niet klakkeloos over voor iets wat naast een gedrukt vel komt te liggen. Een waaier beslist, niet deze pagina.
De vier accenten worden gemengd, niet uit de waaier gepakt. Geen van de acht komt onder ΔE 2 uit, en bij Van Rossem staat de dichtstbijzijnde RAL er 13,9 naast: dat is geen benadering meer, dat is een andere kleur. Geef een spuiter dus de HEX en laat hem mengen — dagelijks werk, geen bijzonder verzoek — en keur op een gespoten proefplaatje. De RAL hieronder staat er ter oriëntatie, zodat u weet in welke hoek u zit.
De gedeelde grijzen en zwarten mogen wél uit de waaier. Dat is de grond waar het merk op staat en niet het merk zelf; daar is een afwijking van drie geen merkfout maar een tint verf.
Het lichte accent is tegen wit gemeten. Dat ene getal geldt twee kanten op: als tekst in die kleur op wit, én als wit op een vlak in die kleur. Contrast is symmetrisch, dus u hoeft niet twee metingen bij te houden.
Voor wie het platform beheert. De acht gedeelde waarden en de vier accenten komen uit app/tokens.css. Deze pagina leest dat bestand bij elke bouw, dus een wijziging daar verschijnt hier vanzelf en de twee kunnen niet uiteen lopen.
Eén familie voor alles: IBM Plex Sans. Alle maten komen uit één ladder, en tussen twee treden zit steeds dezelfde stap. Er is dus geen tussenmaat: staat 25 te groot en 20 te klein, dan is het antwoord niet 22.
| Token | Desktop | Onder 768 | Stap naar de volgende |
|---|---|---|---|
--fs-hero | 76px | 39px | 1,246 · 1,147 mobiel |
--fs-h1 | 61px | 34px | 1,245 · 1,172 mobiel |
--fs-h2 | 49px | 29px | 1,256 · 1,160 mobiel |
--fs-h3 | 39px | 25px | 1,258 · 1,136 mobiel |
--fs-h4 | 31px | 22px | 1,240 · 1,158 mobiel |
--fs-lede | 25px | 19px | 1,250 · 1,188 mobiel |
--fs-body | 20px | 16px | 1,250 · 1,143 mobiel |
--fs-small | 16px | 14px | 1,231 · 1,167 mobiel |
--fs-micro | 13px | 12px | laatste |
| Onderdeel | Wat vastligt |
|---|---|
| Familie | IBM Plex Sans. Eén familie voor alles, ook voor cijfers en tabellen. |
| Waar u hem haalt | Bij Google Fonts of in de openbare uitgave van IBM zelf. Op de site staat hij niet als los bestand, want hij wordt bij het bouwen opgehaald en meegeleverd. |
| Mag u hem installeren en insluiten | Ja. De familie staat onder de SIL Open Font License 1.1, en die staat installeren, meeleveren en insluiten in een pdf toe. De licentietekst komt bij het lettertype mee; lees hem door voordat u hem in een product doorlevert. |
| Als hij er niet is | Installeer hem eerst; hij is gratis en dat mag. Kan dat niet, omdat u op de computer van iemand anders werkt, gebruik dan de letter uit de tabel hieronder en geen vervanger die erop lijkt. Een bijna gelijke letter valt meer op dan een duidelijk andere. |
| Snijdingen | Regular voor lopende tekst, Medium voor koppen en labels. Geen cursief, geen Bold, geen versmalde of verbrede variant. |
Dit is de fout die het vaakst voorkomt en die het minst opvalt: een brief in Word, een presentatie op de laptop van een leverancier, een e-mail die bij de ontvanger in iets anders aankomt. Zet daar niet zomaar iets neer.
| Waar | Welke letter | Waarom |
|---|---|---|
| Op het web | IBM Plex Sans, system-ui, sans-serif | Precies wat de site zelf meegeeft. Laadt de eerste niet, dan pakt de browser de systeemletter en niet iets willekeurigs. |
| Word en PowerPoint, Windows | Segoe UI | Staat op elke Windows-computer, dus het bestand ziet er bij de ontvanger hetzelfde uit als bij u. |
| Word en PowerPoint, macOS | Helvetica Neue | Dezelfde reden, andere machine. |
| Arial | E-mailprogramma’s laden geen letters. Wat u ook meestuurt, de ontvanger ziet er een van zijn eigen lijst; Arial is de enige die overal hetzelfde valt. |
Wat hier niet staat: Calibri, Verdana, Tahoma of een letter die iemand mooi vindt. De keuze is niet vrij, ook niet in een intern document.
Welke trede u pakt volgt uit de rol van de tekst, niet uit hoe groot het moet ogen. Hieronder staat elke rol met zijn maat en een regel voorbeeldtekst, zodat u kunt zien wat een getal doet.
--fs-heroDe grond, de meting en de stroom
alleen bovenaan een startpagina, één per pagina
--fs-h1De ondergrond bepaalt de bouw
de titel van een gewone pagina
--fs-h2Wat wij aanleggen blijft in onderhoud
de kop boven een sectie
--fs-h3Grondverzet en bemaling
een kop binnen een sectie
--fs-h4Paneelbouw
de titel van een kaart of een blok
--fs-ledeInstrumentatie voor installaties die continu moeten draaien.
de eerste alinea onder een kop, één per kop
--fs-bodyWij leveren, installeren en onderhouden besturingssystemen voor de procesindustrie.
alles wat een alinea is
--fs-smallGemeten op de productiebouw, februari 2026.
onder een beeld, in een tabel, bij een noot
--fs-microBOUW EN INFRA
boven een kop of een kolom, in kapitalen
| Token | Waarde |
|---|---|
--lh-hero | 1.05 |
--lh-heading | 1.15 |
--lh-h3 | 1.2 |
--lh-h4 | 1.25 |
--lh-lede | 1.5 |
--lh-body | 1.6 |
Een reeks losse maten ontstaat vanzelf. Veertien, vijftien, zeventien, achttien, tweeëntwintig: elke keer dat iets nét te groot staat komt er een maat bij. Na twee jaar zijn het er twintig, en dan is er geen verschil meer tussen twee koppen die twee punten schelen. Het systeem zegt dan niets meer.
Met één verhouding tussen de treden is elke sprong even groot en is er niets tussenin. Staat een maat verkeerd, dan pakt u de trede erboven of eronder. Niet het gemiddelde. Dat is meteen de hele regel voor een drukwerkstuk dat hier niet in staat: kies uit de ladder, verzin niet.
Op een telefoon schuift dezelfde ladder één trede omlaag. Mobiel is dus een verschaalde desktop en geen eigen reeks; er is één systeem, niet twee. Deze pagina zelf zet ook een trede lager dan de website, want zij is een document en geen pagina om overtuigd te worden.
Voor wie het platform beheert. De grondmaat is 16 en de verhouding 1,25; de ladder loopt 10 · 13 · 16 · 20 · 25 · 31 · 39 · 49 · 61 · 76. Desktop pakt de bovenste negen treden, onder 768 dezelfde negen één trede lager. De letter wordt zelf gehost, dus er is geen verzoek naar een derde partij bij het laden van een pagina.
De bestanden zelf, zonder aanvraag. De logo's zijn SVG: dat schaalt zonder kwaliteitsverlies en werkt in druk net zo goed als op scherm.
Twee uitvoeringen per merk, op transparant, uit dezelfde tekening. Welke u pakt volgt uit de grond waarop hij komt; dat staat bij Het logo.
De holding
header, briefpapier, alles boven 120px breed
ac8ad977d588a200voettekst en smalle plekken
6eb6be9b23f022adDe werkmaatschappijen
alles van Bouw & Infra
ff80ce158e583c09alles van Meet & Regel
4dc0b5fd9cb65674alles van Elektrotechniek
73fb0aef6e992018Zonder woordmerk, voor een favicon, een app-icoon of een vlak dat te klein is voor de naam. Kleinste maat 16 pixels; daaronder slibben de drie vormen dicht. Neemt u de witte uitvoering op wit, dan valt de helft van het merk weg en blijft er een losse driehoek over.
SVG · 540 B
SVG · 540 B
SVG · 540 B
SVG · 540 B
Acht stuks, afgeleid van de meetkunde van het merkteken: hetzelfde eenhedenraster, en alleen hoeken van 45 en 90 graden. Lijn in plaats van vlak, want een massief icoon van 24 pixels loopt dicht. Ze nemen de tekstkleur over waar ze staan, dus u hoeft er geen kleur in te zetten. Hebt u een vorm nodig die er niet bij zit, vraag erom. Zelf tekenen levert een negende stijl op.
Vier opzetten: de maten en de indeling liggen vast, de inhoud is voorbeeldtekst. Ze zijn opgebouwd uit dezelfde tokens en hetzelfde woordmerk als de site, dus wat u erin verandert blijft binnen het systeem zolang u de kleuren en maten uit de tabellen hieronder aanhoudt.
| Sjabloon | Formaat | Bestanden |
|---|---|---|
| Briefpapier | A4, 210 × 297 mm | SVG · 8,3 kB · PDF |
| Presentatie | 16:9, 1920 × 1080 | SVG · 7,3 kB · PDF |
| E-mailhandtekening | 600 × 170 | SVG · 7,5 kB · PDF |
| Sociaal beeld | 1200 × 630 | SVG · 7,3 kB · PDF |
| Bestand | Waarvoor | Maat |
|---|---|---|
| tokens.json | Alle kleuren, lettergroottes, regelhoogtes en afstanden in één machineleesbaar bestand. Het wordt bij elke bouw opnieuw geschreven uit dezelfde waarden die de site gebruikt, dus het is altijd de stand van nu. | JSON |
Het kleine teken in een tabblad en op een telefoonscherm. Per merk drie bestanden uit dezelfde tekening als het beeldmerk: twee voor het tabblad en één voor het beginscherm.
| Merk | Tabblad, vector | Tabblad, bitmap | Beginscherm |
|---|---|---|---|
| Kaldevo Groep | SVG | PNG · 32 × 32 | PNG · 180 × 180 |
| Van Rossem | SVG | PNG · 32 × 32 | PNG · 180 × 180 |
| Bergman | SVG | PNG · 32 × 32 | PNG · 180 × 180 |
| Verhorst | SVG | PNG · 32 × 32 | PNG · 180 × 180 |
Een vector is voor een tabbladteken de betere keuze: hij blijft scherp op elke schermdichtheid en op elke maat die een browser er ooit voor kiest. Alleen leest Safari hem niet. Wie op een Mac of een iPhone een tabblad opent, ziet dan een leeg vakje waar het merk hoort te staan.
Vandaar allebei. De browser pakt de vector als hij hem aankan en valt anders terug op de bitmap van 32 pixels. Er is dus geen keuze te maken: zet ze allebei neer.
Voor een stempel, een gravure, een borduursel of een fax: dezelfde tekening met het accent in dezelfde inkt als de rest. En één bitmap per merk, voor programma’s die geen vector aankunnen.
| Merk | Eén kleur | Bitmap |
|---|---|---|
| Kaldevo Groep | Zwart · Wit | PNG · 26 kB |
| Kaldevo, compact | Zwart · Wit | PNG · 27 kB |
| Van Rossem | Zwart · Wit | PNG · 25 kB |
| Bergman | Zwart · Wit | PNG · 24 kB |
| Verhorst | Zwart · Wit | PNG · 24 kB |
| Beeldmerk Kaldevo | Zwart · Wit | PNG · 5 kB |
| Beeldmerk Van Rossem | Zwart · Wit | PNG · 5 kB |
| Beeldmerk Bergman | Zwart · Wit | PNG · 5 kB |
| Beeldmerk Verhorst | Zwart · Wit | PNG · 5 kB |
Elk woordmerk staat er ook als PDF en EPS, geschreven uit dezelfde tekening. Vraagt uw drukker of gevelbouwer daarom, dan hoeft u niets om te zetten.
De PNG is er voor de programma’s die geen vector aankunnen: een tekstverwerker, een presentatie, een e-mailhandtekening. Vergroot hem niet. Een vector schaalt beide kanten op zonder verlies, een bitmap alleen naar beneden. Zet iemand deze PNG op een beursbord, dan staat het merk daar onscherp, en dat merkt niemand tot het bord er al staat. Hebt u een grotere nodig, vraag hem op de maat die u nodig hebt.
Alle afstanden komen uit één ladder van 14 maten, en alle 14 zijn een veelvoud van vier. Onderaan ligt de ladder dicht, want daar zit het verschil tussen krap en ruim in een paar pixels; bovenaan wijder, want tussen 160 en 200 ziet niemand een trede van vier. Er is dus geen tussenmaat: staat 48 te krap en 64 te ruim, dan is het antwoord niet 56. De balkjes hieronder staan op halve schaal.
Elke afstand hoort bij een verhouding tussen twee dingen, niet bij een onderdeel. Zoek dus op wát er onder elkaar staat en niet op wélk blok het is.
| Relatie | Token | Waarde |
|---|---|---|
| bovenschrift naar kop | --gap-eyebrow-heading | var(--space-4) |
| displaykop naar tekst | --gap-heading-text | var(--space-7) |
| kaarttitel naar tekst | --gap-cardtitle-text | var(--space-5) |
| alinea naar alinea | --gap-paragraph | var(--space-5) |
| tekst naar knop | --gap-text-button | var(--space-6) |
Stel dat de ruimte per onderdeel was vastgelegd: boven een tabel 40, boven een citaat 32. Dan krijgt dezelfde overgang op twee plekken een andere waarde zodra er een onderdeel bij komt. En er komt altijd een onderdeel bij.
De vraag is dus niet “wat is dit?” maar “wat staat er boven en onder?”. Een nieuw onderdeel erft daarmee vanzelf de goede ruimte, ook als het pas volgend jaar wordt bedacht.
Twee dingen die vaak door elkaar lopen: waar iets staat, en wat erop staat. Het raster bepaalt de plaats, de beeldregels bepalen de foto.
| Onderdeel | Wat vastligt |
|---|---|
| Kolombreedte | 1440px. Breder wordt de inhoud nergens, ook niet op een groot scherm. |
| Paginamarge | 24 pixels onder 768, 32 vanaf 768, 48 vanaf 1024. Alle drie uit de ruimteladder. Op een scherm van 1440 blijft er dus 1344 aan inhoud over. |
| Rijen | Er is geen vast koloms raster. Een rij is twee, drie of vier gelijke kolommen; meer dan vier is er niet. De tussenruimte is altijd een trede uit de ruimteladder: 32 in de nieuwsrij, 40 in de kaart- en cijferrijen, 48 in een paneel, 64 in de voettekst en in een tweekoloms inleiding. |
| Leesbreedte | 524px voor lopende tekst, 760px voor grote koppen. Een regel die breder loopt raakt u kwijt bij het terugspringen naar links. |
| Onderdeel | Wat vastligt |
|---|---|
| Formaat | 1920 × 1080 voor een paginabreed beeld, 1200 × 675 voor een kaart. Progressieve JPEG op kwaliteit 72. |
| Maten per foto | Elke foto staat in meerdere maten klaar, zodat een telefoon niet de schermbrede versie hoeft te laden. Paginabreed 5 maten: 480 · 768 · 1024 · 1440 · 1920. Op een kaart 3: 400 · 800 · 1200. |
| Wat erop staat | Werk in uitvoering, geen opgepoetst eindresultaat. Materieel en installaties mogen herkenbaar zijn, gezichten niet. |
| Snede | Het onderwerp valt op een derde van de breedte, niet in het midden. Snijd aan de rand niet dwars door een machine of een gebouw; laat er ruimte omheen staan. |
| Compositie | Eén onderwerp per beeld. Komt er tekst overheen, dan blijft die helft rustig: de kop haalt minstens 3,0 contrast op de lichtste vijf procent van wat erachter ligt. |
| Wat er niet op mag | Een merk van een ander, leesbare tekst, of een herkenbare instelling op het materieel. En elke foto staat op precies één plek: dezelfde foto op twee pagina’s maakt van een bedrijf een stockcatalogus. |
Dat is geen smaakregel maar een praktische. Een herkenbaar gezicht vraagt toestemming van die persoon, en die toestemming moet u kunnen aantonen. Ook nog over drie jaar, en ook als hij intussen ergens anders werkt. Bij één foto is dat te doen. Bij tweehonderd is het een archief dat niemand bijhoudt, en dan ontdekt u het gat op het moment dat iemand belt.
Handen, materieel en installaties mogen wel. Die vertellen hetzelfde verhaal en dragen geen recht van een ander.
Voor wie het platform beheert. De doos meet calc(var(--container-max) + var(--gutter) * 2) met de marge als binnenruimte, dus de inhoud loopt nooit breder dan 1440 en de linkerkantlijn valt op elke pagina op dezelfde plaats. Er staan 55 bronbestanden klaar, samen 251 uitsneden.
Hoe er geschreven wordt. Dit is geen stijlvoorkeur maar een afspraak: vier bedrijven die elk hun eigen toon aanslaan lezen als vier bedrijven, ook als het logo klopt.
| Regel | Wat dat betekent |
|---|---|
| Aanspreekvorm | U, overal. Ook in een vacature en ook op een bord langs de weg. |
| Een kop is een vaststelling | Over het vak, niet over het bedrijf. “De ondergrond bepaalt wat erbovenop kan” en niet “Wij zijn uw partner in grondverzet”. |
| Geen superlatieven | Geen toonaangevend, marktleider, uniek, innovatief of totaaloplossing. Wie het beste is, laat het zien in een cijfer of laat het weg. |
| Een getal staat er alleen als het gemeten is | En dan met de meting erbij. Een getal zonder herkomst is een mening met cijfers. |
| Vaktermen blijven staan | Bemaling heet bemaling. De lezer is een inkoper of een uitvoerder en niet iemand die het uitgelegd wil krijgen. |
| Geen uitroeptekens | Ook niet in nieuws, ook niet op sociale kanalen. |
| Eén onderwerp per alinea | En de eerste zin zegt waar het over gaat, zodat iemand die scant het al weet. |
Een logo verandert niet vanzelf, een toon wel. Er schrijven mensen op vier plekken: een werkvoorbereider die een offerte toelicht, iemand die een vacature plaatst, een monteur die een projectbericht doorgeeft. Ligt de toon niet vast, dan schrijft ieder zoals hij denkt dat het hoort.
Dan klopt het logo en klinkt het bedrijf toch als drie bedrijven. Dat is dezelfde breuk als twee huisstijlen, alleen zichtbaar in woorden in plaats van in vlakken.
Vier situaties die het vaakst voorkomen. Staat die van u er niet bij, dan geldt de regel eronder: neem de waarde over uit de tabel, verzin er geen.
| U maakt | Wat u gebruikt |
|---|---|
| Een advertentie of een post | Het logo van het bedrijf waar het over gaat, niet dat van de groep, tenzij het bericht over de groep zelf gaat. Kleur: het lichte accent van dat bedrijf op een witte grond, het donkere op een donkere. Letter: IBM Plex Sans; staat die er niet, gebruik dan de letter uit Waar hij niet komt en geen vervanger die erop lijkt. |
| Bestickering, een bord of een gevel | Gaat het om een accent, geef de spuiter dan de HEX en laat hem mengen; keur op een gespoten proefplaatje. De RAL in de kleurtabel is oriëntatie en geen bestelnummer — alle acht accenten liggen te ver van de waaier af. Voor een grijs of zwart vlak volstaat de RAL die erbij staat. |
| Drukwerk | Geef de drukker de HEX en laat hem er met zijn eigen profiel een proef van maken. De CMYK hieronder is een omrekening zonder profiel: bruikbaar om het gesprek te beginnen, niet om op te matchen. |
| Een pagina of een e-mailsjabloon | Download tokens.json en lees de waarden daaruit in. Kopieer ze niet met de hand naar uw eigen stylesheet, want dan loopt uw kopie vast een keer achter op deze. |
| Onderdeel | Wat vastligt |
|---|---|
| De profielfoto | Het beeldmerk, niet het woordmerk. Een profielfoto is vierkant en klein; een woordmerk wordt daarin onleesbaar. Het beeldmerk op donker, zodat het vlak zelf de vorm draagt. |
| Het omslagbeeld | Een foto uit de beeldladder, met de regels uit Raster en beeld. Geen tekst in het beeld: elk kanaal snijdt hem op een andere maat af. |
| Een bericht | Het sjabloon Sociaal beeld bij de downloads. Daar liggen de maat en de indeling vast; u vult tekst en foto in. |
| Welk account | Elke werkmaatschappij heeft een eigen account met het eigen merk. De groep plaatst over de groep, een werkmaatschappij over haar eigen werk. Zie De merken onderling. |
Een waarde die hier niet staat, bestaat niet. Komt u iets tegen waarvoor niets is vastgelegd, dan is dat een gat in deze pagina en geen vrijheid om zelf te kiezen. Vraag hem op; dan staat hij er de volgende keer voor iedereen.
Dat lijkt streng, maar het alternatief is duurder. Eén leverancier die een kleur benadert is geen probleem. Vijf leveranciers die er ieder één benaderen leveren vijf kleuren op, en niemand van die vijf heeft iets fout gedaan. Zo raakt een merk niet kwijt door een grote fout, maar door vijf kleine.
Wat er onder de site zit. Voor een drukker of een gevelbouwer is dit hoofdstuk niet nodig; het staat er voor wie de site beheert of een volgende leverancier moet beoordelen.
| Onderdeel | Wat vastligt |
|---|---|
| Omvang | 61 pagina’s uit drie indelingen. Een volledig traject levert er acht; deze demonstratie heeft er drie nodig en dus niet meer gebouwd. De inhoud staat op één plek; het zoeken en de sitemap worden daaruit gebouwd, dus die kunnen niet achterlopen. |
| Deelbeeld | Op elke pagina, 1200 × 630, getekend uit dezelfde gegevens als de pagina zelf. Deelt u een adres, dan komt er een beeld mee en geen grijs vlak. |
| Adres | Elke pagina wijst naar zichzelf als het echte adres. Zo telt een zoekmachine twee routes naar dezelfde inhoud niet als twee pagina’s. |
| Toegankelijkheid | WCAG 2.2 AA. Laagste gemeten contrast 4,50 : 1 bij 14px; op het paginabrede beeld 5,13 voor de links in de balk en 3,82 voor de kop. Automatisch getoetst, plus een handmatige doorloop met alleen het toetsenbord over elke indeling. |
| Wat er van bezoekers wordt vastgelegd | Niets. Geen cookies, geen bezoekersteller, geen scripts van derden, en geen ontvanger achter de formulieren. Er is dus ook geen partij die iets te zien krijgt. |
| Op wiens naam | Platform, domein en broncode staan op naam van de opdrachtgever, niet van de bouwer. Dat bepaalt wie er na een leverancierswissel nog bij kan. |
| Waar de bestanden staan | Broncode en bouwomgeving bij één partij, het domein bij één registrar, de bronbestanden van het merk in de opslag van de opdrachtgever. Bij deze demonstratie staan alle drie bij Rink, omdat Kaldevo niet bestaat; bij een echte opdracht hoort hier per onderdeel de partij te staan. |
| Wie erbij mag | Twee mensen bij de opdrachtgever met volledige toegang, zodat er nooit één persoon tussen het bedrijf en zijn eigen merk staat. Een leverancier krijgt toegang voor de duur van zijn opdracht en niet langer. |
| Laadtijd | Eerste zichtbare inhoud na 88 ms, document klaar na 106 ms, laatste bestand binnen na 177 ms. Achtenvijftig bestanden, 347 kB in totaal. De pagina verspringt na het laden niet meer. De norm die hierbij hoort: het grootste element binnen 2,5 seconde, verspringing onder 0,1, en reactie op de eerste handeling binnen 200 ms. |
| Meting van de opvolging | Nog niet ingericht. Wat een werkend platform hier bijhoudt is hoeveel aanvragen er binnenkomen en op welke stap iemand afhaakt, zonder dat er een bezoeker in te herkennen is. |
| Vindbaarheid | Staat uit. Kaldevo bestaat niet, en in een zoekresultaat staat de regel niet mee die dat zegt. |
Bij een site die wél formulieren verstuurt hoort op deze plek per partij te staan wat zij ziet, hoe lang zij het bewaart en waar zij gevestigd is. Dat is wat de eigen privacyverklaring nodig heeft, en het is de lijst die niemand nog kan maken zodra er een jaar overheen is.
Deze demonstratie heeft die partijen niet. Dat is een eigenschap van de demonstratie en geen norm om na te volgen: een echt bedrijf heeft een formulier dat aankomt, en dus een lijst die hier hoort te staan.
Voor wie het platform beheert. Alle inhoud komt uit lib/data.ts; de zoekindex en de sitemap worden daaruit gebouwd. De laadtijden hierboven zijn op de productiebouw gemeten, op de eigen machine en zonder netwerk ertussen. Een echte verbinding telt daar zijn eigen tijd bij op. Bij deze demonstratie staan de accounts op naam van Rink, omdat Kaldevo niet bestaat.
Wat er gebeurt nadat iemand een formulier heeft ingevuld. Hier houdt deze demonstratie op, en dat staat er met opzet bij.
| Onderdeel | Wat vastligt |
|---|---|
| Het formulier | Controleert zijn eigen velden en toont wat er verstuurd zou worden. |
| De ontvanger | Die is er niet. Geen bevestiging, geen reactietijd, geen aankomst. |
| Wat een echt systeem hier heeft | Een bevestiging in de huisstijl, een melding aan de juiste persoon, en een koppeling met het systeem waarin de aanvraag verder gaat. |
Een merksysteem eindigt niet bij het beeld. Wat een klant onthoudt is niet het logo op de bevestigingsmail maar dát er een bevestiging kwam, op zaterdagavond, binnen een minuut. Dat hoort dus in een bron thuis, met de reactietijd erbij.
Hier staat het er niet in, want er is geen ontvanger. Dat weglaten zou de indruk wekken dat een merksysteem bij het beeld ophoudt, en dat is precies de fout die deze pagina probeert te voorkomen. Een leeg hoofdstuk met de reden erbij is eerlijker dan een hoofdstuk dat er niet is.
Een pagina en geen map met bestanden. Een map vertelt niet welke versie de laatste is, en een pdf veroudert op het moment dat hij wordt verstuurd. Deze pagina leest bij elke bouw dezelfde waarden die de site zelf gebruikt, dus wat hier staat en wat er op het scherm gebeurt kunnen niet uit elkaar lopen.
Bij elke waarde staat waarom hij zo is. Niet omdat het mooi is, maar omdat een maat zonder reden bij de eerste uitzondering sneuvelt: wie niet weet waarvoor 8 pixels bedoeld is, gebruikt hem ook op de plek waar 4 hoort. Wat u hier dus niet aantreft is smaak. Geen “dit oogt rustiger” en geen “dit is moderner”. Wel de reden, en de meting eronder.
En de regel die overal geldt: staat een waarde hier niet, dan bestaat hij niet. Verzin er geen, en vraag hem op in plaats van hem te benaderen.
| Wat | Uitkomst |
|---|---|
| Afstanden | 34 soorten overgang — kop naar tekst, alinea naar alinea, beeld naar bijschrift — waarvan er 33 overal dezelfde maat aanhouden. De enige die dat niet doet is een regel met zijn onderregel; die staat krapper dan twee losse alinea’s. Doorgemeten op 11-09-2026, op een venster van 393 punten breed. |
| Kleur | 16 vastgelegde waarden, elk met vijf notaties en met de afstand tot de dichtstbijzijnde RAL en Pantone erbij. De grootste afwijking is ΔE 13,9; daarom worden de accenten gemengd en niet uit de waaier gepakt. |
| Contrast | Laagste gemeten waarde 4,50 : 1, over elke kleur tegen de grond waar hij op staat en de zwakste inkt van elk logobestand. De eis voor tekst is 4,50. |
| Maten | 9 lettergroottes, 14 afstanden, 18 logobestanden. Er wordt nergens een maat gebruikt die hier niet in staat. |
Deze getallen worden bij elke bouw opnieuw berekend uit dezelfde bestanden als de rest van de pagina. Er staat geen cijfer bij dat iets goed of slecht noemt: een rapportcijfer maakt van een bevinding een oordeel, en dan gaat het gesprek over het cijfer.
Deze pagina loopt niet vooruit op een aankondiging. Een nieuwe naam, een samenvoeging of een nieuwe uitvoering verschijnt hier op de dag dat hij binnen bekend is, niet eerder. Wie een bestand eerder nodig heeft, krijgt het rechtstreeks. Dit adres is te openen door iedereen die de link heeft, en een drukker hoort een naamswijziging niet te weten voor de mensen die het aangaat.
Vier onderdelen die een volledig merksysteem hoort te hebben, staan hier nog niet. Ze staan er wél met naam en al, want een bron die alleen toont wat er is, is geen bron.
| Onderdeel | Stand |
|---|---|
| Bergman en Verhorst op één stuk | Er is nog geen vaste opbouw voor een uiting waar beide namen op staan. Tot die er is geldt de opbouw van de groep: het merkteken van Kaldevo Groep, met de twee namen in de voettekst in de volgorde uit De merken onderling. Maak geen eigen combinatie; vraag hem op. |
| Bewerkomgeving | Die is er niet. De inhoud staat in de broncode en wordt bij de bouw gelezen, dus een redacteur kan niets wijzigen zonder een ontwikkelaar erbij. |
| Gestapelde uitvoering | Er is één opbouw: het merkteken links van de naam. Voor een vlak dat smaller is dan hoog, zoals een banier of een staande advertentie, hoort daar een variant bij met de naam ónder het teken. Die is nog niet getekend, en een bestaande uitvoering draaien of herschikken is geen variant maar een fout. |
| Meting van de opvolging | Nog niet ingericht. Zolang er geen ontvanger achter de formulieren zit valt er ook niets te tellen; zie De opvolging. |
Staat een waarde hier niet, vraag hem dan op via merkbeheer@kaldevo.example. Dat adres komt uit bij de merkbeheerder van de groep, ook voor een vraag over Van Rossem, Bergman of Verhorst: er is één plek waar het merk antwoord geeft, en geen drie. Wie die beheerder is kan wisselen, het adres niet — daarom staat hier een functie en geen naam.