Jottem

Maak erfgoed van iedereen, door iedereen.

Dit is de merkgids van Jottem. Hier staat hoe het merk eruitziet, hoe het klinkt en hoe je het gebruikt. Alles wat je nodig hebt, kun je hier downloaden.

Versie 1.0 · augustus 2026 · vast te stellen door de projectgroep

0 · Het merk

Uit de schoenendoos.

In elk huis staat wel een schoenendoos vol foto's. Op zolder, in de kast, bij oma. Vol verhalen die niemand meer kent - tenzij we ze nu samen bewaren.

Jottem haalt dat materiaal uit de doos. Inwoners delen hun foto's en documenten. Anderen herkennen er iets in en vertellen erbij wat zij weten. Archieven en musea bewaren het, voor altijd en voor iedereen. Zo wordt erfgoed van iedereen, door iedereen.

Positionering

Wat Jottem is

Jottem is het participatieve erfgoedplatform van Inside Out Time Machines: dé plek waar inwoners en erfgoedorganisaties samen lokale geschiedenis verzamelen, verrijken en bewaren.

Warm

Jottem gaat over mensen en hun herinneringen. Het merk voelt als thuis: warm papier, geen koud systeem.

Begrijpelijk

Iedereen moet kunnen meedoen, van kleinkind tot overgrootmoeder. Dus: gewone taal, duidelijke knoppen.

Open

Open source, open standaarden, open data. Wat we samen maken, is van ons allemaal.

Duurzaam

Een jottem krijgt een blijvende link en gaat nooit meer verloren. Bewaren doen we voor de lange termijn.

Eén bijdrage - een foto, menukaart of document mét de verhalen erbij - noemen we een jottem. "Jottem!" is ook wat je zegt als iets gelukt is. Die dubbele betekenis is het merk in één woord.

Tone of voice

Zo klinkt Jottem

We schrijven heel begrijpelijk (taalniveau B1). Korte zinnen. Gewone woorden. We zeggen "je", we schrijven actief en we maken het persoonlijk. Vakjargon leggen we uit of laten we weg.

Schrijf zo Deel je foto's. Wij bewaren ze veilig, met jouw verhaal erbij.
Niet zo Gebruikers kunnen beeldmateriaal uploaden naar de digitale repository.
Schrijf zo Ken je deze persoon? Klik op de foto en vertel het ons.
Niet zo Annoteer entiteiten door middel van de annotatiefunctionaliteit.
Schrijf zo Je foto staat online. Deel hem gerust - jottem!
Niet zo Uw bijdrage is gepubliceerd conform het moderatieproces.
2 · Kleur

Warm papier, oranje verhaal

Het palet komt uit de schoenendoos: warm papier en karton als ondergrond, inkt om mee te schrijven, en één opvallende kleur - het oranje van de spraakwolk. Klik op een kleur om de HEX-code te kopiëren.

Regels

  • Papier is de grondtoon. Pagina's zijn warm papier, nooit hard wit.
  • Oranje is zeldzaam en daardoor sterk. Gebruik het voor knoppen, links en de O - niet voor grote lappen tekst.
  • Lopende tekst is altijd inkt op papier of wit.
  • Organisatiekleuren mogen erbovenop. Elke organisatiejottem heeft een eigen kleur; die vervangt het oranje op de organisatiepagina's, de basislaag blijft gelijk.

Contrast (WCAG)

CombinatieVoorbeeldContrastGebruik
inkt op papiertekst15,5 : 1alle tekst ✓
wit op roesttekst6,4 : 1alle tekst ✓
roest op papiertekst5,9 : 1alle tekst ✓ (linkkleur)
wit op oranjetekst3,9 : 1alleen grote of vette tekst (knoppen, koppen)
oranje op papiertekst3,6 : 1alleen groot of grafisch, geen kleine tekst
3 · Typografie

Fraunces & Albert Sans

Twee lettertypes, allebei open source (SIL OFL) en altijd lokaal gehost - nooit via een extern CDN. Zo laden pagina's snel, blijft de privacy van bezoekers beschermd en ziet het merk er overal hetzelfde uit.

Koppen - Fraunces (400 · 600 · 700 · italic)

Herken jij de bakker uit 1962?

AaBbCcDdEeFfGg HhIiJjKkLlMm 0123456789

"Mijn vader begon dit restaurant." - voor citaten en herinneringen

Lopende tekst en interface - Albert Sans (400 · 500 · 600 · 700)

AaBbCcDdEeFfGg HhIiJjKkLlMm 0123456789

Albert Sans is helder en vriendelijk. Het is de letter voor alle lopende tekst, knoppen, formulieren en bijschriften. Goed leesbaar, ook klein en op een telefoon.

RolVoorbeeldFontGrootte / gewicht
H1 - paginakopUit de schoenendoosFraunces2,6–5 rem · 700 · regelhoogte 1,05
H2 - sectiekopZo gaat het werkenFraunces2,1–3,2 rem · 700
H3 - subkopAlle variantenFraunces1,4 rem · 600
Body - lopende tekstIn elk huis staat een schoenendoos.Albert Sans1,125 rem (18 px) · 400 · regelhoogte 1,65
Label / eyebrow2 · KleurAlbert Sans0,85 rem · 700 · kapitalen, letterspatiëring
Citaat / herinnering"Dat is Wong Lee!"Fraunces italic1,15 rem · 400

Fallback-stapels

Laadt een font niet, dan vallen we terug op letters die er het meest op lijken:

font-family: 'Fraunces', Georgia, 'Times New Roman', serif;        /* koppen */
font-family: 'Albert Sans', 'Segoe UI', system-ui, sans-serif;     /* body en UI */
4 · Vormtaal

Alsof het op tafel ligt

