Het vlak
De achtergrond van elke pagina. Diep antraciet, geen zwart.
- HEX
- #121212
- RGB
- 18, 18, 18
- CSS
- --bg
Hiertegen is elke verhouding op deze pagina gemeten.
De Bron
Wat bij Van Rink zelf
Wat bij Van Rink zelf
is vastgelegd
Een Bron is normaal privé en staat op het adres van de klant. Deze staat open, als voorbeeld van de vorm, met mijn eigen waarden erin, inclusief de onderdelen die er nog niet zijn.
Waarom deze pagina open staat. Een Bron hoort privé te zijn: een nieuwe leverancier krijgt de link en verder niets, en niemand anders kan meekijken. Dit is de enige Bron die dat wél mag zijn, omdat hij van mij zelf is en niets bevat dat elders op deze site niet al openbaar staat. De Bron van een klant blijft achter een link.
Zeven onderdelen: het logo, kleur, typografie, raster en patronen, downloaden, het platform en de opvolging.
Het logo
Één woordmerk, geen stelsel eromheen
Het horizontale woordmerk in twee versies: wit voor op een donker vlak, zwart voor op een licht vlak zoals een document. Verder geen apart beeldmerk zonder de letters. Dat is minder dan wat er bij een traject wordt opgeleverd, en dat is hier met opzet zichtbaar: de methode is nieuw, en dit systeem is er nog niet volgens de methode doorheen gegaan.
| Woordmerk wit | #FFFFFF, 1042,3 × 270,7. Voor op een donker vlak |
|---|---|
| Woordmerk zwart | zelfde vorm, vulkleur #111111. Voor op een licht vlak, bijvoorbeeld een document of brief |
| Varianten | geen los beeldmerk zonder de letters. Geen grijze of eenkleurige tussenvorm |
| Bestandsformaten | per woordmerk SVG, PNG (400, 1000 en 2000 pixels breed, transparant), PDF en EPS. Alles in RGB. Ze staan bij Downloaden, met wat u waarvoor pakt |
| Favicon | de R uit het woordmerk, op volle hoogte en zonder vlak eronder. Ook die staat bij Downloaden, met de reden waarom hij er zo uitziet |
| Constructietekening | bestaat niet. Wacht op de vraag of de N zijn linkerstam hoort te missen: wie het raster tekent van een merkteken dat nog kan veranderen, tekent het misschien twee keer |
Welke van de twee
De variant volgt uit het vlak eronder, niet uit smaak. In getallen, uitgerekend uit de kleuren zelf:
| Wit op het vlak | 18,73 : 1. Zo staat het op deze site |
|---|---|
| Zwart op licht | 18,09 : 1 op #FAFAFA. Zo staat het op een document |
| Wit op licht | 1,044 : 1. Het woordmerk verdwijnt. Daarom staat het witte bestand op deze pagina altijd op een donkere tegel |
Gebruiksregels
Voor het eerst vastgelegd op deze pagina, niet afgeleid van een bestaande gewoonte:
- Minimale grootte in productie: 46 bij 12 pixels, de kleinste weergave van het woordmerk, in de navigatiebalk op een telefoon. Kleiner is niet getoetst.
- Twee vastgelegde varianten: wit op donker, zwart op licht. Kies de variant op het contrast met de achtergrond, niet op smaak.
- Geen rotatie, geen uitrekking, geen schaduw, geen verloop.
- Geen andere kleur dan de twee vastgelegde varianten.
- Vrije ruimte: in de navigatiebalk is dat de marge van de pagina zelf, dezelfde --gutter-formule als de content. Een vaste minimale vrije ruimte los van die ene toepassing bestaat niet; dat wacht op de constructietekening hierboven.
Wat er misgaat
Elke tegel doet één ding dat de regels hierboven verbieden.
Dit is het echte woordmerk met een bewerking in de opmaak, alleen om de regels te laten zien. Er zit geen bestand achter en ze staan niet in het archief.
Kleur
Acht waarden en geen kleur
De site is zwart-wit. Acht waarden dragen alles: een vlak, twee lijnen, vier tinten tekst en één voor de knop. Bij elke waarde staat de verhouding tegen het vlak. Die wordt bij elke bouw uitgerekend uit tokens.json, en niet overgetypt. Het knopje achter een waarde kopieert hem.
Het vlak, de lijnen en de knop
Merkkleur
De gevulde knop, de actieve status en de focusrand. De tekst op de knop is het vlak zelf.
- HEX
- #E8E8E8
- RGB
- 232, 232, 232
- CSS
- --merk
15,29 : 1 tegen het vlak. Contrast werkt twee kanten op, dus dat getal geldt ook voor het vlak als tekst op de knop.
Scheidingslijn
1 px tussen blokken en onder koppen.
- HEX
- #333333
- RGB
- 51, 51, 51
- CSS
- --line
1,483 : 1 tegen het vlak, geen tekst, alleen scheiding.
Zachte lijn
Tussen de rijen van een tabel.
- HEX
- #222222
- RGB
- 34, 34, 34
- CSS
- --line-soft
1,177 : 1 tegen het vlak, geen tekst, alleen scheiding.
Tekst
Koppen vanaf 32 px
Een tint onder wit, tegen de gloed op groot formaat.
- HEX
- #EDEDED
- RGB
- 237, 237, 237
- CSS
- --display
16,00 : 1 tegen het vlak, AAA.
Koppen daaronder en nadruk
Tussenkoppen, links en vetgedrukt.
- HEX
- #FAFAFA
- RGB
- 250, 250, 250
- CSS
- --white
17,95 : 1 tegen het vlak, AAA.
Lopende tekst
Alinea’s, tabellen en uitlegregels.
- HEX
- #A3A3A3
- RGB
- 163, 163, 163
- CSS
- --text
7,43 : 1 tegen het vlak, AAA.
Labels en microtekst
Kickers, bijschriften en bronregels.
- HEX
- #8A8A8A
- RGB
- 138, 138, 138
- CSS
- --text-dim
5,43 : 1 tegen het vlak, AA.
Niet in gebruik, wel in de opmaak gedefinieerd: ok #10B981 · ok, vlak #064E3B · gevaar #EF4444 · gevaar, vlak #451A1A. Ze staan klaar mocht de site ooit een signaalkleur nodig hebben, en komen op geen enkele pagina voor.
Waarom er geen kleur is
Er is een merkkleur geprobeerd, wijnrood, en weer losgelaten. Op een pagina waar maar één knop staat voegt kleur geen zichtbaarheid toe. En rood had een bezwaar dat zwaarder woog: wat ik oplever markeert afwijkingen, en dan kan dezelfde kleur niet ook de knop zijn.
Het vlak is #121212 en geen zwart. Puur zwart versterkt de gloed rond lichte koppen. Daarom staan koppen vanaf 32 pixels ook een tint lager dan wit; daaronder treedt het effect niet op en blijft de tekst wit.
De twee lijnen zijn met het vlak meegeschoven. Verandert het vlak, dan moeten zij mee, anders verdwijnt de zachte lijn.
Geen CMYK of Pantone. Er is nog geen drukwerk om op te matchen, en een omrekening zonder proef is een getal dat er exact uitziet en het niet is.
Typografie
Één letter, één trap
Inter voor alles, uit één variabel bestand. De tekst in de interface loopt over één trap met factor 1,125 vanaf 16 pixels. De koppen staan bewust in een ander register: zij lopen vloeiend mee met de breedte van het venster.
De letter zelf
| Familie | Inter, variabel: elk gewicht van 100 tot 900 in één bestand |
|---|---|
| Gewichten | 400 voor lopende tekst, 500 voor tussenkoppen, 600 voor koppen, labels, links en nadruk, 700 alleen voor de kop van de homepage |
| Waar hij staat | zelf gehost, in twee bestanden: het Westeuropese Latijn, en een tweede voor tekens daarbuiten. De browser haalt dat tweede alleen op als een pagina zo’n teken bevat. Geen Google Fonts of andere externe koppeling |
| Licentie | SIL Open Font License 1.1. Installeren, insluiten in een pdf en meeleveren mag |
| Als hij niet laadt | Inter, -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, Helvetica Neue, Arial, sans-serif. Dat is de regel uit de opmaak zelf |
| Buiten het web | nog niet vastgelegd. Inter is gratis te installeren, dus in Word en PowerPoint kan hij gewoon. Welke letter er in een e-mail staat, ligt nog niet vast |
De tekstrollen
Welke maat u pakt volgt uit de rol van de tekst, niet uit hoe groot het moet ogen. Elke regel hieronder staat in de opmaak van de site zelf, dus op precies de maat die er staat.
-
Kop van de homepage40–72 px vloeiend, 24,5 px op een telefoon
Uw merk
Alleen de opening van de homepage.
-
Paginakop en sectiekop32–40 px. In een tekst-en-kop-paar volgt hij de kolom, 24–40 px. 21 px op een telefoon
Eén letter, één trap
De kop van elke pagina en van elk blok.
-
Tussenkop20–24 px, 18 px op een telefoon
De letter zelf
Een onderdeel binnen een blok, zoals hier.
-
Kaarttitel18 px, 16 px op een telefoon
Woordmerk wit
De naam van een kaart of een rij.
-
Claimregel20,25 px, gewicht 600, 18 px op een telefoon
Ik herschrijf en veranker uw merksysteem na een overname of fusie.
Eén keer per pagina, onder de kop: wat ik doe.
-
Uitlegregel18 px
Wat niet is vastgelegd, wordt door iemand anders ingevuld.
De alinea direct onder een kop.
-
Lopende tekst16 tot 18 px, vloeiend met de breedte van het venster
Een leverancier die de waarde vindt, hoeft niet te bellen.
Alles wat geen kop of label is.
-
Verwijzing14,22 px
Meer daarover staat bij Kennis.
Een regel die naar een andere pagina wijst.
-
Kicker12,64 px, hoofdletters, ruim gespatieerd
De Bron
Boven een kop, om te zeggen waar de lezer is.
-
Bronregel12,64 px
Gemeten in de browser op 1440 pixels.
Herkomst en voetnoot. Nooit een doorverwijzing.
De trap
Zeven treden uit één reeks met factor 1,125. De reeks slaat er drie over die nergens gebruikt worden. Er is geen tussenmaat: staat iets te groot en de trede eronder te klein, dan is het antwoord een van de twee.
- Aa11,24--maat-min3
- Aa12,64--maat-min2
- Aa14,22--maat-min1
- Aa16,00--maat-0
- Aa18,00--maat-1
- Aa20,25--maat-2
- Aa32,44--maat-6
Waarom één trap en geen losse maten
Er stonden zeventien losse maten in de opmaak, met verhoudingen van 1,029 tot 1,7 ertussen. Dat is een glijschaal en geen trap, en een volgende maker kiest daar zijn eigen tussenstap in.
De factor 1,125 is de kleinste waarbij zowel 16 als 18 op de trap valt, en dat waren de twee maten die al vastlagen. Op een telefoon staan de koppen op vaste pixels (21, 18 en 16), omdat die op regelval zijn uitgemeten.
Raster en patronen
Het raster en de bouwstenen
De maten zijn nagemeten in de browser, niet overgetypt uit de opmaak.
| Raster en tokens | |
|---|---|
| Raster | container van 1440 pixels, marge 32 pixels (24 op mobiel). Geen vastgelegd kolomaantal |
| Design tokens | kleur, letters en maten machinaal leesbaar als één bestand: tokens.json |
| Bestaan nog niet | basisvormen en iconen, beeldregels als document, digitale sjablonen (handtekening, presentatie, LinkedIn-banner) |
| Patronen waarmee elke pagina wordt gebouwd | |
| Paginakop met claim | de opening van een landingspagina: kop, een losstaande claimregel, dan de uitleg |
| Paginakop, eenvoudig | de opening van een gewone pagina: kop en één alinea |
| Tekst-en-kop-paar | kicker en kop links, uitleg rechts. Het meest gebruikte blok op de site |
| Opleveringstabel | term en uitleg, gegroepeerd onder een kicker. Deze tabellen zijn er een voorbeeld van |
| Vergelijkingstabel | drie of meer kolommen met een kop erboven; klapt op mobiel om tot losse rijen |
| Knop | één vorm, twee vullingen: gevuld voor de primaire actie, omlijnd voor de rest |
| Sectieafsluiter | vaste kop-en-knopband aan het eind van bijna elke pagina |
Elke pagina is een combinatie van deze patronen, nooit een eigen ontwerp. Daarom kost een nieuwe pagina geen ontwerpronde.
Downloaden
Alles rechtstreeks, zonder aanvraag
De bestanden zelf, elk met een voorbeeld erbij, zodat u ziet wat u ophaalt voordat u het ophaalt. Onderaan staat alles nog eens in één archief.
Het woordmerk
Welk bestand waarvoor
| Website | SVG. Scherp op elke maat, en het kleinste bestand |
|---|---|
| Word, PowerPoint, Google Docs | PNG 2000, transparant. Een SVG werkt daar niet overal |
| E-mailhandtekening | PNG 400. De meeste e-mailprogramma’s tonen geen SVG |
| Drukwerk, belettering, gevel | PDF of EPS, allebei vector. Ze zijn RGB: de drukker rekent zelf om, dus vraag om een proef |
| Twijfelt u over wit of zwart | kijk naar het vlak eronder, niet naar het bestand. Een wit woordmerk op een witte pagina is onzichtbaar; zie Het logo |
Favicon
Eén bestand, favicon.svg. Het wisselt mee met de stand van de browser: zwart in een lichte, bijna wit in een donkere, want een zwarte letter zonder vlak eronder is op een donker tabblad onzichtbaar.
De waarden als bestand
Kleur, maten en typografie in een bestand dat een computer kan lezen: tokens.json. Bij elke bouw van deze site wordt gecontroleerd of elke kleur en elke maat daaruit nog in de opmaak staat, dus het bestand kan niet stil achterlopen.
Alles in één keer
Twee archieven, uit dezelfde bestanden. De logo’s: beide woordmerken in alle formaten, elk formaat in een eigen map. Het hele merksysteem: dezelfde logo’s, plus het favicon, het app-icoon en tokens.json.
Beide archieven worden bij elke bouw van deze site opnieuw gemaakt uit de bestanden die hier staan, dus ze kunnen niet achterlopen op de pagina. Wat er ontbreekt: geen los beeldmerk zonder de letters, geen CMYK of Pantone, geen WEBP- of JPG-export, geen iconenset los van het favicon.
Het platform
Statisch, zonder databank en zonder tracering
Statische pagina’s: geen databank, geen server die per bezoeker iets berekent, geen scripts van derden. Dat maakt de site snel en houdt de privacy heel.
| Hosting | Vercel, op naam van Van Rink. Serverlogs worden ten hoogste dertig dagen bewaard, zoals ook op Privacybeleid staat |
|---|---|
| Toegankelijkheid | de contrastwaarden hierboven halen 4,5:1 voor lopende tekst ruimschoots. De geautomatiseerde toets scoort 100 van de 100 op deze pagina en op de homepage. Dat is een automatische toets, geen menselijke doorloop met een schermlezer |
| Laadtijd | grootste zichtbare element 2,0 s, verspringing tijdens het laden 0,003 (ruim onder de grens van 0,1), geen blokkerende tijd op de eerste handeling (0 ms). Gemeten tegen een lokale build; op de echte hosting kan dit afwijken, dan wordt het bijgewerkt |
De opvolging
Wat er gebeurt na een formulier, en wat er bewust niet gebeurt
| Formulier en melding | een contactaanvraag gaat via een Vercel-functie en Resend naar één inbox, demy@vanrink.com. Geen gedeeld postvak, geen CRM ertussen |
|---|---|
| Meting | bewust afwezig. De site zet geen cookies en laadt geen trackingscript; er wordt niets gemeten over wat een bezoeker doet. Bij een klant is meting van opbrengst en afhaakpunten wel onderdeel van de opvolging; hier niet, om dezelfde reden dat er geen toestemmingsbanner staat: er is niets om toestemming voor te vragen |
| Documentatie | deze pagina zelf: elke waarde staat erop, met de reden erbij waarom hij staat zoals hij staat |
| Accounts | domein en hosting staan al op naam van Van Rink. Bij een klant is dat de belofte; hier is het de uitgangssituatie |
Onderhouden door
Vragen over deze pagina, het systeem of de bestanden
Demy Rink, Brand Systems Architect, Van Rink.
demy@vanrink.com
Deze pagina wordt bijgewerkt zodra er iets aan het systeem verandert, niet op een vaste datum. Er is geen versienummer: wat hier staat is altijd de actuele stand.