Hoe Trailwise eruitziet, klinkt en beweegt

Logo en woordmerk

Het beeldmerk is beslist. Ascent, aangenomen op 31 augustus 2026: drie balken onder 17,5 graden, dezelfde hoek als de afschuining van de knoppen. De twee achterste zijn passen die al gelopen zijn en dragen de inkt, de voorste draagt het turquoise. Twee waarden, en niets in de tekening kleiner dan een balk, en daarom houdt hij stand op 16px waar de vorige tekening dat niet deed. Hij vervangt de Field Guide-berg, die op deze pagina nooit verder is gekomen dan ‘voorstel’.

Het woordmerk, en dat ene turquoise woord

Space Grotesk 500 op −0.05em, in kleine letters. ‘trail’ is inkt en ‘wise’ is turquoise, op licht en donker allebei. Dat is de enige uitzondering op de regel dat turquoise een vulling is en nooit een woord, en de uitzondering reist niet mee: een kop in turquoise is nog steeds fout. WCAG stelt logotypetekst vrij van contrast, maar de verhouding is 2,5:1 op wit en 2,0:1 op de sky-band, en daarom heeft het woordmerk een ondergrens. 24px kapitaalhoogte op wit, 28px op sky. Daaronder gebruik je het beeldmerk alleen. Het woordmerk en beide lockups worden geleverd als contouren in plaats van levende tekst, dus ze renderen correct zonder dat er lettertypen geïnstalleerd zijn: e-mail, pdf, druk.

Vrije ruimte en minimumformaat

De vrije ruimte rondom is gelijk aan de breedte van één balk, 12 eenheden op het 72-raster. Onder 24px op een effen achtergrond gebruik je de favicontekening: twee balken die dikker hertekend zijn, niet het beeldmerk verkleind. Op de inkttegel blijven de drie balken tot op 16px van elkaar gescheiden, en dat is wat het browsertabblad en het app-icoon gebruiken.

Kleur

Inkt en papier doen het werk. Turquoise is het enige accent en het is een vlak, nooit een woord: op 2.5 tegen wit zakt het als tekst op elk formaat. Waar turquoise gelezen moet worden, wordt het turquoise diep. Hemel scheidt de ene sectie van de volgende en vult nooit een hele pagina.

Grafiekreeksen · in deze volgorde toewijzen, nooit cyclisch

Getoetst tegen wit op helderheid, chroma, onderscheid bij kleurenblindheid en contrast. Alle acht zijn veilig waar reeksen naast elkaar liggen, zoals bij lijnen en balken. In een spreidingsdiagram of een small multiple, waar elk paar elkaar kan tegenkomen, houden alleen de eerste drie stand; voorbij drie voeg je samen tot Overig of splits je in facetten.

Sequentieel en divergerend

Typografie

Twee families, en de scheiding is strikt. Space Grotesk op −0.05em is voor alles wat spreekt. Noto Sans op +0.02em is voor alles wat uitlegt. Hiërarchie komt uit grootte en gewicht, nooit uit een derde letter. Nadruk is gewicht of kleur, nooit cursief.

De markeerstift

Tokens

Containers zijn rond, bedieningselementen zijn vierkant, en het contrast daartussen is de look. Maak de bedieningselementen niet zachter en de kaarten niet scherper.

Knoppen

Een afschuining linksboven over de volle hoogte, zodat het element leunt in de richting waarin al het andere beweegt. Eén primaire actie per scherm. Hover verdiept de inkeping in plaats van een kleur te wisselen, en dat is de enige plek op de site waar een hover een gebaar is in plaats van een statuswissel.

Badges en status

Hoofdletters, gespatieerd, vierkant. Vier gereserveerde statuskleuren die nooit een grafiekreeks worden. Een statuskleur draagt de betekenis nooit alleen: er komt altijd een stip of een woord bij.

Formulieren

Labels zijn altijd zichtbaar, gezet in microletter met hoofdletters boven het veld. Hints staan er permanent, ze verschijnen niet pas bij een fout. Velden zijn vierkant, 54px hoog, en focus is een turquoise ring van 3px op 1px offset.

Data en telemetrie

Getallen staan in de displayletter met tabelcijfers, zodat een kolom van boven naar beneden vergelijkt in plaats van te verspringen. Elk berekend signaal draagt zijn betrouwbaarheid mee, en een signaal dat op weinig data draait, zegt dat, in plaats van een plausibel getal te produceren. Dat laatste is het enige onderdeel van dit systeem dat geen enkel ander merk heeft.

Beweging

Eén easingcurve en twee looptijden. Scrollgestuurde beweging schrijft per frame één custom property naar een stage-element en laat CSS de rest doen, nooit een listener per item. De handtekeningen zijn de kaartenstapel die omhoog de band in rijdt, de trap die stap voor stap verschijnt en dan naar links vertrekt, en de waaier die opengaat op een scrollfractie.

Fotografie

Echte trail en echt weer, nooit atletische stockbeelden. Hero-beeld drukt af in één blauw: de foto levert de luminantie en --ws-duo levert de kleurtoon, zodat een mistig bos en een atletiekbaan in dezelfde wereld terechtkomen. Overal elders houdt bewijsbeeld zijn eigen kleur, want een grafiek van je eigen data hoor je niet te stylen.

Stem

Deskundig en gewoon in taal. Directe tweede persoon, korte zinnen afgewisseld met langere, concreet boven abstract. We leggen de redenering achter elke beslissing uit en we noemen de grens in plaats van hem te verbergen. Waar we iets niet weten, zeggen we dat, want een signaal dat je stilletjes bent gaan wantrouwen verandert niets aan wat je doet op de dag dat het ertoe doet.

Wel en niet

Downloads

Het systeem als een pagina die je kunt lezen, een stylesheet die je kunt koppelen, en de tokens als data. Het merkboek is de referentie; de stylesheet is wat een interne tool zou moeten gebruiken in plaats van hier iets van opnieuw te bouwen.