DIGITAL Style Guide & Standards
WEB COLOR PALETTE
Primary CCAC Color Palette
Accent Color Palette
Pantone 187 C CMYK: 23,100, 88,15 RGB: 170, 24, 44 HEX: AA182C
Pantone 540 C CMYK: 100, 80, 38, 37
Pantone 653 C CMYK: 88, 64, 18, 3 RGB: 49, 96, 148 HEX: 316094
RGB: 0, 48, 87 HEX: 003057
Pantone Cool Gray 1 C CMYK: 14, 11, 12, 0 RGB: 217, 216, 214 HEX: D9D8D6
Pantone 110 C CMYK: 16, 31, 100, 0 RGB: 218, 169, 0 HEX: DAA900
Pantone 188 C CMYK: 33, 92, 73, 38 RGB: 121, 36, 47 HEX: 79242F
Pantone Cool Gray 10 C CMYK: 62, 52, 48, 19 RGB: 99, 102, 106 HEX: 63666A
WEB COLOR PALETTE
Our primary color palette is used to represent the CCAC brand. The values listed below are for the web and digital media only.
CCAC RED
CCAC MAROON
COOL GRAY 10
Pantone Cool Gray 10 C RGB: 99, 102, 106 HEX: 63666A
Pantone 187 C RGB: 170, 24, 44 HEX: AA182C
Pantone 188 C RGB: 121, 36, 47 HEX: 79242F
Although a primary brand color, Cool Gray 10 should be used secondary to CCAC Red and CCAC Maroon. Cool Gray is here to provide an alternative to using true black in digital designs.
CCAC Red should be used at the forefront of the website and all digital media. This is the distinguishing color of our brand.
CCAC Maroon plays the role of complementing the CCAC Red. CCAC Maroon should be used to provide balance in all digital designs.
WEB COLOR PALETTE
Our accent color palette is used to compliment the primary color palette. The values listed below are for the web and digital media only.
NAVY BLUE
MEDIUM BLUE
GOLD
COOL GRAY 1
Pantone 540 C RGB: 0, 48, 87 HEX: 003057
Pantone 653 C RGB: 49, 96, 148 HEX: 316094
Pantone 110 C RGB: 218, 169, 0 HEX: DAA900
Pantone Cool Gray 1 C RGB: 217, 216, 214 HEX: D9D8D6
Navy Blue is a direct accent color to CCAC Red and CCAC Maroon. Navy Blue can be used for secondary design elements such as CTA buttons.
Medium Blue is an accent color to Navy Blue. Medium Blue can be used for hover/roll-over effects on secondary design elements or for appropriate background elements.
Gold is considered a tertiary color within the palette. Gold should be used to break up the primary and secondary colors being used in any digital format.
Cool Gray 1 is to be used to break up content sections on the website, for containers and cards, or any other subtle background elements.
TRANSPARENCIES
Transparencies for the main brand colors are to be used for hover effects and animations. Red, Maroon, Navy Blue and the darker of the two Cool Grey colors should follow the transparency scheme of 100, 50, and 30 percent to show variation. Yellow and the lighter Cool Grey do not require transparencies as they are already of a light value.
100%
50%
30%
100%
50%
30%
TRANSPARENCIES
100%
50%
30%
100%
50%
30%
TYPOGRAPHY
Roboto Font Family
Roboto Light ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789 Roboto Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789 Roboto Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789 Roboto Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789
Roboto is the primary sans serif font to be used for any body copy on the website or digital media. Roboto offers four variations that can be used. Roboto Regular is the standard for body copy on the CCAC website.
Roboto Light
Roboto Regular
Roboto Italic
Roboto Bold
TYPOGRAPHY
Roboto Slab Light ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789 Roboto Slab Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789 Roboto Slab Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789
R o b oto S l ab F ont Fa m i ly
Roboto Slab is a secondary font to be used for H1 headers on the web and headers for additional digital media.
Roboto Slab offers three variations that can be used.
R o b oto S l ab Ligh t
R o b oto S l ab Reg ul a r
R o b oto S l ab B ol d
TYPOGRAPHY
Proforma Font Family
Proforma Book
Proforma is a serif font to be used to complement the Roboto sans serif font. Proforma should be used as H2 or H3 headers when appropriate, for quote text, or image captions.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Proforma offers four variations that can be used.
123456789
Proforma Book Italic
Proforma Book
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Proforma Book Italic
abcdefghijklmnopqrstuvwxyz
123456789
Proforma Bold
Proforma Bold Italic
Proforma Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
Proforma Bold Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
HEADING STYLES
HEADING STYLES
HEADING 1
Roboto Slab is to be used for all headings on the website and mobile applications.
HEADING 2
Depending on the element, different sizes and variations in capitalization can be used. H1, H2, and H3 headings should be completely capitalized. These headings are used for main titles within body copy and titles of main pages and sub-pages on the website.
HEADING 3
H4 and H5 should use standard title capitalization, and are to be used for sub-headings within body copy on the website.
Headi n g 4
Headi n g 5
HEADING 6
PHOTOGRAPHY
These are examples of the style of photography that should be used across the board to visually represent CCAC. We are looking for clean, well composed photos. This applies to exterior and interior shots, as well as those with people as subjects.
PHOTOGRAPHY
PHOTOGRAPHY
ICONS
Duotone icons are used as design elements in mobile and web settings. These icons are more pictorial than the Regular icons, and should only be rendered in Yellow and Navy Blue.
Regular icons are used to support information conveyed through text, or to signal that an action can be taken on a page. These icons are more functional than decorative, and should only be rendered in Yellow.
Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page 8 Page 9 Page 10 Page 11 Page 12 Page 13 Page 14Made with FlippingBook - professional solution for displaying marketing and sales documents online