Styleguide
Ondersteuning in opmaak en huisstijl, voor een uniforme, professionele uitstraling
Omdat we eigenheid belangrijk vinden, vragen we om volgende opmaakstandaarden zo goed als mogelijk te respecteren:
- Download Logo VanRoey (vector)
- Download Logo VanRoey Wit (vector)
- Download Icoon (vector) kleur / Wit
Kleuren
In onze communicatie gebruiken we maar een beperkt aantal kleuren. Gelieve hier niet van af te wijken. Je kan wel variëren door de doorzichtigheid aan te passen.
VanRoey-blauw: #287ABE (Pantone 285C)
VanRoey steunkleur:
#47687f
Call to action groen: #47D7AD
Zacht achtergrond: blauw: #F0F6FA
Tekst en "donkere" titels: #384349
Beelden kan je ook bedekken met het VanRoey-blauw op 33% opacity als deze wat te druk, te fel of kleurrijk zijn… Een makkelijke methode om het beeld beter bij de rest van het ontwerp te laten passen.
Lettertypes
Algemene tips:
- Probeer altijd VanRoey te schrijven
- Gebruik genoeg lineheight en ruimte tussen paragrafen.
- Zorg dat bold en normaal genoeg van mekaar te onderscheiden zijn
- Zorg ervoor dat de fysieke lengte van zinnen nooit te lang wordt
(m.a.w. ga snel genoeg naar een volgende lijn) - Maak er geen kleurboek van
- We proberen ook zoveel gewoon “Kempus” ipv “de Kempus” te gebruiken, idem met Roeftop
We gebruiken bewust 2 webfonts die zeer populair zijn: Ze laden daarom snel in en zijn zeer compatibel.
Poppins
Titels, buttons, interactieve of menu-elementen…
- Download: https://fonts.google.com/specimen/Poppins
- Je kan dunne en dikke stijlen gebruiken.
- Belangrijk: Uitsluitend in UPPERCASE te gebruiken!
Open Sans
Gewone tekst (paragrafen…<p>…)
- Segoe UI Semilight
- Segoe UI Semibold (voor vette tekst)
- titels: Segoe UI BLACK Uppercase
In het logo wordt het lettertype “Dense Regular” gebruikt.
Dit dien je dus te installeren. Over het algemeen gebruiken we dit ook in titeltjes van de documenten. Voor de rest (gewone tekst) gebruik je gerust Segoe ui Semilight en Segoe ui Semibold
Kleuren:
Donkergroen – #535648 | C62 M51 Y67 K35
Lichtgroen – #8B9571 | C47 M31 Y62 K5
Grijs – #545554 | C64 M56 Y56 K32
Buttons
Tracht het aantal knoppen te beperken. Deze moeten enkel dienen als ‘call to action’ (de belangrijkste actie op de pagina) en dienen dus veel aandacht naar zich toe te trekken.
- Geef ze genoeg ruimte (plak ze nooit tegen mekaar en zorg altijd dat de actie duidelijk is.)
- afgeronde hoeken mag zeker (kleine radius)
- Tekst
- Font: Poppins 700 Uppercase
- kleur ofwel wit, ofwel #384349
- Schaduwen zijn standaard niet nodig, on hover optioneel
- On hover (nice to have)
- Een subtiele animatie (hier is ‘bob’ gekozen)
- achtergrondkleur klein beetje oplichten:
- Groen: #47D7AD wordt #63E7C0
- Blauw: #287ABE wordt #439BE5
- een zachte shadow/gloed geven:
- Eigenschappen: verticaal 14px, vervagen 34px; uitspreiden: -4px
- Groen: rgba(71, 215, 173, 0.44)
- Blauw: rgba(40, 122, 190, 0.29)
Als de gebruiker 2 opties heeft (bv negatief: ‘cancel’ en positief: ‘apply’), gebruik dan voorbeeld 1 of 2.
Als de gebruiker alleen maar een negatieve optie heeft kan je optie 3 gebruiken, de witte knop met donker randje (2px, #384349)
Het hoekje
Als we ergens schuine lijnen of hoeken gebruiken proberen we deze altijd te aligneren met één van de zijden van het rechtervierkantje (120° gedraaid). Je ziet dat dit evenwijdig loopt met de V van het VanRoey logo.
Je kan dit opmaakelement ook gebruiken zoals we het vaak doen op de site of in ander marketingmateriaal (je kan er bv. het logo inzetten, een afbeelding in verwerken… of het gewoon gebruiken als wat extra bladvulling in een heel zachte kleur zoals #F0F6FA)
Opmaakelementen
- Sinds de fusie met EuroSys gebruiken we wel eens afgeronde hoeken. Maar niet mee overdrijven aub 🙂
- NOOIT knoppen drastisch van kleur veranderen on hover
- Randen: enkel #abe287 met 10px dik
- Altijd genoeg padding binnenin een object zodat teksten niet te dicht tegen de randen vallen.
- Gebruik zelden of nooit schaduw, maar àls je het doet:
- heel zacht, ruim
- Gebruik dezelfde kleur als het kader of de knop of gewoon grijs als het een witte knop of vlak betreft
Iconen
We gebruiken meestal glyphs uit icoonbibliotheken (kan je doorbladeren via hun website of met %windir%\system32\charmap.exe)
- FontAwesome
- Segoe MDL2 Assets (Ingebouwd in Windows 10)
- Gratis SVG icons te downloaden bij The Noun Project
Afbeeldingen
- Liefst zo goed mogelijk qua kwaliteit, maar nooit te zwaar (< 300kb voor web)
- PNG met transparantie: eerst even door https://compresspng.com laten comprimeren
- Iconen/logo’s: bij voorkeur: SVG zodat het op alle schermen en in alle groottes haarscherp is!
Titel ALL CAPS POPPINS
Opvallend kadertje met voorbeeldparagraafje. Let op de padding rondom de tekst Links bold en/of onderlijnen. Let ook op de hoekjes. We gebruiken sinds de overname van EuroSys en de vernieuwing van het loho ook afgeronde hoekjes (10 of 15px radius).
Gebruik voldoende ruimte tussen zinnen en paragrafen zodat alles luchtig en leesbaar is.
TITEL ALL CAPS POPPINS
Met het juiste contract is onze Support dienst àltijd beschikbaar. Buiten kantooruren, in het weekend, op feestdagen. Meer informatie hieromtrent kan je vinden op onze Links in bold, VanRoey Blauw, …
