Merk
Marineblauw dat spreekt, één turquoise dat nooit spreekt, en een bleke band om tussendoor adem te halen. Vierkante bedieningselementen tegen ronde containers. Beweging die een richting op gaat in plaats van te versieren. Het argument van het product is dat het zegt wanneer het iets niet weet, dus speelt de interface nooit een zekerheid die ze niet verdiend heeft.
Grondslagen
Op de site staat het merk als woordmerk: Space Grotesk 500 op −0.05em, in inkt, nooit in turquoise. Op geen enkele pagina van het huidige ontwerp staat een icoon.
Vrije ruimte en minimumformaat
De vrije ruimte rondom is gelijk aan de kapitaalhoogte van de T. Onder ongeveer 90px breed is het woordmerk niet meer leesbaar, en dat is de ondergrens voor een lockup in de header.
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.
--ws-ink#15344B12.93:1 · AADisplayletter en donkere vlakken
--ws-teal#03B8A52.5:1 · Nooit tekstHet merk. Alleen vlakken, nooit een woord
--ws-teal-deep#00786C5.38:1 · AADe tekstveilige turquoise
--ws-sky#E2F5FFVlak · inkt 11.53:1De band die secties scheidt
--ws-paper#FFFFFFVlak · inkt 12.93:1Het standaardvlak
--ws-body#00000021.0:1 · AABroodtekst is echt zwart, geen inkt
--ws-duo#1C5F916.78:1 · AAHet blauw waarin elke duotoonfoto wordt afgedrukt
--ws-muted#6A7F8E4.17:1 · Alleen grootSecundaire tekst en astekst
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
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.
Weefsel neemt belasting op, past zich aan, neemt meer belasting op, past zich opnieuw aan. Komt de belasting sneller dan de aanpassing kan bijhouden, dan bezwijkt het weefsel niet ter plekke.
Lees de notitie| Rol | Grootte | Letter | Waar het voorkomt |
|---|---|---|---|
| Mega | clamp(3.6rem,17.6vw,261px) | Display | Alleen afsluitende banden |
| H1 | clamp(2.9rem,8.1vw,120px) | Display | Paginatitels |
| H2 | clamp(2.2rem,4.05vw,60px) | Display | Sectiekoppen, artikeltitels |
| H3 | clamp(1.9rem,3.1vw,46px) | Display | Blokkoppen |
| Lead | clamp(1.1rem,1.82vw,27px) | Broodtekst | Eén alinea onder een titel |
| Broodtekst | clamp(1rem,1.21vw,18px) | Broodtekst | Al het andere |
| Proza | clamp(1.05rem,1.32vw,20px) | Broodtekst | Lange teksten, begrensd op 68ch |
| Label | 16px, hoofdletters | Broodtekst | Navigatie, knoppen, kickers |
De markeerstift
Containers zijn rond, bedieningselementen zijn vierkant, en het contrast daartussen is de look. Maak de bedieningselementen niet zachter en de kaarten niet scherper.
| Radius en ruimte | Waarde |
|---|---|
| Kaarten, dialogen | --ws-radius 32px |
| Toolpanelen | 8px |
| Elk bedieningselement | 0px |
| Contentbreedte | --ws-maxw 1416px |
| Zijmarge | 20px, 32px boven 1024 |
| Header | 104px, 88px onder 1024 |
| Afstanden | 4 8 12 16 24 32 48 64 96 |
| Elevatie en beweging | Waarde |
|---|---|
| Kaart | 0 30px 60px −40px / 45% |
| Lift bij hover | 0 40px 80px −40px / 55% |
| Dialoog | 0 60px 120px −50px / 70% |
| Easing | cubic-bezier(.22,.61,.36,1) |
| Micro | 220ms · hover, focus, kleur |
| Reveal | 800ms · opaciteit en 24px omhoog |
| Focusring | 3px solid, 3px offset |
Componenten
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.
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.
Garmin gekoppeld. Laatste sync 4 minuten geleden.
Polar heeft 6 dagen niet gesynct. Detail ouder dan 28 dagen is niet meer terug te halen zodra dat venster sluit.
We konden Strava niet bereiken. Koppel opnieuw om het importeren te hervatten.
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.
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.
| Training | Type | Afstand | Gem. tempo | Belasting |
|---|---|---|---|---|
| Maandag | Rustig | 8,0 km | 5:38 | 44 |
| Woensdag | Intervallen | 10,2 km | 4:21 | 92 |
| Zaterdag | Lang | 24,0 km | 5:55 | 176 |
Patronen
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.
| Patroon | Timing | Wat het doet |
|---|---|---|
| Reveal bij binnenkomst | 800ms | Opaciteit en 24px omhoog. Nooit doodgestaggerd. |
| De stage vastzetten | gekoppeld aan scroll | Beeld blijft staan terwijl de tekst erdoorheen beweegt |
| Overdracht | gekoppeld aan scroll | De ene passage vertrekt naar links terwijl de volgende van rechts binnenkomt |
| Knopinkeping | 260ms | De snede wordt dieper. Het label beweegt niet. |
| Dialoog | 420ms | Opaciteit en 20px omhoog |
| Beperkte beweging | wordt gerespecteerd | Elke reveal is meteen klaar en er blijft niets verborgen |
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.
Merk
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.
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.
Dertig dagen Trailwise Pro, je geschiedenis geïmporteerd op dag één, en een plan dat zich aanpast aan wat je lichaam echt doet.
Aan de slagGratis tijdens de privébèta. Geen creditcard nodig.
Zo werkt de bèta
We hebben een bevestigingslink gestuurd naar .
Je voorkeuren zijn opgeslagen.
Dit e-mailadres is al geregistreerd. Was het nog niet bevestigd, dan hebben we een nieuwe bevestigingslink gestuurd naar .