Colors

Canonical Colors

  • True White

    --colorWhite

    #ffffff

  • Natural Gray

    --colorGrayNatural

    #f7f7f7

  • Cream

    --colorCream

    #f3f1e7

  • Ceramic

    --colorCeramic

    #edebe9

  • True Black

    --colorBlack

    #000000

  • Warm Black

    --colorBlackWarm

    #2d2926

  • Warmer Black

    --colorBlackWarmer

    #3d3935

  • Starbucks Green

    --colorGreenStarbucks

    #00653e

  • Apron Green

    --colorGreenApron

    #00a862

  • Dark Apron Green

    --colorGreenDarkApron

    #008248

  • Accent Green

    --colorGreenAccent

    #00754A

  • Light Green

    --colorGreenLight

    #d4e9e2

  • Light Green Secondary

    --colorGreenLightSecondary

    rgba(212, 233, 226, 0.33)

  • House Green

    --colorHouseGreen

    #1E3932

  • Rewards Gold

    --colorGold

    #cba258

  • Error Red

    --colorRed

    #e75b52

  • Warning Yellow

    --colorYellow

    #fbbc05

Functional Colors

These colors are purpose specific and help inform consistent color usage.

  • Black Text

    --colorTextBlack

    rgba(0, 0, 0, .87)

  • Soft Black Text

    --colorTextBlackSoft

    rgba(0, 0, 0, .56)

  • White Text

    --colorTextWhite

    rgba(255, 255, 255, 1)

  • Soft White Text

    --colorTextWhiteSoft

    rgba(255, 255, 255, .70)

Text Colors

There are four basic text colors which are intended to cover a large majority of text needs.

For dark text on a light background, we use either 'black' or 'soft black':

Black heading

Black body copy

CSS variable name:
--colorTextBlack
CSS utility class:
color-textBlack

Soft black heading

Soft black body copy

CSS variable name:
--colorTextBlackSoft
CSS utility class:
color-textBlackSoft

For light text on a dark background, we use either 'white' or 'soft white':

White heading

White body copy

CSS variable name:
--colorTextWhite
CSS utility class:
color-textWhite

Soft white heading

Soft white body copy

CSS variable name:
--colorTextWhiteSoft
CSS utility class:
color-textWhiteSoft

Accessible Combinations

This is a list of color combinations of our color palette that pass WCAG 2.0 color contrast guidelines. Combinations displayed here pass either the AAA, AA, or AA Large WCAG conformance levels for contrast. AAA and AA combinations are safe to use at any type size. AA Large combinations are safe to use for large text.

To meet AA Large conformance, type must be at least 24px, or 19px if bold. This standard is typically written in terms of pt units (18pt and 14pt bold, respectively), which is equivalent to the pixel sizes noted above as the ratio between pt and px is 1pt = 1.3333px.

For more details on appropriate color contrast, see the WCAG description.

AAA

FG:--colorWhiteBG:--colorBlack

AAA

FG:--colorGrayNaturalBG:--colorBlack

AAA

FG:--colorCreamBG:--colorBlack

AAA

FG:--colorCeramicBG:--colorBlack

AA

FG:--colorGreenApronBG:--colorBlack

AA Large

FG:--colorGreenDarkApronBG:--colorBlack

AA Large

FG:--colorGreenAccentBG:--colorBlack

AAA

FG:--colorGreenLightBG:--colorBlack

AAA

FG:--colorGoldBG:--colorBlack

AA

FG:--colorRedBG:--colorBlack

AAA

FG:--colorYellowBG:--colorBlack

AA Large

FG:--colorWhite40BG:--colorBlack

AA

FG:--colorWhite50BG:--colorBlack

AAA

FG:--colorWhite60BG:--colorBlack

AAA

FG:--colorWhite70BG:--colorBlack

AAA

FG:--colorWhite80BG:--colorBlack

AAA

FG:--colorWhite90BG:--colorBlack

AAA

FG:--colorTextWhiteBG:--colorBlack

AAA

FG:--colorTextWhiteSoftBG:--colorBlack

