Colors

Homebase's brand colors and guidelines for using them consistently across digital interfaces to ensure accessibility, clarity, and brand cohesion.

Primary

Used for interactive states, accents in graphics, and background colors. They give brand recognition and should always be considered first when designing.

Pearl Jam
#F1ECFF
purple100

Pearl Jam
#F1ECFF
purple100

Hover states + Nav active states

Queen
#CDC0F3
purple300

Queen
#CDC0F3
purple300

Pressed states + Illustrations + Graphics + Data Viz

Steel Pulse
#9C7EDB
purple400

Steel Pulse
#9C7EDB
purple400

Illustrations + Graphics + Data Viz

Purple Haze (brand)
#7E3DD4
purple500

Hyperlink default + Buttons + Interactive icons

Velvet Concord
#52258F
purple700

Velvet Concord
#52258F
purple700

Hover states + Background Colors in Numbers and Icons in Lists

Deep Purple (brand)
#1E0B3A
purple900

Pressed states + Nav bkgd + Background color (same as Mono "Deep Purple")

Mono

Use for backgrounds and text colors. They were selected to complement our primary colors and should be used when a more calm brand expression is needed.

Avoid using these colors for interactive elements. Exceptions: navigation (see Iconography)

Surface

White Stripes
#FFF
mono0

White Stripes
#FFF
mono0

Card bkgd + Box bkgd + Modal bkgd

Blondie (brand)
#F2F2EC
mono100

Global bkgd

Dusty Springfield
#E6E4D6
mono300

Dusty Springfield
#E6E4D6
mono300

Card borders + Box Borders + Dividers

Cream (brand)
#C0BDA2
mono400

Site bkgd (use sparingly) + disabled state bkgd

Text

James Brown
#9E9C88
mono500

James Brown
#9E9C88
mono500

Disabled + Placeholder text (not subdued text/low emphasis)

Muddy Waters
#605F56
mono700

Muddy Waters
#605F56
mono700

Subdued text + low emphasis text + legal text

Deep Purple (brand)
#1E0B3A
purple900

Default text color (same as Primary "Deep Purple")

Accents & Highlights

Use sparingly for emphasis, typically for graphics and icons. Not for text or backgrounds.

Accents

Pink Floyd (brand)
#E55CCD
accent500

Focus states + progress bars + accent within duotone icons. Use sparingly.

Heart
#A92C93
accent900

Heart
#A92C93
accent900

Hyperlink text color for hover + focus + visited. “New” badge color.

Highlight

Yellowcard (brand)
#E0FF00
highlight500

Accents for emotional areas (not functional.) Use sparingly.

Alerting

Semantic colors used for alerting

Gang Green
#E5F4E7
green100

Gang Green
#E5F4E7
green100

Success: banner, snackbar, badge bkgd

Green Day
#028810
green300

Green Day
#028810
green300

Success: accent, alert icon & text, tag bkgd, badge icon & text

Al Green
#155E34
green500

Al Green
#155E34
green500

Success: hovers, emphasis

Blues Traveler
#E9F7FF
blue100

Blues Traveler
#E9F7FF
blue100

Informational: banner, snackbar, badge bkgd

Blue Oyster Cult
#0177B0
blue300

Blue Oyster Cult
#0177B0
blue300

Informational: accent, alert icon & text, tag bkgd, badge icon & text

Moody Blues
#005781
blue500

Moody Blues
#005781
blue500

Informational: hovers, emphasis

Peach Pit
#FDF3E6
orange100

Peach Pit
#FDF3E6
orange100

Warning: banner, snackbar, badge bkgd

Code Orange
#EB7F00
orange300

Code Orange
#EB7F00
orange300

Warning: accent, alert icon & text, tag bkgd, badge icon & text

Brass Monkey
#C0490A
orange500

Brass Monkey
#C0490A
orange500

Warning: hovers, emphasis

Otis Redding
#FFF0EE
red100

Otis Redding
#FFF0EE
red100

Error: banner, snackbar, badge bkgd

Red Hot Chile Peppers
#D72505
red300

Red Hot Chile Peppers
#D72505
red300

Error: accent, alert icon & text, tag bkgd, badge icon & text

Red Bone
#A32100
red500

Red Bone
#A32100
red500

Error: hovers, emphasis

The Cranberries
#5D1300
red900

The Cranberries
#5D1300
red900

Error: pressed states