De reis
De reis naar een huisstijl
Van een stijl voor documenten tot het merk van ITARR 3.0
De huisstijl van ITARR 3.0 lijkt in één weekend gemaakt. Hij begon op 9 augustus 2026, met een stijl voor documenten. Het weekend van 16 tot en met 18 oktober was de versnelling.
AI-collega's maakten de proeven. Bij elke stap koos een mens.
01 ·
Eerst een stijl voor documenten
Het begon niet met een logo, maar met een rapport. We legden vast hoe een stuk van ITARR eruitziet: Inter voor de tekst, Schibsted Grotesk voor de koppen en azul als enige accentkleur.
Wat AI maakte
Een documentsjabloon met genummerde alinea's en tabellen die niet over een pagina breken, en sjablonen voor presentaties en juridische stukken.
Wat een mens koos
De eigenaar legde de typografie vast: één accentkleur, de scherpe hoek linksboven en een kort streepje in azul boven elke titel.
02 ·
Een voorstel voor een nieuw teken
Het app-icoon liet zien dat het merk nog sprak in de letters van 2016, terwijl de documenten al verder waren. Er kwam een voorstel met vier richtingen in azul.
Wat AI maakte
Vier richtingen: de kern, de vouw, de schakel en het woord. Elk getest op wit, op donker, als app-icoon en op 32 pixels, en nagekeken door een panel van negen beoordelingen.
Wat een mens koos
Een mens liet de keuze nog open. Wel werd het woord gezet in Schibsted Grotesk.
03 ·
Een plek om kennis te delen
Op 16 oktober besloten we wat we leren open te delen, in ITARR Lab. Dezelfde nacht stonden er drie proeven van de voorpagina klaar.
Wat AI maakte
Drie indelingen met dezelfde tekst: een leeszaal, een kaart voorop en werkvelden als vakken, met een pagina om te kiezen.
Wat een mens koos
Een mens koos de werkvelden als vakken.
04 ·
Licht als standaard
Het Lab ging in het licht: wit als grond, donker alleen met een knop. De huidige site van ITARR was de maat voor rust en beweging.
Wat AI maakte
De lettertypen op onze eigen server, zonder verzoeken naar buiten, en een rustige beweging waarmee onderdelen in beeld komen.
Wat een mens koos
De eigenaar koos licht als vaste standaard, net als de huidige site.
05 ·
De raat
De opening nodigde nog niet uit. Er kwamen drie nieuwe openingen, en één zette het pad neer als zeshoeken: de raat.
Wat AI maakte
Drie openingen: de raat, probeer het zelf en drie ingangen. Met iconen bij elke stap en je voortgang onthouden in je eigen browser.
Wat een mens koos
Een mens koos de raat. De andere twee bleven als naslag.
06 ·
ITARR 3.0 spreekt de taal van het Lab
We besloten tot een nieuwe site, ITARR 3.0, in de stijl van het Lab. Eerst het logo, dan de site.
Wat AI maakte
Het plan voor de nieuwe site, en een pagina voor een stuk in de stijl van de raat. Die pagina werd later de motor onder de site.
Wat een mens koos
De eigenaar keurde het plan goed: bewijs in plaats van beweringen, en eerst een logo kiezen.
07 ·
Drie richtingen voor het teken
Het nieuwe teken begon als drie richtingen: Zeven, De open cel en Zegel en woord. Er kwam een tweede kleur bij: honinggoud.
Wat AI maakte
Per richting een beeldmerk, favicon, app-icoon, woordmerk en liggend logo, en een kiespagina met negen situaties.
Wat een mens koos
Een mens zette de keuze eerst op later en liet Zeven verder uitwerken.
08 ·
Van zeven cellen naar een fijn raster
Zeven werd in vier rondes fijner: eerst strakker en als lijn, toen een raat in de cel, toen een fijn raster zoals het veld op de beginpagina.
Wat AI maakte
Per ronde nieuwe varianten met kop, favicon, app-icoon en deelkaart, en een toets van wat op 16 en 32 pixels nog leest.
Wat een mens koos
Na elke ronde gaf een mens commentaar en een richting: fijner, de punt boven, het brandpunt in het midden en open randen.
09 ·
Cel en open rand
Uit drie laatste combinaties kwam het teken: een fijn raster van zeshoeken, de gevulde cel in het midden, en open randen die eindigen in een stip.
Wat AI maakte
Drie combinaties, groot en klein, op wit en op donker: cel en open rand, cel met licht van boven, en cel met een stippenrand. Het advies van de AI-collega's was de stippenrand.
Wat een mens koos
De eigenaar koos cel en open rand, met drie wensen erbij: het woord moet passen, het logo leeft overal, en het veld op de beginpagina spreekt dezelfde taal.
10 ·
Het teken leeft
Het logo moest overal leven. Het teken ademt nu zacht, het licht schuift rustig rond, en de gevulde cel komt naar je muis of vinger toe.
Wat AI maakte
Een levend logo met een stilstaand teken als terugval, en een beschrijving met alle getallen, zodat apps het precies kunnen nabouwen.
Wat een mens koos
Een mens bekeek de demo en liet het levende logo zo.
11 ·
Het woord bij het teken
Het woord ITARR moest passen bij het fijne teken. We schreven het ook in de raat, maar het gezette woord won, en daarna werd het iets dunner.
Wat AI maakte
Woordvarianten in drie gewichten naast het teken, het woord geschreven in de raat in twee rondes, en een blok met dunnere letters.
Wat een mens koos
De eigenaar koos het gezette woord in Schibsted Grotesk, en daarna gewicht 500 met 4 procent meer ruimte tussen de letters. De versies in de raat bleven proeven.
12 ·
Geen code-letter meer
Op 1 september ging de code-letter al uit onze documenten. Op 18 oktober ging hij overal weg: van de site, uit de proeven en uit de documenten.
Wat AI maakte
Labels en nummers in Inter met cijfers van gelijke breedte, grote getallen in Schibsted Grotesk, en een controle op lettertypen die bij elke oplevering draait.
Wat een mens koos
De eigenaar zette de code-letter op de zwarte lijst, zonder een andere als vervanger.
13 ·
Documenten en deelbeelden
Het documentsjabloon kreeg de stijl van 3.0, met het nieuwe teken en de raat op de omslag. Elk stuk van het Lab kreeg een eigen deelbeeld.
Wat AI maakte
Een drukvorm van het teken voor groot en klein, het woord als contour, de omslag met de raat, en deelbeelden van 1200 bij 630 pixels.
Wat een mens koos
De eigenaar koos voor hetzelfde sjabloon met dezelfde namen, zodat overstappen één regel is en oude stukken blijven werken.
14 ·
Het voorblad, de deelbeelden en één goud
Een dag later kreeg het voorblad van elk document de bal van het teken, licht en groot over de rechterrand. Elke pagina van de site kreeg een deelbeeld met logo, titel en die bal.
Wat AI maakte
Het voorblad en de deelbeelden uit één bestand met de stand en de kleuren van de bal, en een eigen deelbeeld per pagina.
Wat een mens koos
De eigenaar koos de bal groot over de rand, uit drie voorstellen, en één goud: kroongoud op donker, honinggoud op wit.
Het resultaat
De huisstijl van ITARR 3.0 in zeven bladen. Per blad de regel, een voorbeeld en hoe je het gebruikt.
Het teken
De regel
- Cel en open rand: een fijn raster van platte zeshoeken, samen in de vorm van een zeshoek met de punt boven.
- De middelste cel is gevuld. Vanuit die cel loopt een fade naar buiten, tot ongeveer 0,45.
- De randen zijn open en eindigen in een stip, zonder omtreklijn.
Zo gebruik je het
- Op wit in azul, op donker in kroongoud of wit.
- Klein krijgt het teken zwaardere lijnen en grotere stippen.
- In druk heeft het teken van 3 tot 12 millimeter breed een eigen, zwaardere vorm. Op het voorblad en aan het eind van een document staat het teken zelf.
Het woord
De regel
- ITARR in Schibsted Grotesk, gewicht 500, met 4 procent extra ruimte tussen de letters.
- Het woord staat rechts van het teken.
Zo gebruik je het
- Op de site staat het woord als tekst, in documenten en beelden als contour.
- Het woord in de raat bleef een proef. Gebruik altijd het gezette woord.
De kleuren
De regel
- Licht is de standaard. Donker kies je met een knop.
- Eén goud: kroongoud op donker, honinggoud op wit.
- Geen lichtgeel als vlak. Op donker mengt licht als een scherm, nooit tot een witte vlek.
- Azul #0C004C
- Kroongoud #ECB652
- Honinggoud #C4821A
Zo gebruik je het
- Azul draagt het merk. Goud is een accent.
- Het teken neemt de kleur van de pagina over.
De letters
De regel
- Schibsted Grotesk voor koppen, Inter voor tekst.
- Labels, tabellen en nummers in Inter, met cijfers van gelijke breedte.
- Grote nummers die als kop werken in Schibsted Grotesk.
- Geen letter met vaste breedte, ook niet voor code. Code staat in Inter op een lichte tint.
Zo gebruik je het
- Beide lettertypen staan op onze eigen server, met hun open licentie.
- Op deze pagina zie je ze allebei aan het werk.
Beweging
De regel
- Het teken leeft: het ademt zacht, het licht schuift rustig rond, en de gevulde cel komt naar je muis of vinger toe.
- Het raatveld op de beginpagina spreekt dezelfde taal: een fijn raster met een gevulde cel die je aandacht volgt.
- Bij minder beweging staat alles stil.
Zo gebruik je het
- Hooguit één rustige knipoog per pagina.
- Alleen dunne lijnen, geen flitsen over het hele vlak, nooit meer dan drie flitsen per seconde.
Documenten
De regel
- Het voorblad draagt de bal van het teken, licht en groot over de rechterrand.
- Koppen in Schibsted Grotesk, tekst, kop en voet in Inter, en het teken in drukvorm.
Zo gebruik je het
- Eén sjabloon voor elk stuk. Overstappen naar 3.0 is één regel; oude stukken blijven werken.
Deelbeelden
De regel
- Elk adres heeft een eigen deelbeeld van 1200 bij 630 pixels.
- Een pagina van de site krijgt het logo linksboven, de titel links onderin en de bal rechts; een stuk uit het Lab krijgt de raat met dat stuk uitgelicht.
Zo gebruik je het
- Het beeld verschijnt als iemand een link deelt, in een bericht of op sociale media.