AAA

FG:--colorWhiteBG:--colorBlackWarm

AAA

FG:--colorGrayNaturalBG:--colorBlackWarm

AAA

FG:--colorCreamBG:--colorBlackWarm

AAA

FG:--colorCeramicBG:--colorBlackWarm

AA

FG:--colorGreenApronBG:--colorBlackWarm

AAA

FG:--colorGreenLightBG:--colorBlackWarm

AA

FG:--colorGoldBG:--colorBlackWarm

AA Large

FG:--colorRedBG:--colorBlackWarm

AAA

FG:--colorYellowBG:--colorBlackWarm

AA Large

FG:--colorWhite40BG:--colorBlackWarm

AA

FG:--colorWhite50BG:--colorBlackWarm

AA

FG:--colorWhite60BG:--colorBlackWarm

AAA

FG:--colorWhite70BG:--colorBlackWarm

AAA

FG:--colorWhite80BG:--colorBlackWarm

AAA

FG:--colorWhite90BG:--colorBlackWarm

AAA

FG:--colorTextWhiteBG:--colorBlackWarm

AAA

FG:--colorTextWhiteSoftBG:--colorBlackWarm

AAA

FG:--colorWhiteBG:--colorBlackWarmer

AAA

FG:--colorGrayNaturalBG:--colorBlackWarmer

AAA

FG:--colorCreamBG:--colorBlackWarmer

AAA

FG:--colorCeramicBG:--colorBlackWarmer

AA Large

FG:--colorGreenApronBG:--colorBlackWarmer

AAA

FG:--colorGreenLightBG:--colorBlackWarmer

AA

FG:--colorGoldBG:--colorBlackWarmer

AA Large

FG:--colorRedBG:--colorBlackWarmer

AA

FG:--colorYellowBG:--colorBlackWarmer

AA Large

FG:--colorWhite40BG:--colorBlackWarmer

AA Large

FG:--colorWhite50BG:--colorBlackWarmer

AA

FG:--colorWhite60BG:--colorBlackWarmer

AA

FG:--colorWhite70BG:--colorBlackWarmer

AAA

FG:--colorWhite80BG:--colorBlackWarmer

AAA

FG:--colorWhite90BG:--colorBlackWarmer

AAA

FG:--colorTextWhiteBG:--colorBlackWarmer

AA

FG:--colorTextWhiteSoftBG:--colorBlackWarmer

AAA

FG:--colorBlackBG:--colorCeramic

AAA

FG:--colorBlackWarmBG:--colorCeramic

AAA

FG:--colorBlackWarmerBG:--colorCeramic

AA

FG:--colorGreenStarbucksBG:--colorCeramic

AA Large

FG:--colorGreenDarkApronBG:--colorCeramic

AA

FG:--colorGreenAccentBG:--colorCeramic

AAA

FG:--colorHouseGreenBG:--colorCeramic

AA Large

FG:--colorBlack50BG:--colorCeramic

AA

FG:--colorBlack60BG:--colorCeramic

AAA

FG:--colorBlack70BG:--colorCeramic

AAA

FG:--colorBlack80BG:--colorCeramic

AAA

FG:--colorBlack90BG:--colorCeramic

AAA

FG:--colorTextBlackBG:--colorCeramic

AA

FG:--colorTextBlackSoftBG:--colorCeramic

AAA

FG:--colorBlackBG:--colorCream

AAA

FG:--colorBlackWarmBG:--colorCream

AAA

FG:--colorBlackWarmerBG:--colorCream

AA

FG:--colorGreenStarbucksBG:--colorCream

AA Large

FG:--colorGreenDarkApronBG:--colorCream

AA

FG:--colorGreenAccentBG:--colorCream

AAA

FG:--colorHouseGreenBG:--colorCream

AA Large

FG:--colorRedBG:--colorCream

AA Large

FG:--colorBlack50BG:--colorCream

AA

FG:--colorBlack60BG:--colorCream

AAA

FG:--colorBlack70BG:--colorCream

AAA

