Imagine! Style Guide

 

Mission: To create a world of opportunity for all abilities

Values

• Inclusion
• Accessibility
• Opportunity
• Independence
• Community
• Family
• Growth
• Development
• Diversity

Audience/Who We Communicate to and Serve

• People with disabilities ages 0 to 100
• Residents of Boulder and Broomfield counties
• Parents/families with a family member with a disability
• Donors
• Business owners
• Political representatives
• Employees/potential employees
• Board of Directors
• The IDD Provider Community

What makes Imagine! different?

• Been around since 1963
• Recognized locally, state-wide, nationally, and even internationally as an innovative leader in the field of serving people with I/DD

 

Imagine! Logo

Primary Logo

Secondary Logo

Icon

 

Sizing

The logo may not be changed from the standards set in this manual.
The logo icon must stay proportional in size to the rest of the logo.
The logo must not be smaller than 1.5 inches long without the tagline.

 

Placement

The logo should have a margin of clear space on all sides around it equal to the x-height of the logo.

 

Color Versions

Imagine! utilizes two main colors that will mostly be used in a four-color process on a white or neutral background. A grayscale, black, or reversed version may be used when appropriate.

 

Incorrect Usage

 

Imagine! Brand Colors

 

Primary Colors

Heavy use of black and grays for headlines and text. Grays can also be used for backgrounds but are typically a very light gray. Dark gray/black backgrounds should be used sparingly. The Imagine! green is used sparingly across collateral & mainly just used on the logo. The Imagine! blue is typically used for buttons, pops of color & emphasized text. The brand utilizes a lot of white space.

 

Complimentary Colors

A spectrum of colors is used to create contrast. These colors can be used in many marketing materials to help provide a more cheery look and feel. These colors should never be used in the logo but are available to complement the main colors. The few included here are just a suggestion, not a rule. Feel free to use what looks best with the logo for the project.

 

Imagine! Brand Fonts

 

Recommended Accessible Fonts

Please note that all of your designs should be accessible, which would include one of the following fonts. However, feel free to experiment with the heading fonts to align both with your design and ADA recommendations.

• Lato (website default font)
  • Characters: Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 !@#$%^&*()_+-={}|[]\:”;’<>?,./~`
  • Styles: Thin, Light, Regular, Medium, Semibold, Bold, Italic Styles
• Arial
  • Characters: Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 !@#$%^&*()_+-={}|[]\:”;’<>?,./~`
  • Styles: Thin, Light, Regular, Medium, Semibold, Bold, Italic Styles
• Helvetica
  • Characters: Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 !@#$%^&*()_+-={}|[]\:”;’<>?,./~`
  • Styles: Thin, Light, Regular, Medium, Semibold, Bold, Italic Styles
• Verdana
  • Characters: Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 !@#$%^&*()_+-={}|[]\:”;’<>?,./~`
  • Styles: Thin, Light, Regular, Medium, Semibold, Bold, Italic Styles
• Times New Roman (for headings)
  • Characters: Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1234567890 !@#$%^&*()_+-={}|[]\:”;’<>?,./~`
  • Styles: Thin, Light, Regular, Medium, Semibold, Bold, Italic Styles

Requesting Changes to Web Content

If you find an inaccuracy or error on an Imagine! Webpage, please email Fred Hobbs at fhobbs@imaginecolorado.org.

 

 

Colors

Imagine! Website Green

• HTML Color Code: #37BD9E
• RGB: (55, 189, 158)

Imagine! Website Blue

• HTML Color Code: #0590C7
• RGB: (5,144,199)

Imagine! Website Light Gray

• HTML Color Code: #b3b3b3
• RGB: (179,179,179)

Imagine! Website Dark Gray

• HTML Color Code: #555555
• RGB: (85,85,85)

Fonts

A Quick Guide to Awesome Free Fonts for Banners / etc

Lato - body text

The quick brown fox jumps over the lazy dog.
Code: style="font-family:lato,sans-serif;"

Libre Baskerville

The quick brown fox jumps over the lazy dog.
Code: style="font-family:'Libre Baskerville',sans-serif;"

Crimson Text

The quick brown fox jumps over the lazy dog.
Code: style="font-family:'Crimson Text',sans-serif;"

Crimson Text

