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

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

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. 

Surface

White Stripes
                                                                                                                                                                                                                                                                     #FFF
                                                                                                                                                                                                                                                                     mono0

White Stripes
#FFF
mono0

Card bkgd + Box bkgd + Modal bkgd

Blondie (brand)
                                                                                                                                                                                                                                                                     #F2F2EC
                                                                                                                                                                                                                                                                     mono100

Blondie (brand)
#F2F2EC
mono100

Global bkgd

Dusty Springfield
                                                                                                                                                                                                                                                                     #E6E4D6
                                                                                                                                                                                                                                                                     mono300

Dusty Springfield
#E6E4D6
mono300

Card borders + Box Borders + Dividers

Cream (brand)
                                                                                                                                                                                                                                                                     #C0BDA2
                                                                                                                                                                                                                                                                     mono400

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

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

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

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