Images are a key brand component that helps convey our values and sense of purpose.

Image Selection

Follow the Brand Guidelines for photo selection and cropping. Specific to the Cigna.com context, also consider these suggestions:

  • When relevant, flip images of people so they appear to be looking at important elements on the page, which will to help lead the viewer’s eye to key information or calls to action.
  • Make sure the saturation, lighting, clarity, and overall photographic style is as consistent as possible so that the tone feels consistent across the site, and so photos don't look too harsh or washed out when positioned next to each other.
  • Try to choose photos that are relatively uncluttered, with a clear focal point and simple background.
  • Avoid showing a large group of people in all of the photos on the same page – this can feel crowded. Try to vary the number of people across photos in a set.
  • Within a page and across the site, make sure to reflect the diversity of our audiences (age, ethnicity, location, context).
  • Look for bright pops of solid color; if possible, avoid too many pastels and busy patterned clothing. Try to choose photos that incorporate our brand colors – particularly orange and green. Other colors may be featured as long as they do not clash with other elements on the page.
  • Always make sure people's faces do not get covered up by other elements – check across all screen sizes.

Note: Sample page mockups have been filled with only photos available on the existing Cigna.com website, so they may not all follow these guidelines. These suggestions are intended to augment and not replace the Brand Guidelines.

Images with Shadow Treatment

Use the shadow to provide some visual variety and depth on single photos that should get extra attention on the page. Do not use shadows on grids of photos. For more detail on how this should be implemented, see Shadows.

Image with shadow
Image without shadow

Image Sizing

  • Image border radius depends on size of image - use $radius-L (12px) for larger images, $radius-M (8px) for smaller images
  • Avoid using portrait orientation photos, as they typically don't blend with the overall design approach. Portrait orientation may only be used sparingly for document preview images, such as the cover page of a white paper.
  • All Media Pages and Case Studies need a 16:9 thumbnail for use in teasers
  • Heroes can use anything from 16:9 to square - start with 16:9 or 9:6 depending on whether the text content of the hero is shorter or longer. See Heroes page for more guidance on curve/photo overlap, and Full Width Photo Hero for guidance specific to that component, which uses a much wider aspect ratio for the full-bleed effect.

Examples

6 Columns

  • Usage

    Full Size Video Still or Article Primary Image

  • Maximum Dimensions

    539 pixels by 304 pixels

5 Columns

  • Usage

    Full Size Video Still or Article Primary Image

  • Minimum Dimensions (Applicable at the medium screen size and above)

    444 pixels by 250 pixels

  • Preferred Dimensions (Applicable at the medium screen size and above)

    444 pixels by 296 pixels

  • Maximum Dimensions

    444 pixels by 444 pixels

4 Columns

  • Usage

    Image Teaser Large Thumbnails

  • Maximum Dimensions

    349 pixels by 198 pixels

4 Columns — 9:6 Ratio

  • Usage

    Long Intro Hero

  • Maximum Dimensions

    349 pixels by 233 pixels

2 Columns

  • Usage

    Image Teaser Medium Thumbnails

  • Maximum Dimensions

    158 pixels by 90 pixels

Fixed Size — Small

  • Usage

    Image Teaser Small Thumbnails

  • Maximum Dimensions

    120 pixels by 68 pixels

Fixed Size — Small

  • Usage

    Bio and Presenter Thumbnails

  • Maximum Dimensions

    128 pixels by 128 pixels

More Resources