The Whitebox — brandbook

Zwart, wit en één woord dat afwijkt.

Dit is hoe de site eruitziet, en dus hoe we communiceren. Geen accentkleur, rechte hoeken, foto's die het werk doen. Alles wat hieronder staat is afgelezen uit de code — het is geen voorstel, het is wat er live staat.

Uitgangspunten

Vier regels waar de rest uit volgt.

  • Geen accentkleur. De enige kleur op de site komt uit de foto's. Contrast maken we met vlakverdeling en typografie.
  • Rechte hoeken. De radius staat op nul. Niets is afgerond — geen knop, geen kaart, geen beeld.
  • Eén accent per kop. Precies één woord in de serif. Twee accenten in dezelfde kop halen elkaar onderuit.
  • Rust boven effect. Geen zoom, geen parallax, geen slider. Beweging is een subtiele reveal en zwart-wit dat inkleurt.

Kleur

Zes waarden, meer niet.

De achtergrond is off-white en geen puur wit: veel foto's hebben een lichte achtergrond en lopen tegen #ffffff weg in de pagina.

#FAF9F7Achtergrond
#111111Tekst, gevulde knop
#232323Paneel achter foto's
#6B6B6BBijschrift, label
#EDECE9Fotoplaceholder
#E5E5E5Scheidingslijn

Het paneel is bewust lichter dan de tekstkleur. Op #111 leest een blok naast een foto als een gat in de pagina; op #232323 blijft het een vlak.

CombinatieContrastNorm
#111111 op #FAF9F717,95:1ruim boven AA
#6B6B6B op #FAF9F75,06:1AA, met marge
#FFFFFF op #23232315,72:1ruim boven AA

Let op bij wijzigen: het oude grijs #737373 haalde op deze achtergrond nog maar 4,51:1 en zat daarmee tegen de AA-grens van 4,5 aan. Verander je de achtergrond, controleer dan het grijs — en omgekeerd.

Typografie

Inter draagt alles. Playfair mag één woord.

Twee letters, strikt gescheiden van rol. De serif is nooit lopende tekst: hij markeert één woord per kop, en zet de volgnummers.

Hero / paginatitel — 58px · 700 · tracking −0.025em

Van visie naar actie.

Sectiekop — 52px · 700 · tracking −0.025em

Een dienstbedrijf bouw je anders.

Subkop — 30px · 700 · tracking −0.02em

We starten bij de ondernemer

Body — 16px · 400 · regelhoogte 1,6 · max 34em

Bedrijven worden gebouwd door mensen, niet door concepten. Dus kiezen we voor jou, niet voor je plan. Welk idee daaruit groeit, zien we samen wel.

Kapitaal-label — 13px · 700 · tracking 0,06em

Venture development

Volgnummer — Playfair 700 · 26px

01   02   03

Onder de 13px gaan we niet. Kapitaal-labels werken alleen bij korte termen van twee of drie woorden — een hele zin in kapitalen leest hard. Kort dan de tekst in, verklein het lettertype niet.

Beeld

Zwart-wit, kleur bij aandacht.

Alle foto's staan standaard in zwart-wit en kleuren in bij hover, in 700ms. Dat houdt een lange pagina rustig en beloont wie ergens blijft hangen. Beweeg over de foto.

Ondernemer op de trap bij The Whitebox

Geen zoom bij hover — die is er bewust uit gehaald. Foto's zijn WebP, maximaal 1600px op de lange zijde, kwaliteit 82. Let op: een foto die aan de bron gedesatureerd is, kan geen CSS terugkleuren.

Componenten

Eén constructie, twee formaten.

Kaarten zijn opgebouwd uit een foto met een blok dat naar rechtsonder verspringt, en tekst op de strook die daardoor vrijkomt. Bedrijven en mensen gebruiken dezelfde vorm, alleen anders geschaald.

Bedrijfskaart

Second Seat
Second
Seat

Blok 8% opzij en omlaag. De naam valt 26% van zijn hoogte over de fotorand, in effen wit — geen blend-modus, die maakt letters onleesbaar boven een beeld.

Teamkaart

Blok 7%. De band heeft een vaste hoogte, anders wordt één kaart hoger dan de rest zodra iemand een lange functietitel heeft. Op de homepage staat alleen de voornaam.

Genummerd item

01

Venture development

Wil je ondernemen maar weet je niet waar te beginnen? Wij helpen je met de juiste structuur, strategie en middelen.

02

Personal development

Individuele coaching en begeleiding, afgestemd op jouw ambities als ondernemer.

Actie

Ga je ergens naartoe, dan is het een link. Doe je iets — een formulier versturen, solliciteren — dan is het een vlak. De typografie is in beide gevallen dezelfde kapitaal-schaal.

Ritme

Label links, inhoud rechts.

Elke sectie opent met een haarlijn en zet het label in de linkermarge. Deze pagina staat op datzelfde raster — de kolom links van deze tekst is hem.

240px — label
1fr — kop, body, componenten · tussenruimte 64px

Container 1280px, marge 24px op mobiel en 40px daarboven. Secties krijgen 80 tot 112px lucht boven en onder. Op mobiel klapt het label boven de inhoud.

Taal

Schrijf zoals je het zou zeggen.

Afgeleid uit de copy die nu op de site staat. Vlaams, informeel, concreet. Je spreekt één ondernemer aan, niet een markt.

Wel

Je hoeft geen plan te hebben. Zelfs nog geen idee.

Niet

Wij faciliteren ondernemers in elke fase van hun traject.

Wel

De koffie is goed, beloofd.

Niet

Neem gerust vrijblijvend contact met ons op.

Wel

Dat weet je toch pas echt wanneer de eerste facturen betaald worden.

Niet

Validatie vindt plaats in de commerciële fase van het project.

  • Je, niet u. Ook in mail en op LinkedIn.
  • Eén idee per zin. Kort mag. Een zin van vier woorden mag ook.
  • Concreet boven abstract. "Geen dikke handboeken" zegt meer dan "pragmatische aanpak".
  • Geen jargon, geen Engels als het Nederlands bestaat. Goesting mag.
  • Beloof niets dat je niet waarmaakt. Als iedereen het beweert, laat het dan weg of maak het concreet.