outdooronly-header

Brand Guidelines OutdoorOnly

Welkom bij de visuele identiteit van OutdoorOnly. Gebruik onderstaande richtlijnen om de consistentie en kwaliteit van ons platform te waarborgen.

Het logo is ons belangrijkste herkenningsteken. Gebruik altijd de originele bestanden en pas de verhoudingen niet aan.

  • Primair: Donkergroene berg met ‘OutdoorOnly’ tekst.
  • Contrast: Op donkere secties (zoals de footer) gebruiken we de witte variant van de letters.
  • Safe Zone: Houd altijd een marge aan rondom het logo ter grootte van de letter ‘O’ uit het logo.
Logo OutdoorOnly

2. Kleurenpalet (Web Colors)

Gebruik onderstaande HEX-codes voor alle digitale uitingen.

KleurHEXRGBFunctie
Deep Forest#162C12(22, 44, 18)Tekst & Logo: De standaard kleur voor alle tekst.
Adventure Orange#E06720(224, 103, 32)CTA: Voor buttons en ‘Call to Actions’.
Moss Green#ADC957(173, 201, 87)Accent: Voor iconen, badges en actieve menu-items.
Sky Blue#BCD7EA(188, 215, 234)Contrast: Voor dividers en secundaire achtergronden.
Off-White#E9E9E1(233, 233, 225)Background: De standaard achtergrondkleur van de site.
kleuren outdooronly
Voor alle kleuren en ondersteunende kleuren kijk op coolors

3. Typografie (Webfonts)

Onze typografie is geselecteerd op leesbaarheid en een stoer karakter.

Koppen (Headings)

  • Font: Komu B
  • Gebruik: H1 en H2.
  • Styling: text-transform: uppercase; (Altijd in hoofdletters).
  • Letter spacing: 0.05em.

Subkoppen & Body

  • Font: Amifer (Regular & Medium)
  • Gebruik: H3 t/m H6 en alle lopende tekst.
  • Body grootte: 16px of 18px voor optimale leesbaarheid op mobiel.
  • Regelafstand: 1.6 (Line-height).

4. Tone of Voice & Copy

Hoe we communiceren met de OutdoorOnly community:

  • Aanspreekvorm: We gebruiken je/jij. We zijn een community van gelijken.
  • Activerend: Gebruik gebiedende wijs voor acties: “Ontdek de route”, “Bestel je gear”, “Ga naar buiten”.
  • Toegankelijkheid: Geen moeilijke termen. We maken het buitenleven bereikbaar voor iedereen.

5. Knoppen & Interactie (CSS-richtlijnen)

Hover-state: Bij een hover op een button kleurt deze 10% donkerder of lichter voor interactieve feedback.

Primary Button: Achtergrond #E06720, tekst wit, geen ronde hoeken (of een zeer kleine radius van 2px) voor een robuuste look.