Styleguide
Support in layout and corporate identity, for a uniform, professional look and feel
Because we value individuality, we ask that the following formatting standards be respected as much as possible:
- Download Logo VanRoey (vector)
- Download Logo VanRoey White (vector)
- Download Icon (vector) colour / White
Colours
In our communication we use only a limited number of colours. Please do not deviate from this. You can vary by adjusting the transparency.
VanRoey blue: #287ABE (Pantone 285C)
VanRoey support colour:
#47687f
Call to action green: #47D7AD
Soft background: blue: #F0F6FA
Text and "dark" titles: #384349
Images can also be covered with the VanRoey blue on 33% opacity If these are a bit too crowded, too bright or colourful... An easy method to make the image fit better with the rest of the design.
Fonts
General tips:
- Always try VanRoey write
- Use enough lineheight and space between paragraphs.
- Make sure that bold and are normally sufficiently distinct from each other
- Make sure that the physical length of sentences is never too long
(i.e. go quickly enough to the next line) - Don't turn it into a coloring book
- We also try so much just "Kempus" instead of "the Kempus" to be used, idem with Roeftop
We deliberately use 2 webfonts that are very popular: They load quickly and are very compatible.
Poppins
Titles, buttons, interactive or menu elements...
- Download: https://fonts.google.com/specimen/Poppins
- You can use thin and thick styles.
- Important: Use only in UPPERCASE!
Open Sans
Plain text (paragraphs...<p>...)
- Segoe UI Semilight
- Segoe UI Semibold (for bold text)
- titles: Segoe UI BLACK Uppercase
In the logo, the font "Dense Regular" used.
So you need to install this. Generally, we also use it in document titles. For the rest (normal text), feel free to use Segoe ui Semilight and Segoe ui Semibold
Colours:
Dark green - #535648 | C62 M51 Y67 K35
Light green - #8B9571 | C47 M31 Y62 K5
Grey - #545554 | C64 M56 Y56 K32
Buttons
Try to limit the number of buttons. These should only serve as a 'call to action' (the most important action on the page) and should therefore attract a lot of attention.
- Give them enough space (never stick them together and always make sure the action is clear).
- Rounded corners are allowed (small radius)
- Text
- Font: Poppins 700 Uppercase
- colour either white or #384349
- Shadows are not required as standard, on hover optional
- On hover (nice to have)
- A subtle animation (here 'bob' has been chosen)
- background color light up a little:
- Green: #47D7AD becomes #63E7C0
- Blue: #287ABE becomes #439BE5
- give a soft shadow/glow:
- Properties: vertical 14px, fading 34px; spread out: -4px
- Green: rgba(71, 215, 173, 0.44)
- Blue: rgba(40, 122, 190, 0.29)
If the user has 2 options (e.g. negative: 'cancel' and positive: 'apply'), use example 1 or 2.
If the user only has a negative option you can use option 3, the white button with dark border (2px, #384349).
The corner
If we use oblique lines or angles somewhere we always try to align them with one of the sides of the right square (120° rotated). You can see that this runs parallel to the V of the VanRoey logo.
You can also use this make-up element as we often do on the site or in other marketing materials (you can for example use the logo, incorporate an image... or just use it as some extra leaf filling in a very soft colour such as #F0F6FA)
Formatting elements
- Since the merger with EuroSys, we sometimes use rounded corners. But don't go overboard with it please 🙂
- NEVER drastically change the colour of buttons on hover
- Edges: only #abe287 with 10px thick
- Always enough padding inside an object so that texts do not fall too close to the edges.
- Seldom, if ever, use shade, but when you do:
- very soft, spacious
- Use the same color as the frame or button or just gray if it's a white button or area.
Icons
We usually use glyphs from icon libraries (can be browsed through their website or with %windir%\system32\charmap.exe).
- FontAwesome
- Segoe MDL2 Assets (Built-in in Windows 10)
- Free SVG icons to download at The Noun Project
Images
- Preferably as good quality as possible, but never too heavy (< 300kb for web)
- PNG with transparency: first https://compresspng.com compress
- Icons/logos: preferably: SVG so that it is razor sharp on all screens and in all sizes!
Title ALL CAPS POPPINS
Striking frame with example paragraph. Note the padding around the text Left bold and/or underline. Also note the corners. We also use rounded corners (10 or 15px radius) since the acquisition of EuroSys and the renewal of the loho.
Use enough space between sentences and paragraphs so that everything is light and readable.
TITLE ALL CAPS POPPINS
With the right contract, our support service is always available. Outside office hours, in the weekend, on public holidays. More information about this can be found at our Left in bold, VanRoey Blue, …
