Home › Stijlgids

Stijlgids

Zo ziet
Safari.nl eruit.

Eén logo in vier uitvoeringen, twee lettertypes, één palet met duidelijke rollen en een handvol bewegingen. Alles op deze pagina komt rechtstreeks uit de tokens van de site: verander een token en deze pagina verandert mee.

Logo.

Standaard

Op cream, sand en wit

Op donker

Op plum en donkere foto’s

Eén kleur, licht

Op oranje en drukwerk in één kleur

Eén kleur, donker

Stempels, borduursels, zwart-wit

Beeldmerk

De S op plum. Favicon, app-icoon, avatar en de sidebar van het portaal. Minimaal 20px.

Spelregels

Minimale breedte 72px op schermen, 20mm op papier.
Vrije ruimte rondom: minstens de hoogte van de S.
De stip is altijd oranje. Alleen in de één-kleur-versies mag hij meekleuren.
Nooit draaien, uitrekken, schaduwen of een andere kleur geven.

Kleur.

Basis

De rust van de pagina. Cream is de paginakleur, sand de banden, wit de kaarten.

#F2F5E3

--cream

Paginakleur

#E7EDD2

--cream-2

Hover, placeholders achter foto’s

#F6E9CF

--sand

Rustige banden, footer

#FFFFFF

--white

Kaarten, invoervelden, menupanelen

Merk

Plum komt uit het logo en is het donkere anker. Oranje is de stip: fel als vlak, dieper als tekst.

#54282E

--plum

Koppen, donkere kaarten, logo

#3D1A1F

--plum-2

Hover van plum

#F95F12

--orange

Alleen vlakken en nummers, nooit lopende tekst

#C2400A

--orange-ink

Alle oranje tekst, tags, knoppen

#A83505

--orange-2

Hover van orange-ink

Energie

Lime is de actiekleur: de primaire knop en één highlight per pagina. Goud alleen als klein cijfer op plum.

#E4FB63

--lime

Primaire knop, highlightpaneel

#D5F43C

--lime-2

Hover van lime

#FFC61E

--gold

Cijfers en links op plum

Tekst

Nooit puur zwart. Ink voor lopende tekst, ink-2 voor alles wat secundair is.

#241E17

--ink

Bodytekst

#5E544A

--ink-2

Secundaire tekst, bijschriften

De regel voor oranje

orange is fel en mag alleen als vlak of als los cijfer. Zodra er tekst op of in staat gebruik je orange-ink: wit op orange-ink haalt 5,2:1 en orange-ink op cream 4,7:1. Wit op fel oranje haalt 3,2:1 en zakt door de WCAG AA-ondergrens.

Wat er veranderd is

Het prototype gebruikte gele en gouden vlakken naast lime en oranje. Die zijn vervallen: lime is nu de enige energiekleur, plum komt uit het logo in plaats van het oude maroon, en goud blijft alleen over als klein cijfer op plum. Zo heeft elke kleur één taak.

Typografie.

Bricolage Grotesque, alles

AaBbCcDdEe 0123456789

Variabel en zelf gehost, met optische grootte. Gewichten in gebruik: 400 body, 600 navigatie, 700 kopjes en knoppen, 800 display. Display-koppen staan in kapitalen met strakke spatiëring.

Caveat, accent

AaBbCcDdEe 0123456789

Alleen 700. Spaarzaam, voor een notitie of sticker die iets persoonlijks zegt. Nooit voor koppen die informatie dragen.

Display XL Zuidelijk Afrika wacht.

Display LG Drie landen.

Display MD Onze favorieten

Kaarttitel Kaarttitel in leesgewicht

Lede Introductietekst onder een kop.

Body Bodytekst, 17px met regelafstand 1,62.

Klein Kleine tekst in kaarten.

Eyebrow Boven een kop

Hand Meer dan wild.

Componenten.

Knoppen

Tags en links

Zuid-AfrikaWildlifeOnze favorietenComing soonMagazine Lees meer Alle verhalen

Vlakken

Plum

Donker anker. Twee keer per pagina.

Orange-ink

Eén accentkaart, bijvoorbeeld groepsreizen.

Lime

Eén highlightpaneel. Verder alleen knoppen.

Sand

Rustige banden en de footer.

White

Kaarten, formulieren en menupanelen.

Foto’s

Namibië

Wildlife

Cultuur

Foto’s zijn warm, scherp en zonder filter. Hoeken van 20px in kaarten, een tag linksonder of linksboven, en altijd een echte alt-tekst. Alle foto’s op de site komen van Unsplash en mogen commercieel gebruikt worden zonder naamsvermelding; we noemen de fotografen toch.

Olifanten in een wildreservaat, Zuid-Afrika — redcharlie
Deadvlei, Sossusvlei, Namibië — Bernd Dittrich
Bloubergstrand, Kaapstad, Zuid-Afrika — Marlin Clark
Onderweg, Namibië — Amar Hussain
Okavangodelta, Botswana — Sheila C
Game drive, Zuid-Afrika — redcharlie
Lodge in de Okavangodelta, Botswana — Colin Watts
Mokorotocht, Okavangodelta, Botswana — Ed Wingate
Madikwe Game Reserve, Zuid-Afrika — Claire Roadley
Boulders Beach, Simon’s Town, Zuid-Afrika — Bernd M. Schell
Okavangodelta, Botswana — Sheila C
Bo-Kaap, Kaapstad, Zuid-Afrika — Kyle Petzer
South Luangwa, Zambia — Dmitrii Zhodzishskii
West Coast National Park, Zuid-Afrika — Amy Harrison
Chobe National Park, Botswana — Ed Wingate
Sossusvlei, Namibië — Andrew Svk
Etosha National Park, Namibië — Bernd Dittrich

Beweging.

Oplichten bij scrollen

Secties en kaarten schuiven 18px omhoog en faden in, met 70 tot 90ms tussen broers en zussen. Wat al in beeld staat beweegt niet.

Foto’s zoomen

Elke foto in een kaart zoomt 5% in bij hover, in een seconde. Nooit sneller.

Knoppen tillen

Knoppen komen 2px omhoog, pijltjes schuiven mee. Kaarten tillen 4px en krijgen een zachte schaduw.

Parallax

De hero, de bestemmingskaarten en de grote foto’s bewegen 6 tot 9 procent tegen de scrolrichting in; de hero zoomt daarbij heel traag in. Stickers staan een paar graden gedraaid en kaarten richten zich op bij hover.

Altijd uit te zetten

Elke beweging respecteert prefers-reduced-motion. Dan staat alles stil en is alles direct zichtbaar.

Eén beweging per element, tussen 200 en 1000 milliseconden, altijd met de ease-brand of ease-out-expo curve. Niets knippert, niets draait rond, niets beweegt zonder dat de bezoeker er zelf aanleiding toe gaf.

Ruimte en afronding.

shell

80rem

maximale contentbreedte

pad

18 – 44px

marge naast de content

section

56 – 106px

ruimte tussen secties

tight

36 – 64px

ruimte tussen secties die bij elkaar horen

edge

berekend

afstand tot de schermrand, voor bleed-l / bleed-r

radius 1.25rem

20px

foto’s in kaarten

radius 1.75rem

28px

panelen en menu

radius 2.125rem

34px

grote kaarten en de hero-foto

Zo zietSafari.nl eruit.