De levende huisstijl van OutdoorOnly. Alles op deze pagina komt rechtstreeks uit het thema: verandert een token, dan verandert deze gids mee.
Ons belangrijkste herkenningsteken. Gebruik altijd het originele bestand en schaal alleen proportioneel.
Houd rondom het logo minimaal de hoogte van de letter "O" vrij. Geen tekst, geen rand, geen beeld binnen die marge.
Elke waarde hieronder is de echte CSS-variabele uit het thema. De contrastcijfers zijn live berekend volgens WCAG 2.1 — klik op een waarde om hem te kopiëren.
De vijf officiële kleuren. Deze liggen vast: pas ze alleen aan in :root, nooit los in een component.
rgb(22, 44, 18)
De standaardkleur voor alle tekst, de footer en de hero-overlay.
rgb(224, 103, 32)
Alléén als accent: streepjes, iconen, randen. Als knopvulling of tekstkleur haalt dit oranje geen AA — gebruik daarvoor --oo-cta en --oo-rust-text.
rgb(173, 201, 87)
Iconen, badges en actieve menu-items. Op moss zetten we forest-tekst, nooit wit.
rgb(188, 215, 234)
Dividers en secundaire secties (.oo-section--sand).
rgb(233, 233, 225)
De standaard paginakleur. Alle contrastmetingen hieronder gaan hiertegen.
Afgeleiden die het merk leesbaar houden. Ze vervangen de merkkleur nooit visueel, ze maken hem toegankelijk op plekken waar de merkkleur zakt onder 4.5:1.
rgb(184, 82, 20)
De vulling van elke primaire knop. Wit erop haalt AA; Adventure Orange zelf niet.
rgb(163, 74, 18)
Eén stap donkerder bij hover en focus.
rgb(163, 74, 18)
Elke oranje letter (eyebrow, hoverlink, label) gebruikt deze variant.
rgb(86, 111, 23)
Moss Green zelf haalt als tekst nergens AA; dit is de leesbare variant.
rgb(32, 64, 27)
Donkere vlakken bínnen een forest-sectie, en de hover van donkere knoppen.
rgb(44, 85, 36)
De standaard linkkleur in lopende tekst.
rgb(79, 90, 73)
Meta, bijschriften, samenvattingen. Bewust donker genoeg voor AA op cream.
rgb(215, 231, 242)
Lichtere sky-tint voor kaders en info-blokken.
Alleen voor het podium in "beste"-roundups (top 3). Nergens anders gebruiken.
rgb(216, 167, 46)
rgb(154, 163, 171)
rgb(177, 119, 63)
Drie families, zelf gehost als variabele woff2 — geen Google Fonts, geen externe DNS. De voorbeelden hieronder renderen in de fonts die deze pagina op dit moment gebruikt.
Koppen (H1 t/m H6)
AaBbCcDdEeFfGgHhIiJjKk 0123456789 & @ € ’ —
De bergen roepen
Getest in de regen
Wat ons opviel na 40 kilometer
Koppen staan in zinsvorm, niet in hoofdletters. Terugvalfont: Arial met metric-override, zodat de regelval bij het inladen niet verspringt.
Lopende tekst, knoppen, labels
AaBbCcDdEeFfGgHhIiJjKk 0123456789 & @ € ’ —
De lead onder een kop mag iets groter: hij vat het artikel samen in één ademtocht.
Lopende tekst staat op 17 px met een regelafstand van 1,7. Dat leest prettig op een telefoon in fel licht, en houdt de regellengte op een leespagina rond de 70 tekens. Getallen, maten en gewichten schrijven we voluit: 430 gram, 20.000 mm waterkolom, 12 kilometer.
Citaten, scores en de merkleuze
AaBbCcDdEeFfGgHhIiJjKk 0123456789 & @ € ’ —
Wie de weg kent, kan hem ook uitleggen.
Spaarzaam gebruiken: één serif-element per scherm is genoeg. Nooit voor lopende tekst.
Geen plaatjes van componenten: dit zijn de echte elementen uit het thema, met dezelfde classes. Hover en focus werken hier dus ook.
Volledig rond (border-radius 999px). Eén primaire knop per scherm; de rest is secundair.
"In het kort" staat bovenaan elke review: het is het blok dat zoekmachines en AI-assistenten als antwoord overnemen.
In het kort
Een lichte driejaargetijden-tent die je in je eentje in vier minuten opzet. Boven de boomgrens merk je de smalle voetprint, maar voor een weekend in de Ardennen is dit met € 250 de beste koop van dit moment.
Dezelfde kaart als op de homepage en in de overzichten — hier gevuld met de nieuwste artikelen.
Wandelroutes
Op OutdoorOnly kun je al lezen over de voorbereidingen om de Tour du Mont Blanc te lopen: het…
Wandelroutes
Je voeten zakken weg in het mulle zand en boven het Rozendaalse Veld hangt een buizerd stil in…
Bestemmingen
Je staat midden in Brabant en zover je kijkt is er zand. Geen strand, geen zee, maar een…
Hoe we schrijven voor de OutdoorOnly-community: als iemand die de route zelf heeft gelopen en eerlijk vertelt wat er tegenviel.
We zijn een community van gelijken die toevallig al een keer nat zijn geregend. Schrijf zoals je op een parkeerplaats bij het startpunt zou praten.
WelNeem je regenjas mee — het waait daar altijd.
NietWij adviseren u een adequate regenbescherming mee te nemen.
Acties in de gebiedende wijs. Een kop mag iets beloven, zolang het artikel het waarmaakt.
WelOntdek de route · Bestel je gear · Ga naar buiten
NietHier kunt u meer informatie over de route vinden
Elk product heeft een nadeel; noem het. Een review zonder minpunten leest als een advertentie en wordt ook zo geciteerd.
WelWaterdicht, maar na drie uur klimmen bakt hij van binnen.
NietDeze jas is simpelweg perfect voor elke omstandigheid.
Geen jargon zonder uitleg. Noem je een term als "hydrostatische kolom", leg hem dan in dezelfde zin uit.
Wel20.000 mm waterkolom — dat is ruim genoeg voor een dag Nederlandse motregen.
NietUitgerust met een 3L membraan met hoge HH-waarde.
Afronding, schaduw en ruimte komen uit dezelfde tokens. Ze bepalen of iets als één familie aanvoelt.
999pxknoppen, chips, badgesSchaduwen zijn groen getint (rgba van forest), nooit neutraal zwart.
Test elke nieuwe component op 380 px en op 1280 px. Grids krijgen minmax(0,1fr), anders blazen lange woorden de kolom op.
De regels die de huisstijl in de praktijk overeind houden.
WelKleur en spacing uit de tokens in :root halen.
NietLosse hexcodes of pixelwaarden in een component zetten.
WelOranje inzetten als accent: streep, icoon, rand, knopvulling via --oo-cta.
NietAdventure Orange als letterkleur op cream gebruiken (2,8:1).
WelElke nieuwe component eerst een oo-class + CSS-sectie geven, dan pas markup.
NietOpmaak in de pagina-inhoud zetten met inline stijlen.
WelTikdoelen minimaal 44 px hoog houden op mobiel.
NietKnoppen kleiner maken om een rij passend te krijgen.
WelBeelden altijd een alt-tekst geven die de foto beschrijft, niet het zoekwoord.
NietTekst in een afbeelding zetten die ook gewoon HTML kan zijn.