FG:--colorBlack80BG:--colorCream

AAA

FG:--colorBlack90BG:--colorCream

AAA

FG:--colorTextBlackBG:--colorCream

AA

FG:--colorTextBlackSoftBG:--colorCream

AAA

FG:--colorBlackBG:--colorGold

AA

FG:--colorBlackWarmBG:--colorGold

AA

FG:--colorBlackWarmerBG:--colorGold

AA Large

FG:--colorGreenStarbucksBG:--colorGold

AA

FG:--colorHouseGreenBG:--colorGold

AA Large

FG:--colorBlack50BG:--colorGold

AA Large

FG:--colorBlack60BG:--colorGold

AA

FG:--colorBlack70BG:--colorGold

AA

FG:--colorBlack80BG:--colorGold

AAA

FG:--colorBlack90BG:--colorGold

AAA

FG:--colorTextBlackBG:--colorGold

AA Large

FG:--colorTextBlackSoftBG:--colorGold

AAA

FG:--colorBlackBG:--colorGrayNatural

AAA

FG:--colorBlackWarmBG:--colorGrayNatural

AAA

FG:--colorBlackWarmerBG:--colorGrayNatural

AA

FG:--colorGreenStarbucksBG:--colorGrayNatural

AA

FG:--colorGreenDarkApronBG:--colorGrayNatural

AA

FG:--colorGreenAccentBG:--colorGrayNatural

AAA

FG:--colorHouseGreenBG:--colorGrayNatural

AA Large

FG:--colorRedBG:--colorGrayNatural

AA Large

FG:--colorBlack50BG:--colorGrayNatural

AA

FG:--colorBlack60BG:--colorGrayNatural

AAA

FG:--colorBlack70BG:--colorGrayNatural

AAA

FG:--colorBlack80BG:--colorGrayNatural

AAA

FG:--colorBlack90BG:--colorGrayNatural

AAA

FG:--colorTextBlackBG:--colorGrayNatural

AA

FG:--colorTextBlackSoftBG:--colorGrayNatural

AA

FG:--colorWhiteBG:--colorGreenAccent

AA

FG:--colorGrayNaturalBG:--colorGreenAccent

AA

FG:--colorCreamBG:--colorGreenAccent

AA

FG:--colorCeramicBG:--colorGreenAccent

AA Large

FG:--colorBlackBG:--colorGreenAccent

AA

FG:--colorGreenLightBG:--colorGreenAccent

AA Large

FG:--colorYellowBG:--colorGreenAccent

AA Large

FG:--colorBlack80BG:--colorGreenAccent

AA Large

FG:--colorBlack90BG:--colorGreenAccent

AA Large

FG:--colorWhite60BG:--colorGreenAccent

AA Large

FG:--colorWhite70BG:--colorGreenAccent

AA Large

FG:--colorWhite80BG:--colorGreenAccent

AA

FG:--colorWhite90BG:--colorGreenAccent

AA Large

FG:--colorTextBlackBG:--colorGreenAccent

AA

FG:--colorTextWhiteBG:--colorGreenAccent

AA Large

FG:--colorTextWhiteSoftBG:--colorGreenAccent

AA Large

FG:--colorWhiteBG:--colorGreenApron

AA

FG:--colorBlackBG:--colorGreenApron

AA

FG:--colorBlackWarmBG:--colorGreenApron

AA Large

FG:--colorBlackWarmerBG:--colorGreenApron

AA Large

FG:--colorHouseGreenBG:--colorGreenApron

AA Large

FG:--colorBlack60BG:--colorGreenApron

AA

FG:--colorBlack70BG:--colorGreenApron

AA

FG:--colorBlack80BG:--colorGreenApron

AA

FG:--colorBlack90BG:--colorGreenApron

AA

FG:--colorTextBlackBG:--colorGreenApron

AA Large

FG:--colorTextBlackSoftBG:--colorGreenApron

AA Large

FG:--colorTextWhiteBG:--colorGreenApron

AA

FG:--colorWhiteBG:--colorGreenDarkApron

