COLOR PALETTE
Color palette.
Excluding the primary Zephyr Blue (#0578BF), The Zephyr color palette is inspired by colors found in nature and geared toward having a neutral look and calming effect. The color palette is designed to allow various imagery to stand out from the underlying medium, (print / web).
For the web, an off-black (#181816) is used as the main color for backgrounds. Text headers are white, off white (#FBFBFB) and a tarnished gold (#C8A88B) . The other colors fill in for further needs in the design and should be used only on rare occasions when additional colors are necessary to achieve a design objective.
A range of grays provides shades to support the main content. The grays are used to soften text. The lightest gray is used as a soft background color that text copy can be displayed on and serves to separate information without upstaging the main content. The grays should also be used in call-out / text boxes.
Primary Logo Blue
HEX 0578BF
CMYK 73 | 28 | 0 | 25
RGB 5 | 120 | 121
Pantone 7461 C
Primary Text Highlight
HEX C8AB8B
CMYK 0 | 11 | 24 | 22
RGB 200 | 171 | 139
Pantone 4249 C
Primary Text Color
HEX FFFFFF
CMYK 0 | 0 | 0 | 0
RGB 255 | 255 | 255
Pantone —-
Primary Background Color
HEX 181816
CMYK 0 | 0 | 1 | 1
RGB 24 | 24 | 22
Pantone 4249 C
Secondary Blue
HEX 8BA8C8
CMYK 24 | 13 | 0 | 22
RGB 139 | 168 | 200
Pantone 4149 C
Secondary Text Highlight
HEX D5B698
CMYK 0 | 12 | 24 | 18
RGB 213 | 182 | 152
Pantone 7590 C
Secondary Text Color
HEX FBFBFB
CMYK 0 | 0 | 0 | 2
RGB 251 | 251 | 251
Pantone —-
Secondary Background Color
HEX 5B4B3A
CMYK 0 | 6 | 13 | 64
RGB 91 | 75 | 58
Pantone 7519 C
Secondary Blue / Gray
HEX 3A4A5B
CMYK 13 | 7 | 0 | 64
RGB 58 | 74 | 91
Pantone 2379 C
Secondary Dark Gray
HEX A7A7A5
CMYK 0 | 0 | 1 | 35
RGB 167 | 167 | 165
Pantone Cool Gray 5 C
Secondary Medium Gray
HEX C9C9C7
CMYK 0 | 0 | 1 | 21
RGB 201 | 201 | 199
Pantone Cool Gray 3 C
Secondary Light Gray
HEX EAEAE8
CMYK 0 | 0 | 1 | 18
RGB 234 | 234 | 232
Pantone Cool Gray 2 C
FONT DISPLAY
Font size information.
All H tags can be modified with Display size modifiers.
<H1 class = “display-1”> will cause the H1 tag to gain size. An example is the About Us on the top of that page.
Alternately, the Display[1-4] class modifier can be used with the standard paragraph text, to adjust the font size without the H tags.
Below is a list of text/font display options.
Example of Paragraph with added class modifier Special
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of H1
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of H2
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of H3
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of H4
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of H5
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of H6
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of Paragraph
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of Preformatted
This is a test of the font size display text. Remember - All fonts are good fonts, even if you hate them.
Example of Blockquote
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of Smalltext
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of Lead
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of LG-Lead
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of Display 4
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of Display 3
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of Display 2
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.
Example of Display 1
This is a test of the font size display text. Remember – All fonts are good fonts, even if you hate them.