Call us at 970.744.3340|Login

Updated Brand Colors

New styles will be implemented in July/August. Calendar with implementation dates will be provided. New guidelines will also be moved over to the brand guidelines page.

Gray Colors

Outdated grays (marketing/design)


#dddddd

#cccccc

#777777

#414042

#000000

#2d2d2e

Outdated grays (platform)


#f7f7f7

#dfdfdf

#999999

#6161612

#3333330

New grays (marketing/design/platform)


#f7f7fa

#dfdfe5

#99999d

#616165

#33333a

Gray Usage

Website background color is white.

Footer background color is #33333a

Footer text is #ffffff and #dfdfe5

All website copy is #616165, unless specific headers have a hue already associated with them (the green headers will stay green, etc.)

Divider lines on website will utilize the “new divider” widget, or hard coded. All divider lines on website will be 1px solid #dfdfe5. White dividers may be used in special cases (such as on dark backgrounds to support white copy). All divider lines will have 60px space above and below.

Bordered Content

Divs/boxes with borders will have a 1px solid #dfdfe5 border. To make borders pop against white background, a subtle box shadow “box-shadow: 0 1px 4px rgba(223,223,229,.6)” can be added. Examples of this can be found on the webinars page, and the blog.

Branded Colors

Outdated colors (marketing/design)


#7cad42

#4b8a99

#ff694a

#c82d3b

#ff9523

New colors (marketing/design/platform)


granny smith
#78b332

#007400
#4a9f19
#9ed959
#e8f3da

adriatic sea
#0c7c9c

#083340
#105b72
#1793b8
#cee4ed

papaya
#ff661b

#cf380a
#ed5723
#f5834b
#fcd4c0

baby crimson
#d62737

#8c1825
#b1202e
#e2525f
#f7d8d7

canary
#fdb825

#f68b1e
#fbaa2c
#fec951
#fceabb

Color Usage

Granny Smith & Adriatic Sea are our primary and secondary colors.

Papaya, Baby Crimson & Canary are our tertiary colors.

Primary and secondary colors will be used for all buttons and links on the main website. The blog follows the same structure but individual blog posts are more flexible and may utilize any color, depending on use.

Because of the reduction in button colors, ghost buttons are highly encouraged when two buttons are used next to each other, or when a button is needed more than a link, but isn’t considered a highly important CTA (such as a secondary link). Use ghost buttons only when button is visible from background.

Ghost Button Regular Button

 

Ghost Button Regular Button

*Note: the CSS for these ghost buttons and updated buttons as well as hover effects are not built yet, but will be next week.

Tertiary colors should only be used when an additional color is needed on the site. The exception to this rule is whitepapers, infographics, featured images, and anything else that doesn’t follow defined guidelines.

Never use Canary color family for text.

Each set of colors contains the main base color. This should always take priority before utilizing any of the accent colors. Accent colors should only be used IN ADDITION to the base color, and should never be used alone.

Use best practices, and try not to combine multiple colors on one page. Try playing with sizes and weights before attempting color changes. It is very easy to make an otherwise tech website look like a children’s site.

Vector Icons

Vector icons are used to represent broad concepts such as objects, features, adjectives, and nouns. Vector icons are rarely used to represent emotions. Check library of icons to see if one is created for your concept BEFORE creating a new icon. Make sure any new icons can be used universally and are scalable for usage.

Styles: There are three total vector icon styles that are approved for use on the website—all gray, all colored, or primarily gray with accent colors from one color family. Continue reading to see the specific do’s and don’ts of each.

Do not use #33333a on ANY vector icons. This shade of gray is too harsh for the soft, friendly feel we’d like to convey through our icons.

Strokes: 2px & 1px

2px is primary stroke size while 1px is secondary and should be used for shapes that are smaller in size or have more detail.

#616165 is the primary stroke color. Do not use #33333a as a stroke color.

Rounded corners: An icon may or may not have rounded corners. If rounded corners are necessary, start with .04in. Rounded corners should be no large than .04in UNLESS shape is a circle/oval/anything other than a rectangle.

Concentric corners: Shapes that contain a radius should be strategically resized instead of being scaled down, so rounded corners remain concentric. Use best judgement. See example.

Fill colors: More than 60% of icon should have lighter fills. Dark colors should be reserved for strokes.

#ffffff, #f7f7fa, #99999d are the primary gray fill colors. Do not use #33333a as a fill color.

See examples.

Colored icons: Colored icons should follow the same guidelines. Base color will be used as the primary stroke color, while approved lighter colors will be used for fill. See examples.

Combining colors: Colors and gray may be combined. Gray should take up more than 60% of overall color. Color will be utilized as an accent color. Use colors from same family, do not mix hues. See examples.

General Note: All icons on a single page must have the same style. DO NOT mix different styles of icons on a single page. For example, the Features page will either have all gray icons, all colored icons, OR all gray/colored icons. This is to maintain consistency and structure within individual pages.

Size: Vector icons on the website have 3 class sizes—small, medium, and large. Icons shall NOT be any smaller or larger than the designated sizes. Utilize the class names instead of using inline styles.

Class names:

line-icon–medium (height: 5.625em or roughly 90px high)

line-icon–small (height: 3.75em or roughly 60px high)

line-icon–large (height: 7.5em or roughly 120px high)

If you need a tiny icon, utilize the free icons provided with our theme (font awesome, icomoon, etc.) because those are meant for smaller sizes.

Example: Interior shape has a corner radius that is reduced to .02 in
Example: New "adriatic sea" colors with updated stroke sizes and corner radius of .04 in
Example: Primarily gray icon with fill tones from various color families that clash, and too harsh of a corner-radius(0.2 in).
Example: Primarily gray icon with fill tones from same adriatic sea color family, and corner-radius of .04 in
Example: Primarily gray icon with light fill tones
Example: Colored icon with base color as primary stroke, and accent colors used as fill, with no dark accent color

*Any vector icons for special whitepapers, infographics, or documents that have their own brand styles can be a bit more flexible with colors, sizes, and combinations, but should still feel like a extension of Choozle’s branding.

*Homepage icons will be slightly unique from interior icons to help anchor viewers into our conversion funnel, and bring more excitement to our first impression of our website. These icons SHOULD NOT be used on interior web pages.