AA

FG:--colorGrayNaturalBG:--colorGreenDarkApron

AA Large

FG:--colorCreamBG:--colorGreenDarkApron

AA Large

FG:--colorCeramicBG:--colorGreenDarkApron

AA Large

FG:--colorBlackBG:--colorGreenDarkApron

AA Large

FG:--colorGreenLightBG:--colorGreenDarkApron

AA Large

FG:--colorBlack70BG:--colorGreenDarkApron

AA Large

FG:--colorBlack80BG:--colorGreenDarkApron

AA Large

FG:--colorBlack90BG:--colorGreenDarkApron

AA Large

FG:--colorWhite70BG:--colorGreenDarkApron

AA Large

FG:--colorWhite80BG:--colorGreenDarkApron

AA Large

FG:--colorWhite90BG:--colorGreenDarkApron

AA Large

FG:--colorTextBlackBG:--colorGreenDarkApron

AA

FG:--colorTextWhiteBG:--colorGreenDarkApron

AA Large

FG:--colorTextWhiteSoftBG:--colorGreenDarkApron

AAA

FG:--colorBlackBG:--colorGreenLight

AAA

FG:--colorBlackWarmBG:--colorGreenLight

AAA

FG:--colorBlackWarmerBG:--colorGreenLight

AA

FG:--colorGreenStarbucksBG:--colorGreenLight

AA Large

FG:--colorGreenDarkApronBG:--colorGreenLight

AA

FG:--colorGreenAccentBG:--colorGreenLight

AAA

FG:--colorHouseGreenBG:--colorGreenLight

AA Large

FG:--colorBlack50BG:--colorGreenLight

AA

FG:--colorBlack60BG:--colorGreenLight

AAA

FG:--colorBlack70BG:--colorGreenLight

AAA

FG:--colorBlack80BG:--colorGreenLight

AAA

FG:--colorBlack90BG:--colorGreenLight

AAA

FG:--colorTextBlackBG:--colorGreenLight

AA

FG:--colorTextBlackSoftBG:--colorGreenLight

AAA

FG:--colorWhiteBG:--colorGreenStarbucks

AA

FG:--colorGrayNaturalBG:--colorGreenStarbucks

AA

FG:--colorCreamBG:--colorGreenStarbucks

AA

FG:--colorCeramicBG:--colorGreenStarbucks

AA

FG:--colorGreenLightBG:--colorGreenStarbucks

AA Large

FG:--colorGoldBG:--colorGreenStarbucks

AA Large

FG:--colorYellowBG:--colorGreenStarbucks

AA Large

FG:--colorWhite60BG:--colorGreenStarbucks

AA Large

FG:--colorWhite70BG:--colorGreenStarbucks

AA

FG:--colorWhite80BG:--colorGreenStarbucks

AA

FG:--colorWhite90BG:--colorGreenStarbucks

AAA

FG:--colorTextWhiteBG:--colorGreenStarbucks

AA Large

FG:--colorTextWhiteSoftBG:--colorGreenStarbucks

AAA

FG:--colorWhiteBG:--colorHouseGreen

AAA

FG:--colorGrayNaturalBG:--colorHouseGreen

AAA

FG:--colorCreamBG:--colorHouseGreen

AAA

FG:--colorCeramicBG:--colorHouseGreen

AA Large

FG:--colorGreenApronBG:--colorHouseGreen

AAA

FG:--colorGreenLightBG:--colorHouseGreen

AA

FG:--colorGoldBG:--colorHouseGreen

AA Large

FG:--colorRedBG:--colorHouseGreen

AAA

FG:--colorYellowBG:--colorHouseGreen

AA Large

FG:--colorWhite40BG:--colorHouseGreen

AA Large

FG:--colorWhite50BG:--colorHouseGreen

AA

FG:--colorWhite60BG:--colorHouseGreen

AAA

FG:--colorWhite70BG:--colorHouseGreen

AAA

FG:--colorWhite80BG:--colorHouseGreen

AAA

FG:--colorWhite90BG:--colorHouseGreen

