Bain Logo

Colors

Indicate which elements are interactive, how they relate to other elements, and their level of prominence.

  • Usage
  • Primary Palette
  • Secondary Palette
  • Color Roles
  • Extended Palette

Usage

Use color in meaningful ways. In other words, there should be a reason for the use of color in the products you build. Show statuses, direct the user's attention and represent the brand identity of the product.

Don't go overboard with color.

We are committed to complying with AA standard contrast ratios. To do this, we choose primary, secondary and extended colors that support usability. This ensures sufficient color contrast between elements so that users with low vision can see and use our products.

Primary Palette

The primary color palette is made up of only one tinted color (primary) and the rest neutral/monochromatic so that the use of that tinted color stands out from the other content. This primary color is usually the same as the product's "brand" color.

Primary

Name

R700 - Bill

Hex

#CC0000

Black

Name

N900 - Dead of Night

Hex

#000000

Subdued Text

Name

N500 - Boring

Hex

#666666

White

Name

N000 - White

Hex

#FFFFFF

Want to use a different color as the primary color? Check out Theming.

Secondary Palette

Secondary colors should be used to show statuses and accentuate information – not for decoration or to choose a different visual theme. Common use cases include success/failure statuses, text links, alerts and hairline borders.

Accent

Use accented colors for links.

Name

B500 - Sky

Hex

#0484E7

Success

Indicate the successful outcome of a process.

Name

G500 - Grass

Hex

#21A663

Warning

Indicate to the user a warning or to think twice about performing an action.

Name

Y700 - Mandarin

Hex

#F59B00

Error

Indicate something unexpected, erroneous or destructive.

Name

R500 - Lip Smacker

Hex

#D63333

Muted

Use when you need a subtle shade to indicate an outline or background color.

Name

N100 - Concrete

Hex

#DDDDDD

Color Roles

The main theme contains a few semantic color 'roles' that help to guide the usage of certain colors.

The actual value of colors for these roles can change depending on the color mode. (See the Medium article).

Try it out:

Color Roles in this theme:

Text

Default text color.

SubduedText

Used for secondary text like subtitles that can be less visually heavy.

Background

Main background color.

Background Surface

Secondary background color - can be used beneath Cards or to create a general surface-like effect.

Focus

Focus color for focused input fields.

You'll usually know if you're misusing the color roles when you adopt a different color mode. Text and backgrounds may seem odd when switching, usually due to choosing incorrect colors for components.

Extended Palette

The extended palette is intended for use in illustrations, charts and any use cases where more than the primary and secondary colors suffice. It consists of varying tints and shades of each color in the palette. They are helpfully named and numbered for easy reference.

Reds

R900 - Blood Clot

HEX #8A0F0F

R700 - Bill

HEX #CC0000

R500 - Lip Smacker

HEX #D63333

R250 - Sunset

HEX #E16666

R100 - Salmon

HEX #EB9999

R080 - Sunburn

HEX #F5CDCC

R020 - Rosie

HEX #FCE3E3

Yellows

Y900 - Midday

HEX #CA6602

Y700 - Mandarin

HEX #F59B00

Y500 - Citric Dream

HEX #FFCD00

Y250 - Cosmic Banana

HEX #FFDB48

Y100 - Bananarama

HEX #FFE785

Y080 - Gross Wallpaper

HEX #FEEC9A

Y020 - Yellowish

HEX #FEF9DC

Greens

G900 - Wald

HEX #0C5F35

G700 - Forest

HEX #1E995B

G500 - Grass

HEX #21A663

G250 - Go Time

HEX #4FC489

G100 - Dolla Bill

HEX #7EC8A3

G080 - Mint

HEX #C9EEDB

G020 - Greenish

HEX #EBF9F2

Cyans

C900 - Doona

HEX #008DA6

C700 - Fish Tank

HEX #00A3BF

C500 - Party

HEX #00B8D9

C250 - Sea Breeze

HEX #00C7E6

C100 - Lagoon

HEX #79E2F2

C080 - Soap

HEX #B3F5FF

C020 - Cyanish

HEX #E6FCFF

Blues

B900 - School Uniform

HEX #023F6E

B700 - Ocean

HEX #0361AA

B500 - Sky

HEX #0484E7

B250 - San Francisco Bay

HEX #229DFB

B100 - Afternoon

HEX #78C3FD

B080 - Pastel Dream

HEX #CDE9FE

B020 - Blueish

HEX #ECF6FD

BlueGrays

B900 - Dark and Stormy

HEX #2E3F4C

B700 - Deep Sea

HEX #2F5574

B500 - Storm Coming

HEX #506D85

B250 - Black Coral

HEX #738A9D

B100 - Battleship

HEX #96A7B6

B080 - Ash

HEX #B9C5CE

B020 - Cadet

HEX #DCE2E8

Neutrals

N900 - Dead of Night

HEX #000000

N700 - Slate

HEX #484848

N500 - Boring

HEX #666666

N250 - Grandma

HEX #999999

N100 - Concrete

HEX #DDDDDD

N020 - Egg White

HEX #F5F5F5

N000 - White

HEX #FFFFFF

Violets

V900 - Royal

HEX #403294

V700 - Prince

HEX #5243AA

V500 - Cadbury

HEX #6554C0

V250 - Romantic

HEX #8777D9

V100 - Aura

HEX #998DD9

V080 - Lavender

HEX #C0B6F2

V020 - Violetish

HEX #EAE6FF

Purples

P900 - Sangria

HEX #550736

P700 - Boysenberry

HEX #710948

P500 - Jam

HEX #890C58

P250 - Mauve

HEX #A13D79

P100 - Iris

HEX #B86C9B

P080 - Periwinkle

HEX #D19FBD

P020 - Heather

HEX #E7CEDE

Pinks

P900 - Mahogany

HEX #6E022A

P700 - Rich Pink

HEX #CE034E

P500 - Party

HEX #F2075E

P250 - Eighties Fun

HEX #FD2B78

P100 - Rose

HEX #FD78A9

P080 - Pale Pink

HEX #FECDDF

P020 - Pinkish

HEX #FDECF2
© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy