Teamio design manual
Design manual
Visual style
The Teamio design reflects what we are… Round and pink?
Not quite.
Teamio isn’t a square and grey sheet-based system. Nor is it an app made for teenagers, full of bright colours, either. We’re friendly, we like to help and we like to look good (and not just for the girls). That’s why we’ve chosen bold and playful (but not chaotic) colours and elements. The white colour, present on every page, lets users breathe, so the colourful little things can stand out even better.
Primary logo
We use the primary variant of the logo anywhere and everywhere we can, as long as there’s a way to use it.
The minimum width of the logo is 16 mm / 45 px
Clear space
Teamio doesn’t really feel good when other letters get too close. Make sure to give it enough space to breathe.
Pictogram
Permitted and prohibited ways of using the logo
✔
✖
✖
✖
✖
✖
✖
✖
✖
Colours and their logic
Our primary colours are pink, blue and lots of white. We also use purple, mainly for texts, and it also appears as a main colour on the Teamio menu, so that the logo stands out.
Teamio Blue
- RGB: 0/150/238
- CMYK: 73/33/0/0
- PANTONE: 2194 C
- HEX: 0096ee
Teamio Pink
- RGB: 230/31/96
- CMYK: 4/98/45/0
- PANTONE: 2040 C
- HEX: e61f60
Teamio Dark
- RGB: 52/46/64
- CMYK: 76/76/49/50
- PANTONE: 439 C
- HEX: 342e40
Use of fonts
Primary font – VAG Rundschrift D
Ag
ABCDEFGH abcdefgh
VAG Rundschrift D
Regular
Ag
ABCDEFGH abcdefgh
VAG Rundschrift D
Regular Italic
Secondary font – Open Sans
Ag
ABCDEFGH abcdefgh
Open Sans
Light
Ag
ABCDEFGH abcdefgh
Open Sans
Light Italic
Ag
ABCDEFGH abcdefgh
Open Sans
Regular
Ag
ABCDEFGH abcdefgh
Open Sans
Regular Italic
Ag
ABCDEFGH abcdefgh
Open Sans
Bold
Ag
ABCDEFGH abcdefgh
Open Sans
Bold Italic
Examples of visual elements
Photos and visuals
“That woman is too… pretty, old, young, ugly, manly…” put in whatever you want. We want to avoid all that. We realize that photo banks are full of dull-looking blondes in perfectly-fitting outfits. Not that we have anything against them, but our users probably cannot really relate to them that much.
So we treat the photos we use very carefully. Visuals that reflect the typical working day of an HR manager (diary, crumpled papers, coffee mug on a table, tons of items on a to-do list…) are a central part of the Teamio brand. From time to time we also use pictures of hands or a slightly more dramatic picture, like a manager with dozens of post-it notes stuck to him.
If we feature, for example, an interview with a real-life person, we like to show it in all its glory. Ideally in their natural work environment (even if that means that they are plastered in post-it notes).
Visual style
Check out how Teamio presents itself on other materials and let it inspire you.
Have a coffee and get some inspiration
Download
Anyone can download Teamio logos. If you want to use them, please go through the usage rules first.
