What Is A Styleguide
A style guide is a critical document outlining a set of standards, which helps ensure a cohesive brand experience across all channels. The Styleguide containes the essential information needed when crafting communication for your organization. Following is a list of styles that define our brand.
Colors
When used strategically, color is a powerful tool for communicating a brand's message and creating brand recognition. The colors below represent the sites theme and functionality.
Deep Teal
#012E40
Ocean
#024959
Medium Teal
#026773
Lite Teal
#3CA6A6
Day Sand
#F2E3D5
Yellow Ocher
#F2B13F
Burnt Umber
#BF5100
Ocean Froth
#377F9A
Mustard
#B3822E
Cool Gray
#4C5769
Usage
Color samples - Use for overall theme cohesion, headings and backgrounds for page elements.
Color samples - Use for fonts, alerts, buttons, lists and icons.
Links
Link styles are contrasting and bright and do not solely reply on color to determine their use.
Link Styles Light
- a:link
- a:visited
- a:hover
- a:focus
- a:active
Color Name
- Froth
- Burnt Umber
- Lite Teal
- Froth
- Medium Teal
Decoration
- none
- none
- underlined
- dotted outline
- none
Link Styles dark
- a:link
- a:visited
- a:hover
- a:focus
- a:active
Color Name
- Froth
- Burnt Umber
- Lite Teal
- Froth
- Medium Teal
Usage
Example: Sarah wants to sign up for Codecademy to learn a new skill.
Typography
This theme utilizes two fonts (Arvo in three styles) and various weights.
- font-family: 'Arvo', serif;
- font-family: 'Lato', sans-serif;
ARVO
serif
Regular 400
Regular Italic
Bold
LATO
sans-serif
Thin 100
Light 300
Regular 400
Bold 700
Heading and Paragraph Styles
Our design features larger heading styles that command attention. Our paragraph styles are done in a complimentary sans-serif font for maximum readibility. The blockquote is styled to preset with commas wrapped around the quote.
This is an H1 Heading.
This is an H2 Heading.
This is an H3 Heading.
This is an H4 Heading.
This is an H5 Heading.
This is an H6 Heading.
This is a paragraph.
This is a blockquote
Icons
Icons are a nice visual element that can provide clues to the user about functionality, providing a better user experiance.
Visit Google Fonts for instructions and to choose icons to fit your design.
Code Example:
<span class="material-symbols-outlined">
star
</span>
Sample:
- home
- account_circle
- check_circle
- thumb_up
- grade
- bookmark
- backup
- thumb_down_off_alt
- arrow_outward
- menu
Images
Image classes:
- .thumbnail
- .thumb-sm
- .thumb-lg