De grafische elementen komen uit de echte wereld van de schoenendoos: polaroids, plakband, memo-briefjes en karton. Alles ligt een beetje scheef, alsof je het net hebt neergelegd. Dat maakt Jottem direct herkenbaar.

Restaurant Lotus, 1973

Polaroid-kaart - wit kader, plakband, lichte rotatie (2–7°), bijschrift in Fraunces italic. Hét kader voor foto's en jottems.

"Ik herken de kok: dat is Wong Lee."
- herinnering van een Gouwenaar

Memo-briefje - geel, licht gedraaid. Voor citaten, herinneringen en korte notities.

Kaart met topline
Witte kaart, dunne kartonrand en een oranje bies van 4 px aan de bovenkant.

Kaart - de bouwsteen voor lijstjes, stappen en blokken op alle pagina's.

Primaire knop Secundaire knop

Knoppen - primair: oranje met witte, vette tekst (hover: oranje donker). Secundair: oranje rand op transparant.

De spraakwolk-O - als los beeldmerk mag de O terugkomen als accent: bij citaten, als opsommingsteken of als watermerk. Spaarzaam gebruiken.

schoenendoos · zolder · 1962–1996

Lijnen en labels - dunne lijnen in kartonrand; archieflabels in Fraunces italic, alsof iemand ze met de hand op de doos schreef.

5 · Beeldgebruik

Echt materiaal, warm bekeken

Jottem toont écht materiaal: familiefoto's, menukaarten, advertenties, documenten. Geen stockfoto's, geen gladde modellen. Warmte mag je zien.

  • Gebruik beeld uit de collecties zelf, of echte mensen op echte plekken.
  • Behandel beeld warm: iets sepia, zachte contrasten - nooit fel oververzadigd.
  • Zet foto's in een polaroid- of papierkader, licht gedraaid.
  • Herkenbare personen? Alleen met toestemming - zoals het platform dat ook vraagt.

Goed - warm en zacht: sepia(.55) saturate(.9) contrast(.92)

Vermijd - fel, hard en oververzadigd: dit is geen reclamefolder.

6 · Motion

Rustig, als papier

Beweging is bij Jottem klein en betekenisvol. Dingen schuiven zachtjes op hun plek, zoals je een foto op tafel legt. Niets flitst, niets springt.

De tijdmachineklok - de wijzers draaien terug: Jottem neemt je mee de tijd in. Het vaste motion-icoon van het merk.

beweeg eroverheen

Hover - een polaroid richt zich ietsje op als je eroverheen beweegt: draaiing bijna recht, 3% groter. Meer niet.

Blokken verschijnen met een zachte fade en schuiven 14 px omhoog, in ruim een halve seconde - zoals op deze pagina.

Reveal - bij het scrollen, één keer, nooit opnieuw.

  • Duur: 0,15–0,6 seconde. Eén beweging tegelijk.
  • Beweging ondersteunt, maar is nooit nodig om iets te begrijpen.
  • Wie prefers-reduced-motion aan heeft staan, krijgt géén animaties - op deze pagina en op het platform.
7 · In het echt

Het merk aan het werk

Zo ziet de huisstijl eruit op de plekken waar mensen Jottem tegenkomen.

Maak erfgoed van iedereen, door iedereen

In elk huis liggen schoenendozen vol foto's…

Bekijk het prototype

Website - papier als grond, woordmerk linksboven, één oranje primaire knop. Bekijk live.

Je jottem staat online!

Beste Anna, je foto "Markt 12, 1958" is goedgekeurd…

Bekijk je jottem

E-mail - gekleurde kop met het witte woordmerk, daaronder wit met één duidelijke knop. Bij organisatiemails krijgt de kop de organisatiekleur en het organisatielogo.

jottem · prototype

Smaak van Gouda

Verdwenen horeca: deel je foto's en herinneringen.

Platform en prototype - donkere balk met de O in wit. Bekijk live.

Streekarchief Midden-Holland
organisatiejottem

Eigen kleur, zelfde fundament

De organisatiekleur vervangt hier het oranje; typografie, kaarten en vormtaal blijven Jottem.

Doe mee

Organisatiejottem - elke organisatie krijgt haar eigen kleur en logo bovenop de Jottem-basislaag (logo, kleurenpalet en favicon per organisatie, zie het ontwerp).

8 · Downloads

Aan de slag

Alles wat je nodig hebt om met het merk te werken, in één keer te downloaden.

Logopack

Alle logovarianten als SVG en PNG (1x en 2x), plus de favicons en een leesmij met de regels.

Download logopack (zip)

Fonts

Fraunces en Albert Sans als woff2, met de SIL OFL-licenties erbij. Host ze altijd zelf, mee met je site.

Download fonts (zip)

CSS-tokens

De kleuren en lettertypes als kant-en-klare CSS-variabelen - dezelfde basislaag als op het platform.

Download tokens (css) 
/* Jottem design tokens - de basislaag van de huisstijl */
:root {
    --oranje: #d85a30;        /* primair: knoppen, links, de O */
    --oranje-donker: #c04e28; /* hover-toestand */
    --roest: #a2401f;         /* secundair: koppen op licht, linkkleur */
    --inkt: #1f1e1c;          /* tekst */
    --grijs: #6b625c;         /* bijschriften, gedempte tekst */
    --papier: #faf6f1;        /* achtergrond */
    --karton: #e8d9c4;        /* vlakken */
    --kartonrand: #d3bfa3;    /* randen en lijnen */
    --geel: #fdf3c0;          /* memo's en stickers */
    --wit: #ffffff;           /* kaarten */
    --onderkant: #665245;     /* footer */
    --kop: 'Fraunces', Georgia, 'Times New Roman', serif;
    --body: 'Albert Sans', 'Segoe UI', system-ui, sans-serif;
}