Our brand values
Remember who it's all for
We started out with Magnet.me to do one thing and that was to fix the (graduate) jobs market. That is why we built Magnet.me: for our users. We want to be their true partner in career or hiring. Being a partner, also means that we talk to our users as a partner (we are supportive, considerate and friendly) and send postcards when someone is hired. We even have a name for this: Magnetlove.
Keep on learning
We strive towards educating ourselves, but also our users. We want to educate them on how to become their best professional self to help the advancement of their career. That is why we work together with career coaches for inspiration and advice and share career tips on our social channels.
Be open
We are honest and open about what we do. To each other, but also to our users. We don't cover up stuff and communicate proactively about any issues, like downtime.
Don't be a chicken
We did not start Magnet.me to be just another (boring) job site. We wanted to change the way students and young professionals find a job. And if you want to change things, you have to get out there, try, fail and try again. No guts, no glory. This requires boldness, being remarkable and a touch of intelligent humour when it comes to our brand. An example of that is the jobjoris.nl stunt.
Don't be a chicken also goes for our users. We do not encourage them to find just another job. We challenge them to find a job they love. Get out there and strive for the best.
Own that sh*t
This means that we never say "This is not my problem.". This also means that we pay extreme attention to detail: from our designs to social media post captions. What you will see: slick designs that are aesthetically pleasing. What you will not see: typos.
Our visual philosophy
The base:
A spacious canvas
By purposefully using space as an integral part of our compositions, our user interface and marketing visuals communicate calmness and confidence.
Visual style:
Round and bold
Round and rounded shapes combined with bold typography and clear images create a friendly and accessible appearance.
Interaction:
Subtlety in elements and behaviour
Thin lines and subtle color changes make for a calm experience.
Our brand elements
Magnet.me's brand system is made up of 8 elements: logo, colour, typography, composition, iconography, illustration, tone of voice and motion. Here are highlights of each:
Logo
Our logo is our most important brand asset. Its composition is very simple: The badge on the left with our logotype on the right. Never change the orientation of the 'full logo' (the badge and logotype combined), and never use the logotype as a standalone. You can however use the badge as a standalone. Furthermore, the logo should always contrast with the background.
Application
Here are some common applications of our logo:
Social
Social
Social
App icon
Colour
The Magnet.me brand leans mostly on the colours red and white. Additionally we use a palette of cool grays. The hint of blue in the grays counters the warmer red and helps to keep our appearance fresh.
#ff5c51
#ffffff
#283740
#8293A2
#eef2f5
Gray9
#495a69
Gray8
#657786
Gray7
#8293a2
Gray6
#9cadba
Gray5
#c5d2db
Gray4
#d9e4eb
Gray3
#e6ecf0
Gray2
#eef2f5
Gray1
#f5f8fa
Blue
#1da1f2
Orange
#ffa259
Green
#63c08b
The red spectrum
These four colours can be used as a background colour in our marketing.
#ff8c80
#ff7366
#ff5c51
#e34840
(Red on hover)
#c43d33
Background colours
These four colours can be used as a background colour in our marketing.
#ff5c51
#ffffff
#8293a2
#eef2f5
Colour guidance
✕
Don't use graphite as a background colour.
✕
Don't use grays for headlines. Only red, graphite and (on dark backgrounds) white.
✕
On white or silver, don't use other colours than red for accents.
Colour applications
Here are some common uses of buttons, labels and input fields.
Typography
Our typography is approachable and friendly, with round shapes and a subtle personality. Always using the same font helps in creating a consistent experience for our audience. In both our user interface as our marketing efforts we use the same font: Source Sans Pro.
Source Sans Pro
Regular
Use regular for:
Longer pieces of text
Semibold
Use semibold for:
Buttons, subsection labels, input labels
Bold
Use bold for:
Headlines and emphasis
Pairings
Bold headline goes with regular text.
Bold with regular
Sizes and margins
Typography guidance
✕
Stick to the colour palette.
✕
Do not use all caps.
✕
Don't alter kerning or tracking.
✕
Do not make different levels of hierarchy the same weight.
Composition
Our composition is straightforward and spacious. Often using one solid background colour to set the stage.
Base composition buildup - Text & logo
Here's how we build up our composition.
Solid background
A solid background is the basis for the composition.
Grids and padding
1/100 of the surface is used as padding.
Text and logo
Text and logo are placed within the padded area. 1.5 units from the top, the text starts.
Top left alignment
When aligned top left, the text should start 1x from the left and 1.5x from the top.
Result
This is what it would look like.
Top center alignment
When aligned center left, the text should start 1x from the left and centered in the area that starts 1.5x from the top and 1x from the top of the logo.
Result
This is what it would look like.
Center alignment
When aligned full center, the text should be horizontally center-aligned and vertically centered in the area that starts 1.5x from the top and 1x from the top of the logo.
Result
This is what it would look like.
Composition with illustration
Here's how you should align illustration and text in a visual.
Left aligned
This is an example of a poster with left-aligned illustration and text.
Correct alignment
When left-aligning, make sure to base alignment on the set background scenery.
Wrong alignment
Don't base alignment on the "add-ons", like sparkles, since their weight in the composition is very low.
Center aligned
This is an example of a poster with center-aligned illustration and text.
Correct alignment
When center-aligning, make sure to base alignment on the main subject and the set background scenery.
Wrong alignment
Don't base alignment on the "add-ons", like sparkles, since their weight in the composition is very low.
Product elements
Here are some common uses of buttons, labels and input fields.
Filters
Filters are pill shaped.
Labels
Labels are also pill shaped.
Buttons
Buttons have a border-radius and semi-bold text.
Checkbox buttons
Checkbox buttons have a border-radius and semi-bold text.
Inactive
Borders: Gray5
Text: Gray8
Hover
Borders: Gray8
Text: Gray8
Active
Borders: Red
Text: Red
Input fields
Input fields have a gray2 background and a gray6 border when in focus.
Iconography
Our icons have a round stroke and should be drawn on a 24x24px grid frame, with a 1.5px stroke width for outlines.
Iconography in use
Here's how our icons can be used in both marketing and product. Most of the times (and definitely in marketing uses) they will be accompanied by text.
Icon in marketing
Icon in product
Illustration
Clear line drawings, made with a round tip. The illustrations have a foundation in geometry, but its lines have a clear hint of a human touch. Above all, they should be easy to understand at a glance.
Icon
Badge
Hero
Illustration construction
An illustration is built up like this.
Colour use in illustration
Per background colour, these are the colour palettes for illustrations.
#ff5c51
Main stroke: White
Silhouette: Red darker2
Headline: White
#ffffff
Main stroke: Red
Silhouette: Gray4
Headline: Black or red
#8293a2
Main stroke: White
Silhouette: Gray9
Headline: White
#eef2f5
Main stroke: Red
Silhouette: Gray5
Headline: Black or red