Welcome to the

Firefly design system

Our brand is not just our logo or colors, but how we are represented in every interaction we have with our audiences.

Logo

Guidance for how to use the logo at small scales and in composition with other elements.

Guidance for how to use the logo at small scales and in composition with other elements.

Logo Placement Visual

Logo Misuse

Examples of common way the logo is misused.

Firefly Logo over busy background

Busy Background

Do not use over a busy image with a low contrast color

Firefly Logo Mask

Logo Mask

Do not use logo as layer mask.

Firefly Logo Over non-brand Colors

Logo With Non-Brand Colors

Do not use logo over non-brand colors.

Firefly Logo Over non-brand Colors

Logo Color Changes

Do not change logo colors.

Firefly Logo ignoring positioning and margin rules

Logo Position and Margin Rules

Do not ignore logo positioning and margin rules.

Firefly Logo rotated

Logo Rotation

Do not rotate the logo to anything that is not 0°.

Firefly Logo with Shadow and Stroke

Logo With Shadow and Stroke

Do not add a shadow or stroke to the logo.

Firefly Logo Stretched

Stretched Logo

Do not stretch the logo vertically or horizontally.

Primary Color Palette

Primary Brand Colors and Hex Codes.

Glow Brand Color
Golden Yellow Brand Color
Midnight Brand Color
Sienna Brand Color
Sky Blue Brand Color
White Brand Color

Secondary Color Palette

Richly saturated secondary hues, inspired by the natural world, can be expressed through illustration, iconography, and other spot treatments that don’t involve text.

Don’t use secondary hues for text colors. Don’t set any text on secondary hues as backgrounds.

Red
Green
Orange
Pink
Blue

Color Pairings

Use the key below to understand how our brand colors work on various background colors

How to utilize colors around our Firefly Sienna

Sienna Color Pairings

Typefaces

All Headlines should be set in Trust Medium 1A.

Graphic Elements

Iconography

app
arrow-down
arrow-left
arrow-right
arrow-up
business
care-team
checkmark
clipboard
close
cost
doctor
doctors-office
firefly-nearby
health-cross
heart
id
house
navigation-compass
navigation-map
navigation-pin
pill
star
video-call
video-camera
languages
information
education

Overlapping Elements

2-Up Block Example

Overlapping

Inspired by the Firefly logo, we use a system of blended overlaps to create continuous connections between elements. Below are some guidelines that promote consistency across applications.

Overlapping Similar Images

Overlapping similar images (like headshots) in a consistent, snaking pattern.

Snaking Image Block Example

Photography

Use photographs of people depicting them in situational, everyday environments. Avoid scenes that feel consciously staged, and avoid portraits that show people styled in ways that are not true to their daily lives.

Treat photography with a warm tone.

Glow Treatment

  • Use the light-yellow Glow color to create the effect on images with a lighter tone.
  • Use the Golden Yellow color to create the effect on images with a darker tone.
Midnight Blue with Glow
Sky Blue with Glow

Brand Asset Downloads

This section provides downloads for all essential brand assets. Refer to this page or reach out for guidance if needed.