Color is important as it provides a visual connection to our brand identity across various mediums and applications. Although the following is what is used on all primary copy, graphics, buttons, and marketing materials, it is acceptable to use other colors to enhance the color palette and the material being created. Any other colors used should still fit well within the same color scheme and saturation.
Call us at 970.744.3340
Choozle Design Resources
Color Palette
natural indigo
#083340
canary
#fdb825
granny smith
#78b332
papaya
#ff661b
baby crimson
#d62737
Color Usage
Our colors are an essential element of our brand identity, helping to power our visual presentation. They are used in all colored printing and in all electronic communications.
Natural Indigo #083340 & Canary #fdb825 are our primary and secondary colors.
Granny Smith, Papaya, & Baby Crimson 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.
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.
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.
Gray Color Usage
Website background color is #FFFFFF. 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.)
Typography
Our primary typeface is an essential part of our brand identity; in combination with our logo and color palette, it enhances our brand’s visual recognizability.
Headers should be primarily written in bold or light. Headers may be written in all caps, title case, or sentence case.
Paragraphs should primarily be written in regular weight. Lightweight is only acceptable if the copy is legible and large in size. Paragraphs should never be written in all caps.
Eyebrow headlines are used above main headers to help provide simplified keywords to help users understand what the following information is about. Eyebrow headlines should only be used if headers are long or not descriptive/straight to the point. Eyebrow headlines should be smaller than header.
Example:
What’s Choozle?
Digital Advertising Made Easy®
Choozle provides a digital advertising software platform that leverages detailed consumer data to power programmatic advertising campaigns across display, video, mobile and other mediums—all from a single, intuitive interface.
Website Sizes
| HTML Tag | Font Size | Size in Pixels | Line Height |
|---|---|---|---|
| H1 | 2em | 32px | N/A |
| H2-Headers | 2.25em | 36px | N/A |
| H2 | 1.75em | 28px | N/A |
| H3 | 1.5em | 24px | N/A |
| H4 | 1.25em | 20px | N/A |
| P | 1em | 16px | N/A |
| H5 | 1em BOLD | 16px | N/A |
| H6 | .75em | 12px | N/A |
Graphic Elements
Product screenshots should always correlate with the copy it is supporting, and whether it is feature-specific or just the platform overall.
When using mockups (screenshots within browsers,) a slightly diffused drop-shadow may be used to help elevate the graphic up from the background.
Screenshots should always be high-quality, and never blurry. When taking screenshots of the platform, keep in mind the negative space on the left and right of the white modules, and downsize your browser width to accommodate the extra negative space before taking a screenshot. A screenshot on a 1440px wide browser (15in laptop screen) or smaller is ideal.
Never include real data or information originating from clients.
Always try to use the most up-to-date screenshot of the platform.
Iconography
Vector Icons
Vector icons are used to represent broad concepts such as objects, features, adjectives, and nouns in the Choozle ecosystem. 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. Custom icons are preferred over commonly used stock icons. Icons should be in SVG or PNG format.
Checkmark icons on the website should always be Green (#78B322), unless on a specific campaign landing page.
Use of icons should be specific to the topic they are supporting, to reduce discrepancy. Specific icons are used for specific representations. If you aren’t sure if an icon exists for a specific subject, such as “education”, please ask the Marketing team.
Fill colors: Icons can be one fill color depending on the background. Icons can also have more than one color but not more than two. The acceptable color combinations are #083340 & #fdb825, #083340 & #78b332
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.
*Any vector icons for special documents that have their own brand styles can be a bit more flexible with colors, sizes, and combinations but should still feel like an extension of Choozle’s branding.
Photography
Images used to represent Choozle can be custom graphics and photos that were taken and created internally, or may be stock photography. If stock photos are used, follow photography guidelines to ensure that stock photos still fit with the overall aesthetic
- Capture the moment, use candid photos when possible to show realism.
- If talking about Choozle and/or its products, feature people and/or technology.
- Close-ups of computers, keyboards, electronics, and hands are encouraged.
- Computer screens should feature relevant information such as the Choozle platform.
- Should never include real data or customer data.
- Photographs should not display Choozle employees participating in activities that aren’t considered “workplace appropriate”, so marijuana, cigarettes, nudity and alcohol-related activities should not be heavily featured on branded channel. The only exception would be social-related posts that involve happy hour or other acceptable work events but should be kept at a minimum.
Buttons & Calls to Action
Call to action buttons and links can serve a variety of functions. After all, “call to action” is really a bit vague. All it means is that its main purpose is to get a visitor to your site to do something.
Buttons
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.
Links
Other calls to action on the website will appear in Lato Regular, #78B322, title-case, with a thin arrow appearing after the text. Color may vary if used on other creative, depending on the overall look.
- Green Link Example
Decorative Elements
Favicon
Our favicon IS NOT our logo. Our favicon exists specifically for use as the favorite icon that shows up before the url or inside of a tab in your browser.
Do not attempt to use the favicon as a Choozle logo. Do not use the favicon as a supporting asset in any creative, document, file, or presentation. Do not attempt to resize the favicon. Do not distort, add effects, alter colors, or rotate.
The only exception to the above guidelines is if a logo graphic under 50x50px is required, where the Choozle wordmark would be considered illegible. In such special circumstances, please get permission from Choozle’s Design team and they will provide the proper files.
Divider Lines
Divider lines on the 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 top and bottom margins.
Example:
Drop Shadows
Do not use drop shadows on our icons. If the icons do not stand out from the background, they are being used incorrectly and the style of the icon—along with fills and strokes—should be reconsidered.
Do not use drop shadows on any text. If text is not visible against a background, the background should be altered.
Very subtle and diffused drop shadows may be used on graphics to help separate them from their backgrounds. Please see our CSS box-shadow below that may be added to elements on our website.
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.
Drop shadows may only be dramatized on infographics and social graphics. You can see examples of various types of shadows on such creative, ranging from diffused to hard shadows depending on the overall style of the graphic.
Our team of digital media experts are here to meet you where you are on your digital journey. Whether you’re looking to leverage our self-service platform or managed services, we’re ready to chat about your Display, CTV, Native, Audio, Video, DOOH, Search or Social advertising needs.