The Importance of a Brandbook and Style Guide
Dear Team,
Maintaining a strong and consistent brand identity for Quamed is important. To ensure this consistency is through the use of a brand book and style guide. These tools are not only for designers or marketers; they are essential for every employee, member, and stakeholder who interacts with our brand. Here’s why:
A brand book and style guide provides a clear set of guidelines on how Quamed should be represented across various platforms and materials. It ensures thatQuamed as a brand is consistently presented to our audience, building recognition and trust.
Consistent use of brand elements helps in establishing a strong identity. When our audience sees the same colors, fonts, and styles across different mediums, they begin to associate these elements with Quamed. This recognition can significantly influence decisions and loyalty.
A well-maintained brand book and style guide project professionalism. They show that we are meticulous about how oQuamed is presented, which can enhance our credibility in the eyes of our partners. It demonstrates that we care about our brand’s image and are committed to maintaining high standards.
The brand book and style guide can work as a time saver. You can refer to the guide for clear instructions and even download the logos, and templates for presentations or social media or grab the code for typography. This speeds up your process and minimizes errors and inconsistencies.
Accessibility is key, not only for the Quamed learning platform but for all Quamed’s communication. This involves color contrast in the text, text size, zoom capability, and “alt text” in images to facilitate screen reading.
A brand book and style guide do more than just set rules for external communication; they also help unify internal culture. By having a shared understanding of what Quamed stands for and how it should be represented, we foster a sense of belonging among our employees, members and sponsors. This unity can boost a collective effort towards achieving our goals.
While maintaining consistency is key, our brand book and style guide also allows for adaptability. As our brand evolves, these guides can be updated to reflect new directions while still maintaining core elements. This ensures that our brand can grow and adapt to changing market conditions without losing its identity.
Lastly, a brand book and style guide act as a safeguard against misuse. They provide clear do’s and don’ts, ensuring that all representations of the brand are appropriate and in line with our values and goals. This is crucial for protecting Quamed’s integrity and reputation.
In conclusion, a brand book and style guide are indispensable tools for ensuring the success and longevity of Quamed.
Thank you for being so committed to maintaining the strength and integrity of the Quamed brand.
Best regards,
Mariken
external web designer
Designlab Amsterdam
This style guide will be updated when we work along.
The Quamed website is in the process of enhancement so do not copy the styles from this website but follow the instructions.
Logos
Quamed primary logo
Quamed Quality Certification Programme logo
Quamed Learning logo
Quamed Database logo
Quamed square icon
The small version of the Quamed logo is reserved for use in tiny sizes such as favicons, system tray icons, social signatures, or on menu bars. It is the short-hand identifier for Quamed and is consistent across all platforms.
Download the Quamed icon here
Typography
Menu
Font: Lato, Size – 17px, Weight – 400
Main Content
Font: Lato, Size – 17px, Weight – 400
Headings – H1
Font: Barlow Semi Condensed
Size – 52px
Weight – 400
Fusce vulputate augue sit amet nunc egestas volutpat.
Headings – H2
Font: Barlow Semi Condensed
Size – 42px/28px
Weight – 400
Fusce vulputate augue sit amet nunc egestas volutpat.
Headings – H3
Font: Barlow Semi Condensed
Size – 35px
Weight – 400
Fusce vulputate augue sit amet nunc egestas volutpat.
Headings – H4
Font: Barlow Semi Condensed
Size – 22px
Weight – 400
Fusce vulputate augue sit amet nunc egestas volutpat.
Headings – H5
Font: lato
Size – 17px
Weight – 400
Fusce vulputate augue sit amet nunc egestas volutpat.
Headings – H6
Font: Lato
Size – 15px
Weight – 400
Fusce vulputate augue sit amet nunc egestas volutpat.
body, p{
font-family: “Lato”, sans-serif; font-size:17px; color: #505050; font-weight:400;line-height: 1.6em; letter-spacing: 0.02em;
}
h1{
font-family: “Barlow Semi Condensed”, sans-serif; font-size:52px; color: #505050; font-weight: normal;line-height: 1.2em;letter-spacing: 0.0; text-transform:uppercase;
}
h2{
font-family: “Barlow Semi Condensed”, sans-serif; font-size:42px; color: #505050; font-weight: normal;line-height: 1.2em; letter-spacing: 0.0;
}
h3{
font-family: “Barlow Semi Condensed”, sans-serif; font-size:35px; color: #505050; font-weight: normal;line-height: 1.2em; letter-spacing: 0.0;
}
h4{
font-family: “Barlow Semi Condensed”, sans-serif; font-size:22px; color: #505050; font-weight: normal;line-height: 1.2em; letter-spacing: 0.0; text-transform:uppercase;
}
h5{
font-family: “Lato”, sans-serif; font-size:17px; color: #00B4B5; font-weight: normal;line-height: 1.2em; letter-spacing: 0.0;text-transform:uppercase;
}
h6{
font-family: “Lato”, sans-serif; font-size:15px; color: #505050; font-weight: normal; line-height: 3em; letter-spacing: 0.02em;
}
Colors
links and background colors. Attention: Use Apple Green with moderation
Blue Teal
#009999
Blue Teal light
#9ADADA
Blue Teal ultra light
#E1F3F3
high-light colors
Hoover Teal
#16D4D5
Apple green
#95C11F
Silver Body bg
#E8ECF0
Greys for background headers, footers, and typography
Socket grey
#292929
Quamed
Typo grey, Footer grey
#383838
94% transparency
Header
#696969
Light grey lines
#A5B8C3
White
#FFF
// Text and Background colors
.color-teal {
color: #05A4A5;
}
.color-apple-green {
color: #95C11F;
}
.color-hover-teal {
color: #16D4D5;
}
.color-bleu-teal-light {
color: #9ADADA;
}
.color-bleu-teal-ultra-light{
color: #E1F3F3;
}
.color-silver {
color: #E8ECF0;
}
.color-socket-grey {
color: #292929;
}
.color-footer-grey {
color: #383838;
}
.color-typo-grey {
color: #505050;
}
.color-transparency-header-grey {
color: #696969;
}
.color-light-grey-lines {
color: #A5B8C3;
}
TEAL
#05A4A5
RGB 5, 164, 165
CMYK 97, 1, 0, 35
APPLE GREEN
#95C11F
RGB 149, 193, 31
CMYK 23, 0, 84, 24
HOVER TEAL
#16D4D5
RGB 22, 212, 213
CMYK 90, 0, 0, 16
BLEU TEAL LIGHT
#9ADADA
RGB 154, 218, 218
CMYK 29, 0, 0, 15
BLUE TEAL ULTRA LIGHT
#E1F3F3
RGB 225, 243, 243
CMYK 7, 0, 0, 5
SILVER
#E8ECF0
RGB 232, 236, 240
CMYK 3, 2, 0, 6
SOCKET GREY
#292929
|RGB 41, 41, 41
CMYK 0, 0, 0, 84
FOOTER GREY
#383838
RGB 56, 56, 56
CMYK 0, 0, 0, 78
TYPO GREY
#505050
RGB 80, 80, 80
CMYK 0, 0, 0, 69
TRANSPARENCY HEADER GREY
#696969
RGB 105, 105, 105
CMYK 0, 0, 0, 59
LIGHT GREY LINES
#A5B8C3
RGB 165, 184, 195
CMYK 15, 6, 0, 24
Buttons
This could be H6, help text to convince you to push a button and move on
This could be H6 white!!! text to assist with the next step
This could be H6 text to assist with the next step
This could grey!! H6 text to assist with the next step
Icons
Social icons
color #FFF; when on a dark background
color #363636; when on a white or light background
font-size:25px;
no border, no shadow, no decoration
Indicative icons
Font Awesome, font-size 35px maximum
color:Apple green, #95C11F on white or light background
color: #ffff on dark back ground
Page layout
Layout preferable two columns 50 /50, left image and on the right text, description of the program. Just like product pages of online shops.
Smooth transitions between pages, a clear, visual hierarchy of the elements, √ search box is in the header, We should also consider the placement of any ‘calls to action’, such as newsletter sign-up, and special services.
Forms
coming soon
