Look-and-feel
Van advertentie tot abri; elke uiting wordt een Zelf zorgen, samen doen-uiting door onze huisstijl. De huisstijl is een verzameling van richtlijnen en kaders die houvast geven bij de opmaak van de verschillende middelen. Wat die richtlijnen precies zijn, lees je hieronder.
01
Logo
{ copied = true; setTimeout(() => { copied = false }, 1000) })">
gekopieerd
Toepassing van het logo
Om het logo optimaal tot z’n recht te laten komen, passen we het consistent toe. We hanteren de volgende richtlijnen op alle varianten van het logo. Het Zelf zorgen, samen doen-logo met het witte woordmerk passen we bij voorkeur altijd toe op de aubergine achtergrondkleur. Wanneer het logo op een witte achtergrond geplaatst wordt, hanteren we de aubergine kleur voor het woordmerk van het logo.
Marge rondom het logo
Rondom het logo houden we altijd een marge aan waar binnen geen grafische of tekstuele elementen geplaatst worden. Hiervoor nemen de 'O' uit 'doen' als richtlijn voor de minimale afstand tot het logo.
Dit doen we wel… en niet
Do’s
- Gebruik het Zelf zorgen, samen doen-logo met wit woordmerk op een auberginekleurige achtergrond voor een krachtige, herkenbare uitstraling.
- Het diapositieve logo kan ook geplaatst worden op een lichtgekleurde ondergrond, zolang er voldoende contrast is.
- Wanneer je werkt met een donkere fotografische achtergrond, gebruik dan eveneens het logo met wit woordmerk om de leesbaarheid te behouden.
- Op een lichte fotografische ondergrond mag het logo met auberginekleurig woordmerk worden toegepast, mits het voldoende opvalt.
Don'ts
- Kantel het ZZSD-logo niet en trek het nooit uit verhouding.
- Vermijd het gebruik van het logo met wit woordmerk op een te lichte achtergrond, omdat dit de leesbaarheid vermindert.
- Gebruik geen roze achtergronden, aangezien de roze vorm van het huisje dan wegvalt.
- Behoud altijd voldoende marge rondom het logo, zodat het goed tot zijn recht komt en niet in het gedrang komt met andere elementen.
02
Lettertypes
{ copied = true; setTimeout(() => { copied = false }, 1000) })">
gekopieerd
Bebas Neue Regular | Voor headers uitgevoerd in kapitalen
Bebas Neue Regular gebruiken we in headers. Dit font wordt altijd in het wit toegepast op een roze vlak. Bebas Neue Regular is zowel een Adobe-font als een Google-font en kan dus gebruikt worden met een Adobe-licentie of gedownload worden via Google. De headers kunnen gecentreerd of links uitgelijnd worden. Onderaan de header plaatsen we altijd een roze driehoek aan het achtergrond vlak, wat het gevoel van een spraakwolk geeft.
Campton Book • Medium • Bold | Voor tussenkoppen en bodycopy
Campton passen we toe in tussenkoppen en voor bodycopy. Wanneer we de bodycopy over fotografie plaatsen maken we gebruik van de Medium-dikte. Op een witte of aubergine achtergrond maken we gebruik van de Book-dikte. Op een witte of lichte achtergrond passen we de tekst altijd in de aubergine kleur toe. Op een aubergine kleur achtergrond passen we de tekst in het wit toe.
03
Kleurgebruik
{ copied = true; setTimeout(() => { copied = false }, 1000) })">
gekopieerd
Kleurwaarden
Welke kleuren gebruiken we wanneer? In onderstaand overzicht delen we de kleuren met bijbehorende toepassingen.
Aubergine
#6f0d3b
gekopieerd
111,13,59
gekopieerd
Roze
#de5981
gekopieerd
222,89,129
gekopieerd
Wit
#ffffff
gekopieerd
255,255,255
gekopieerd
Oranje (call-to-action)
#ffbb61
gekopieerd
255,187,97
gekopieerd
Pastel roze (steunkleur)
#ec9aa9
gekopieerd
236,154,169
gekopieerd
Licht roze (steunkleur)
#fff2f3
gekopieerd
255,242,243
gekopieerd
Kleurbalans
Wanneer we de kleurbalans visueel maken in een diagram, komen we tot de volgende richtlijnen:
1 | Aubergine: Hanteren we als hoofdkleur op achtergronden
2 | Wit: Hanteren we ook als hoofdkleur voor achtergronden
3 | Roze: Passen we toe als steunkleur in de headers, of andere grafische elementen
4 | Pastel roze Passen we toe als steunkleur voor achtergronden
5 | Licht roze: Passen we toe als steunkleur voor achtergronden
6 | Oranje: Passen we toe als call-to-action kleur op bijv. de website