The quick brown fox jumps over the lazy dog.
Code: style="font-family:'Crimson Text',sans-serif;"

Baloo Bhai

The quick brown fox jumps over the lazy dog.
Code: style="font-family:'Baloo Bhai',sans-serif;"

Cinzel

The quick brown fox jumps over the lazy dog.
Code: style="font-family:Cinzel,sans-serif;"

Buttons

btn-one

A Regular Button Add the following within the "a" tag: class="btn-one"

A Blue Button Add the following within the "a" tag: class="btn-one blue"

A Green Button Add the following within the "a" tag: class="btn-one green"

Images

image-one-third

Add the following within the "img" tag: class="image-one-third"

image-half

Add the following within the "img" tag: class="image-half"

image-two-thirds

Add the following within the "img" tag: class="image-two-thirds"

image-full

Add the following within the "img" tag: class="image-full"

image-centered

Add the following within the "img" tag: class="image-centered"

image-inline image-one-third

Add the following within the "img" tag: class="image-inline image-one-third"

image-block image-half

Add the following within the "img" tag: class="image-block image-half"

image-block image-one-third image-centered

Add the following within the "img" tag: class="image-block image-one-third image-centered"

Videos

vid-control-standard

Add the following within the "img" tag: class="vid-control-standard block"

vid-control

Add the following within the "img" tag: class="vid-control block"

 

Grammar Guidelines

Please refer to ALA Grammar Guidelines for writing.

Rules are subject to interpretation for some outlets, such as social media

Imagine!'s Voice and Tone

Imagine!'s Voice is:

• Encouraging by not demeaning
• Inclusive and accessible
• Optimistic but realistic
• Empathetic
• Educational but not academic
• Goofy but not childish (Social media specific)
• Empowering
• Progressive
• Aspirational

Imagine!'s Tone Based on Subject and Platform:

• Blog posts
  • Enthusiastic, inspirational, curious, educational, casual (story driven)
  • Foundation Blog Posts -> focused more on encouraging donations, honoring donors. (Inspirational and celebratory)
• Social Media (Facebook, Instagram, Twitter)
  • When sharing stories
    • Enthusiastic, inspirational, curious, aspirational, educational, casual and goofy
  • When sharing news about Imagine!
    • Empathic, practical, informative, serious
  • When sharing community updates (political, environmental, anything that might affect services or those in services)
    • Empathic, practical, action focused, gentle, serious
  • When sharing events
    • Encouraging, informative, casual, curious
• Emails
  • To families and people in services
    • Serious, positive, clear, helpful
  • To employees/potential employees
    • General communications/newsletters
      • Fun, casual, personal, informative
    • Company updates
      • Serious, clear, helpful
  • To Donors/Board of Directors
    • Clear, positive, inspirational, informative
  • Communicating with the Press
    • Direct all press communications to Fred Hobbs - fhobbs@imaginecolorado.org
  • Flyers/Event Advertisements
    • Positive, inspirational, clear, to the point

Common Terminology

• Intellectual and/or Developmental Disabilities (I/DD)
• Disability
• Waiver
• Medicaid
• Medicare
• Group Home
• SmartHome
• Early Intervention
• Day Program
• Independent Apartment
• Family Recruited Employee (FRE)
• Reprieve
• Host Home Provider
• Companion Home Provider

Because of the nature of what we do at Imagine!, diversity, equity, accessibility and inclusion are not just something we hope to achieve, but are a major part of our everyday goals.

We regularly examine our own policies, processes, and procedures toward ensuring that they reflect our values and mission of creating a world of opportunity for ALL abilities.

Inclusive Language

• Please refer to this website Inclusive Language Writer Guide
• This is a more specific guide for disability language Disability Language Style Guide
• The following guide gives a more comprehensive outline of accessibility in communications, including design and language UN Disability Inclusive Communication Guide

Inclusive Photos

• Please refer to this website Inclusive Photo Guide

Acronyms to Know

Please note that using acronyms in communications should be avoided as much as possible. If you have to include one of the following acronyms, be sure to spell out the term beforehand.

Click here to download the IDD Common Acronym PDF

In addition, the State of Colorado's Office of Community Living (OCL) has created his Acronym Glossary. Click on the following link to access the glossary. OCL Acronym Glossary