AAA

FG:--colorTextWhiteBG:--colorHouseGreen

AAA

FG:--colorTextWhiteSoftBG:--colorHouseGreen

AA Large

FG:--colorWhiteBG:--colorRed

AA Large

FG:--colorGrayNaturalBG:--colorRed

AA Large

FG:--colorCreamBG:--colorRed

AA

FG:--colorBlackBG:--colorRed

AA Large

FG:--colorBlackWarmBG:--colorRed

AA Large

FG:--colorBlackWarmerBG:--colorRed

AA Large

FG:--colorHouseGreenBG:--colorRed

AA Large

FG:--colorBlack60BG:--colorRed

AA Large

FG:--colorBlack70BG:--colorRed

AA

FG:--colorBlack80BG:--colorRed

AA

FG:--colorBlack90BG:--colorRed

AA Large

FG:--colorWhite90BG:--colorRed

AA

FG:--colorTextBlackBG:--colorRed

AA Large

FG:--colorTextBlackSoftBG:--colorRed

AA Large

FG:--colorTextWhiteBG:--colorRed

AAA

FG:--colorBlackBG:--colorTextWhite

AAA

FG:--colorBlackWarmBG:--colorTextWhite

AAA

FG:--colorBlackWarmerBG:--colorTextWhite

AAA

FG:--colorGreenStarbucksBG:--colorTextWhite

AA Large

FG:--colorGreenApronBG:--colorTextWhite

AA

FG:--colorGreenDarkApronBG:--colorTextWhite

AA

FG:--colorGreenAccentBG:--colorTextWhite

AAA

FG:--colorHouseGreenBG:--colorTextWhite

AA Large

FG:--colorRedBG:--colorTextWhite

AA Large

FG:--colorBlack50BG:--colorTextWhite

AA

FG:--colorBlack60BG:--colorTextWhite

AAA

FG:--colorBlack70BG:--colorTextWhite

AAA

FG:--colorBlack80BG:--colorTextWhite

AAA

FG:--colorBlack90BG:--colorTextWhite

AAA

FG:--colorTextBlackBG:--colorTextWhite

AA

FG:--colorTextBlackSoftBG:--colorTextWhite

AAA

FG:--colorBlackBG:--colorWhite

AAA

FG:--colorBlackWarmBG:--colorWhite

AAA

FG:--colorBlackWarmerBG:--colorWhite

AAA

FG:--colorGreenStarbucksBG:--colorWhite

AA Large

FG:--colorGreenApronBG:--colorWhite

AA

FG:--colorGreenDarkApronBG:--colorWhite

AA

FG:--colorGreenAccentBG:--colorWhite

AAA

FG:--colorHouseGreenBG:--colorWhite

AA Large

FG:--colorRedBG:--colorWhite

AA Large

FG:--colorBlack50BG:--colorWhite

AA

FG:--colorBlack60BG:--colorWhite

AAA

FG:--colorBlack70BG:--colorWhite

AAA

FG:--colorBlack80BG:--colorWhite

AAA

FG:--colorBlack90BG:--colorWhite

AAA

FG:--colorTextBlackBG:--colorWhite

AA

FG:--colorTextBlackSoftBG:--colorWhite

AAA

FG:--colorBlackBG:--colorYellow

AAA

FG:--colorBlackWarmBG:--colorYellow

AA

FG:--colorBlackWarmerBG:--colorYellow

AA Large

FG:--colorGreenStarbucksBG:--colorYellow

AA Large

FG:--colorGreenAccentBG:--colorYellow

AAA

FG:--colorHouseGreenBG:--colorYellow

AA Large

FG:--colorBlack50BG:--colorYellow

AA

FG:--colorBlack60BG:--colorYellow

AA

FG:--colorBlack70BG:--colorYellow

AAA

FG:--colorBlack80BG:--colorYellow

AAA

FG:--colorBlack90BG:--colorYellow

AAA

FG:--colorTextBlackBG:--colorYellow

AA Large

FG:--colorTextBlackSoftBG:--colorYellow