Design Standards

The CHOC logo is the basis for our naming system and the most recognizable element of our brand identity. The principal logo is comprised of the circle bear symbol and the CHOC wordmark. Choose the configuration and approved color that best fits your application. 

Use the Blue Logo in the upper right corner of most web applications. Limit the size to 144 px width x 39 px height. The circle bear symbol can be used alone in mobile view. 

Our mantra is the vital declaration of our purpose, powerfully communicating the all-encompassing, emotional aspect of our mission. To preserve its significance, the Long Live Childhood wordmark should be used sparingly and strategically in prominent locations for corporate brand communications. 

To maintain consistency across our extensive CHOC communications, our color palette is deliberately limited.  

PRIMARY COLORS: CHOC Blue (#0064A4) and Gray (#767679) 

The combination of blue and gray provides a sense of credibility, professionalism, and calm. Design with a strong use of white space for a sophisticated, modern impression.  

ACCENT COLORS: CHOC Lavendar (#B981B9), Green (#88C65B), Yellow (#FFCF31) and Black (#231F20) 

These colors help imbue our brand with a child’s energy and joy. They should be used sparingly and never overpower the primary colors. 

For legibility and accessibility, certain additional colors should be used in digital applications and across CHOC web properties.

For light blue backgrounds use #e5eff5

For light grey backgrounds use #f5f5f5

For buttons and important CTAs, use #cf4a03

For the primary color, use #0064a4

These approved colors and more can be found in the block color picker.

Gotham is the primary font collection for the CHOC brand. It was chosen for its legibility, clean design and its compatibility with the CHOC logo. If Gotham is not available, Arial is the font of choice for most web applications. See the style guide for specific usage examples.

Use this library of icons to help bring some visual interest to your CHOC communications. Make sure to select the icon that works best in conjunction with the messaging. 

As CHOC’s ambassador, our mascot Choco is a valued asset for the brand and must be protected with thoughtful, consistent usage. There are a limited number of approved poses that are reserved for special use cases and should be limited in web applications. Refer to the style guide for specific guidelines around the use of Choco.  

The Choco “wallpaper” pattern, available in our brand colors, can be used as a background element in web applications. Care should be taken to avoid accessibility issues when overlaying text on these backgrounds. See the Accessibility section for more information. 

Accent dots bring energy and joy to the pattern. Move them around to better fit your layout. Additional accent dots can be used if needed. They are meant to be supporting elements and should never overpower the overall pattern. 

There are three general purpose options to consider when developing a new hero. To determine the appropriate option, consider the subject matter of the page and if the user would benefit from one or more calls to action before scrolling into deeper content.

Long Live Childhood

The ‘Long Live Childhood’ tagline is always bottom right aligned and contains a subtle shadow to improve legibility over the image.

*Note: It is not required to include the tagline on every web hero, as there may be instances where this language feels off-tone when paired with more sensitive or serious material. The tagline should only be used when it can bolster the message and positively reflect the CHOC brand.

Branded Photography

Use branded photography for pages that are more general or broad in subject matter. Choose images that portray mostly children but sometimes parents and families, caregivers, or other dedicated participants in emotional, relatable moments that capture the magic of childhood. Images should convey diversity, innocence, fortitude, joy, and ultimately, hope.

Context Specific Photography

Use this type of photography for pages that are more specific in subject matter or based around a unifying theme. When selecting these images, ensure they are authentic and relatable – capturing moments from childhood, parenting and caregiving. Images should convey emotion, diversity, innocence, and trust.

Research & Clinical Photography

Pages that contain research or clinical-based content require specific imagery from this category. Ensure that the environments are clean, modern and uncluttered. The subjects should display confidence, diversity and trust. Research spaces should feel light, open and collaborative when possible. Avoid images that feel dark and overly cramped.

Image Tinting / Overlays

All photos require tinting prior to export. We recommend applying a black (#000000) tint of 30–50% in order to provide adequate contrast against the hero type (see Accessibility Standards about contrast ratios). The amount of tint will depend on the lightness/darkness of the original image.

Pattern Hero Banner Backgrounds

If appropriate, the CHOC brand patterns can be used for banners.

Hero Size Specifications

• Full page takeover:
• Large Hero:
• Small Hero:

Maximum Hero Image File Size

Large Hero Banner images must be compressed as much as possible while maintaining adequate image quality. Too large images will make a webpage too slow to load, especially on mobile devices, and will impact our SEO. (See the image guide.) Typically, image sizes should be less than 1M for desktop and less than half of that size for mobile.

Single Buttons

Use the orange high-priority button style for the most important CTA on the page. Every page should have one or two high-priority buttons, but no more. For additional CTAs, use the medium-priority blue button style. The low-priority button style is mainly used for sections that have multiple columns with buttons.

Side by Side Buttons

When using buttons side-by-side in the same row, all the buttons should be the same color. The primary CTA button in a row should be a solid color and the secondary CTA button should use the outline style if you need to call more attention to one button.

FAQs utilize the Accordion Block in the Genesis Framework.

Home page description / sample.

Landing page description / sample.

Main section page description / sample.

Secondary page description / sample.

Event page description / sample.

Video page description / sample.

Physician profile page description / sample.

Approved brand images are available in the Merlin X digital asset management system.

Our images should capture the visceral and emotional moments we remember from our own childhoods, prompting viewers to experience nostalgia and pulling them back into their own memories. The scenes we depict should feel real, spontaneous and “unposed.” 

Create vignettes that portray our heroes – mostly children but sometimes parents and families, caregivers, or other dedicated participants – in emotional, relatable moments that capture the magic of childhood. Whatever the situation, we never focus on the negative. Our images embody innocence, fortitude, joy, and ultimately, hope. 

CHOC serves all children and their families. Our imagery should be inclusive of all ethnicities, ages, genders, and physical condition. We give equal attention to sick and healthy kids. 

We portray real moments that are authentic to a child’s experience. Kids playing in a lawn sprinkler, a child recovering from chemotherapy session, the intimate interplay between a parent and child, the caring attention of a nurse while tending a child’s injury – these are all genuine, relatable activities that tell our story.

The settings should be appropriate to the activity. Images can portray life at home or outdoors play, as well as the hospital healthcare experience. 

Story. Story. Story. It is the most important and fundamental aspect of every CHOC video. What we say and how we say it are key to maintaining a consistent voice and brand identity. There are a wealth of incredible stories at CHOC and they deserve to be told in an engaging manner with care and compassion.

Story is the vital first step in every production process. It flows from StoryBrand principles and is anchored by CHOC’s distinct brand identity. The visuals and creative elements are drawn from story and are always in service of the narrative. Without story, a video is simply a series of pictures in rapid succession devoid of meaning.

Video tells stories in ways that are unique to its form and it is utilized by the marketing department to enhance emotional connection. Story and emotional connection should always be the determining factors when deciding whether video is the best medium to convey the desired meaning. Our video creative brief helps in this determination and guides every aspect of a CHOC video.

At CHOC, our videos place the spotlight on the story of our heroes – mostly our patients and families, but sometimes our providers, staff and donors.

The aesthetic of CHOC video is one that complements and heightens the story being told. Our videos are emotionally centered and engage the hearts and minds of the audience. The look and sound of our videos evoke feelings of childhood – imagination, wonder, safety, adventure, warmth, creativity, and light. The scenes and moments we depict should feel real, spontaneous, and ‘unrehearsed.’

The goal of all CHOC video is to portray our heroes in emotional, relatable moments that capture the magic of childhood. Whatever the situation, we always focus on the positive. Our videos embody innocence, fortitude, joy, and ultimately hope.

CHOC serves all children and their families. Our visual language is inclusive of all ethnicities, ages, genders, and physical abilities. We give equal attention to sick and healthy kids.

The final step in the production process. This is where the promises of pre-production and production are fulfilled and brought to life. All the puzzle pieces – story, shots, music, titles, etc. – are connected editorially into a compelling and emotionally driven video and delivered to our audience.

As part of CHOC’s commitment to providing the highest quality in all it does, technical and creative specifications must be maintained through post-production.

To create a unified CHOC video aesthetic and maintain the highest standards, all equipment should be calibrated to the same specifications before every shoot.

Examples that highlight the look and feel of CHOC video in color, composition, exposure and focus.

The opening title card firmly establishes CHOC’s brand identity and a sense of familiarity before the video begins. These should be used at the beginning of all external and long-form videos.

The lower third title displays a video subject’s name and title if applicable. All titles must follow AP style guidelines to maintain a consistent brand voice.

The circular Choco logo should be present in the bottom right corner, within the title safe zone, to distinguish all CHOC video.

The closing title card and call to action (cta) ends every video on a strong note with the CHOC logo and the intended action the audience should take.

The combination of music and video has the power to evoke strong emotions in the audience. As such, great care must be taken in choosing stock music and video that elicits the proper emotional response and aligns with the CHOC brand identity.

Stock music and video should create the same feelings of imagination, wonder, safety, adventure, warmth, creativity, and light that are evoked by our natively captured audio and video.

Determining if your web site or application is accessible can seem like an overwhelming task. If you are approaching accessibility for the first time, the sheer breadth of the topic can leave you wondering where to start – after all, working to accommodate a diverse range of abilities means there are a correspondingly diverse range of issues to consider.

This post (and video) breaks down these issues into a logical, step by step process for reviewing an existing site for accessibility.

Use the PageSpeed Insights tool to check the accessibility score of any webpage.

When it comes to website accessibility, the contrast between the text and the text background is a concern for colorblind and other visually impaired users.

This website provides free color contrast analysis tools that will display the color contrast issues of a web page or chosen color-pair; per WCAG 2.1 Guidelines.