EKANN Stijlboek
Een stijlboek is een belangrijk onderdeel van je website maar zeker ook van je branding. Consistentie is belangrijk zodat je merk snel visueel herkenbaar wordt. Hieronder staan alle stijlen die gebruikt worden in het ontwerp van de EKANN website.
Dit zijn de header stijlen die gebruikt worden binnen de EKANN website. Base font size is 16px ( = 1 REM).
Logo – Garbata
3,4 REM – 500 line weight
Logo – Sansation Light 2,3 REM – 100 line weight
Header H1 – Montserrat 1.8 REM – 600 line weight
Header H2 – MONTSERRAT 1.6 REM – 500 line weight
Header H3 – MONTSERRAT 1.4 REM – 400 line weight
Header H4 – MONTSERRAT 1.2 REM – 300 line weight
Header H5 – MONTSERRAT 1.0 REM – 500 line weight
Header H6 – MONTSERRAT 1.0 REM – 200 line weight
Dit zijn de tekst stijlen die gebruikt worden binnen de EKANN website
Paragraaf tekst – Open Sans 1 REM – 400 line weight
Gepreformateerde tekst – Courier Prime 1 REM – 100 line weight
Navigatiebalk – Montserrat 1,1 REM – 300 line weight
Footer Header – Montserrat 0,8 REM – 500 line weight
Footer Item – Open Sans 0,8 REM – 300 line weight
Footer Item Light – Open Sans 0,8 REM – 100 line weight (grey)
Footer Link Klein – Open Sans 0,6 REM – 200 line weight (grey)
Footer Link Midden – Open Sans 0,7 REM – 300 line weight
Dit zijn de hoofd-Kleuren die gebruikt worden binnen de EKANN website
Logo - Geel
Logo - Oranje
Logo - Rood
Logo - Paars
Tekst - Zwart
Tekst - Grijs
Tekst - Wit
Sectie Achtergrond
Achtergrond - Gradient 1
Achtergrond - Gradient 2
Hieronder staan voorbeelden van combinaties.
Over EKANN – H1
In dit voorbeeld zie je de relatie tussen de header en de paragraaf tekst. Paragraaf teksten zijn meestal wat langer van aard en met zinnen die door koppelwoorden aan elkaar gebreid worden. Hierdoor is het van belang dat deze tekst goed leesbaar is, makkelijk op het oog en rekening houdt met accessibility. Kleur contrast, lettertype, punten van het font zijn hier belangrijk in alsmede ook de regelhoogte, letterafstand en woordafstanden.
Over EKANN – H2
In dit voorbeeld zie je de relatie tussen de header en de paragraaf tekst. Paragraaf teksten zijn meestal wat langer van aard en met zinnen die door koppelwoorden aan elkaar gebreid worden. Hierdoor is het van belang dat deze tekst goed leesbaar is, makkelijk op het oog en rekening houdt met accessibility. Kleur contrast, lettertype, punten van het font zijn hier belangrijk in alsmede ook de regelhoogte, letterafstand en woordafstanden.
Over EKANN – H3
In dit voorbeeld zie je de relatie tussen de header en de paragraaf tekst. Paragraaf teksten zijn meestal wat langer van aard en met zinnen die door koppelwoorden aan elkaar gebreid worden. Hierdoor is het van belang dat deze tekst goed leesbaar is, makkelijk op het oog en rekening houdt met accessibility. Kleur contrast, lettertype, punten van het font zijn hier belangrijk in alsmede ook de regelhoogte, letterafstand en woordafstanden.
Over EKANN – H4
In dit voorbeeld zie je de relatie tussen de header en de paragraaf tekst. Paragraaf teksten zijn meestal wat langer van aard en met zinnen die door koppelwoorden aan elkaar gebreid worden. Hierdoor is het van belang dat deze tekst goed leesbaar is, makkelijk op het oog en rekening houdt met accessibility. Kleur contrast, lettertype, punten van het font zijn hier belangrijk in alsmede ook de regelhoogte, letterafstand en woordafstanden.
Over EKANN – H5
In dit voorbeeld zie je de relatie tussen de header en de paragraaf tekst. Paragraaf teksten zijn meestal wat langer van aard en met zinnen die door koppelwoorden aan elkaar gebreid worden. Hierdoor is het van belang dat deze tekst goed leesbaar is, makkelijk op het oog en rekening houdt met accessibility. Kleur contrast, lettertype, punten van het font zijn hier belangrijk in alsmede ook de regelhoogte, letterafstand en woordafstanden.
Over EKANN – H6
In dit voorbeeld zie je de relatie tussen de header en de paragraaf tekst. Paragraaf teksten zijn meestal wat langer van aard en met zinnen die door koppelwoorden aan elkaar gebreid worden. Hierdoor is het van belang dat deze tekst goed leesbaar is, makkelijk op het oog en rekening houdt met accessibility. Kleur contrast, lettertype, punten van het font zijn hier belangrijk in alsmede ook de regelhoogte, letterafstand en woordafstanden.