Design System

Color tokens

Our color system is built on a flexible, layered token structure that ensures consistency across design and code.

Tokens define how color is applied in interfacesโ€”from foundational values to functional and contextual roles.

Illustration of color tokens, including primitive, global, semantic names and swatches

Global tokens

Color tokens begin withย primitive valuesโ€”the raw hues that form the base of our palette. These are not used directly but serve as the source for all applied color.

Global tokensย map those primitives to functional roles in the interface, such as text, surfaces, and borders. This separation ensures simplicity, easier maintenance, and adaptability across themes like dark mode.

Neutral

Swatch color

textLight, secondaryTextneutral.textLight#575757

Swatch color

textneutral.text#100101

Swatch color

strokeneutral.stroke#D2D2D2

Swatch color

textLight, secondaryTextneutral.secondaryText#575757

Swatch color

disabledneutral.disabled#808080

Swatch color

card, backgroundDarkneutral.card#EBEBEB

Swatch color

card, backgroundDarkneutral.backgroundDark#EBEBEB

Swatch color

backgroundneutral.background#FFFFFF

Swatch color

textneutral.900#100101

Swatch color

neutral.875#1F1718

Swatch color

neutral.850#272323

Swatch color

neutral.825#2A2828

Swatch color

neutral.800#2F2F2F

Swatch color

neutral.700#4C4C4C

Swatch color

textLight, secondaryTextneutral.600#575757

Swatch color

neutral.550#666666

Swatch color

neutral.500#666666

Swatch color

disabledneutral.400#808080

Swatch color

neutral.300#B4B4B4

Swatch color

strokeneutral.200#D2D2D2

Swatch color

card, backgroundDarkneutral.100#EBEBEB

Swatch color

neutral.50#F4F4F4

Swatch color

backgroundneutral.0#FFFFFF

Brand Colors

Swatch color

brandPurple.900#271B37

Swatch color

brandPurple.800#4A3D5D

Swatch color

brandPurple.700#726188

Swatch color

brandPurple.600#7438C0

Swatch color

brandPurple.500#9480AE

Swatch color

brandPurple.400#AE9DCA

Swatch color

brandPurple.300#C2B3D9

Swatch color

brandPurple.200#D1C4E6

Swatch color

brandPurple.100#E2DAF0

Swatch color

brandPurple.50#E2DAF0

Swatch color

baseprimary.base#1C88DB

Swatch color

primary.900#012E3E

Swatch color

primary.800#3F5976

Swatch color

primary.700#5F82A6

Swatch color

baseprimary.600#1C88DB

Swatch color

primary.500#769CC3

Swatch color

primary.400#91B4D9

Swatch color

primary.300#A5C5E7

Swatch color

primary.200#BFD5EE

Swatch color

primary.100#D4E4F6

Swatch color

primary.50#EAEFF5

Swatch color

brandGreen.900#1B281D

Swatch color

brandGreen.800#425045

Swatch color

brandGreen.700#647768

Swatch color

brandGreen.600#22783A

Swatch color

brandGreen.500#829484

Swatch color

brandGreen.400#AEBAB1

Swatch color

brandGreen.300#CDD7D0

Swatch color

brandGreen.200#DAE2DF

Swatch color

brandGreen.100#E6EEEB

Swatch color

brandGreen.50#E6EEEB

Swatch color

brandYellow.900#35321D

Swatch color

brandYellow.800#5F5A3F

Swatch color

brandYellow.700#837B5D

Swatch color

brandYellow.600#FDB70A

Swatch color

brandYellow.500#A09371

Swatch color

brandYellow.400#BAAD88

Swatch color

brandYellow.300#D5C9A9

Swatch color

brandYellow.200#E7DEC5

Swatch color

brandYellow.100#F0EBDE

Swatch color

brandYellow.50#F0EBDE

Swatch color

brandOrange.900#3A2C22

Swatch color

brandOrange.800#664B39

Swatch color

brandOrange.700#98735B

Swatch color

brandOrange.600#D9702A

Swatch color

brandOrange.500#BB9175

Swatch color

brandOrange.400#D1A283

Swatch color

brandOrange.300#DFBCA5

Swatch color

brandOrange.200#E9D2C3

Swatch color

brandOrange.100#F1E2D7

Swatch color

brandOrange.50#F1E2D7

Swatch color

brandRed.900#42232F

Swatch color

brandRed.800#7C475C

Swatch color

brandRed.700#AE6882

Swatch color

brandRed.600#C6284B

Swatch color

brandRed.500#C8839E

Swatch color

brandRed.400#DFA1B8

Swatch color

brandRed.300#E8B7CA

Swatch color

brandRed.200#EDCBD8

Swatch color

brandRed.100#F2D9E2

Swatch color

brandRed.50#F2D9E2

Semantic tokens

Semantic color tokens convey meaning and stateโ€”such as purpose of usage, success, warning, or errorโ€”within components and patterns.

These colors are strictly functional and should never be used decoratively. They help users quickly understand system status through consistent, accessible visual cues.

Background

ADD BACKGROUND SWATCHES AFTER COLOR PR MERGED/RELEASED

Text

Swatch color

disabledInverttext.disabledInvert#666666

Swatch color

disabledtext.disabled#808080

Swatch color

secondaryInverttext.secondaryInvertRGBA(255,255,255,0.64)

Swatch color

secondarytext.secondaryRGBA(16,1,1,0.64)

Swatch color

primaryInverttext.primaryInvert#FFFFFF

Swatch color

primarytext.primary#100101

Dim

ADD BACKGROUND SWATCHES AFTER COLOR PR MERGED/RELEASED

Stroke

Swatch color

primaryInvertstroke.primaryInvert#2F2F2F

Swatch color

primarystroke.primary#EBEBEB

Divider

Swatch color

primaryInvertdivider.primaryInvert#2F2F2F

Swatch color

primarydivider.primary#EBEBEB

Success

The success palette is used to indicate that the action the user took completed successfully.

Swatch color

accentInvert, primarysuccess.accentInvert#425045

Swatch color

accentsuccess.accent#DAE2DF

Swatch color

backgroundInvertsuccess.backgroundInvert#1B281D

Swatch color

background, primaryInvertsuccess.background#E6EEEB

Swatch color

secondaryInvert, secondary, basesuccess.secondaryInvert#22783A

Swatch color

secondaryInvert, secondary, basesuccess.secondary#22783A

Swatch color

background, primaryInvertsuccess.primaryInvert#E6EEEB

Swatch color

accentInvert, primarysuccess.primary#425045

Swatch color

secondaryInvert, secondary, basesuccess.base#22783A

Swatch color

backgroundInvertsuccess.900#1B281D

Swatch color

accentInvert, primarysuccess.800#425045

Swatch color

success.700#647768

Swatch color

secondaryInvert, secondary, basesuccess.600#22783A

Swatch color

success.500#829484

Swatch color

success.400#AEBAB1

Swatch color

success.300#CDD7D0

Swatch color

accentsuccess.200#DAE2DF

Swatch color

background, primaryInvertsuccess.100#E6EEEB

Swatch color

success.50#F2F6F7

Warning

The warning palette warns users about non-blocking problems or events.

Swatch color

accentInvert, primarywarning.accentInvert#5F5A3F

Swatch color

accentwarning.accent#E7DEC5

Swatch color

backgroundInvertwarning.backgroundInvert#35321D

Swatch color

background, primaryInvertwarning.background#F0EBDE

Swatch color

secondaryInvert, secondarywarning.secondaryInvert#D9702A

Swatch color

secondaryInvert, secondarywarning.secondary#D9702A

Swatch color

background, primaryInvertwarning.primaryInvert#F0EBDE

Swatch color

accentInvert, primarywarning.primary#5F5A3F

Swatch color

basewarning.base#FDB70A

Swatch color

backgroundInvertwarning.900#35321D

Swatch color

accentInvert, primarywarning.800#5F5A3F

Swatch color

warning.700#837B5D

Swatch color

basewarning.600#FDB70A

Swatch color

warning.500#A09371

Swatch color

warning.400#BAAD88

Swatch color

warning.300#D5C9A9

Swatch color

accentwarning.200#E7DEC5

Swatch color

background, primaryInvertwarning.100#F0EBDE

Swatch color

warning.50#F8F5ED

Danger

Use the danger palette around blocking problems or events, or to indicate destructive actions.

Swatch color

accentInvert, primarydanger.accentInvert#7C475C

Swatch color

accentdanger.accent#EDCBD8

Swatch color

backgroundInvertdanger.backgroundInvert#42232F

Swatch color

background, primaryInvertdanger.background#F8EBF1

Swatch color

secondaryInvert, secondary, basedanger.secondaryInvert#C6284B

Swatch color

secondaryInvert, secondary, basedanger.secondary#C6284B

Swatch color

background, primaryInvertdanger.primaryInvert#F8EBF1

Swatch color

accentInvert, primarydanger.primary#7C475C

Swatch color

secondaryInvert, secondary, basedanger.base#C6284B

Swatch color

backgroundInvertdanger.900#42232F

Swatch color

accentInvert, primarydanger.800#7C475C

Swatch color

danger.700#AE6882

Swatch color

secondaryInvert, secondary, basedanger.600#C6284B

Swatch color

danger.500#C8839E

Swatch color

danger.400#DFA1B8

Swatch color

danger.300#E8B7CA

Swatch color

accentdanger.200#EDCBD8

Swatch color

danger.100#F2D9E2

Swatch color

background, primaryInvertdanger.50#F8EBF1

Transparency

For most uses, we recommend using overlayLight and overlayDark.

The palettes below are use cases where a specific level of transparency is required. For example, lightAlpha800 equals neutral0 at 80% opacity.

Swatch color

lightAlpha.900RGBA(255, 255, 255, 0.92)

Swatch color

lightAlpha.800RGBA(255, 255, 255, 0.8)

Swatch color

lightAlpha.700RGBA(255, 255, 255, 0.64)

Swatch color

lightAlpha.600RGBA(255, 255, 255, 0.48)

Swatch color

lightAlpha.500RGBA(255, 255, 255, 0.48)

Swatch color

lightAlpha.400RGBA(255, 255, 255, 0.24)

Swatch color

lightAlpha.300RGBA(255, 255, 255, 0.16)

Swatch color

lightAlpha.200RGBA(255, 255, 255, 0.08)

Swatch color

lightAlpha.100RGBA(255, 255, 255, 0.06)

Swatch color

lightAlpha.50RGBA(255, 255, 255, 0.04)

Swatch color

darkAlpha.900RGBA(16, 1, 1, 0.92)

Swatch color

darkAlpha.800RGBA(16, 1, 1, 0.8)

Swatch color

darkAlpha.700RGBA(16, 1, 1, 0.64)

Swatch color

darkAlpha.600RGBA(16, 1, 1, 0.48)

Swatch color

darkAlpha.500RGBA(16, 1, 1, 0.48)

Swatch color

darkAlpha.400RGBA(16, 1, 1, 0.24)

Swatch color

darkAlpha.300RGBA(16, 1, 1, 0.16)

Swatch color

darkAlpha.200RGBA(16, 1, 1, 0.08)

Swatch color

darkAlpha.100RGBA(16, 1, 1, 0.06)

Swatch color

darkAlpha.50RGBA(16, 1, 1, 0.04)

React

See the style props documentation for the complete list of style props that use the color scale.

live

<HStack sx={{ div: { height: '400', width: '400' } }}>
<Center bg="neutral.200" color="primary.900">
โ˜บ
</Center>
<Center bg="primary.200" color="primary.400">
โ˜บ
</Center>
<Center bg="success.base" color="success.900">
โ˜บ
</Center>
<Center bg="warning.base" color="warning.900">
โ˜บ
</Center>
<Center bg="warning.200" color="warning.400">
โ˜บ
</Center>
<Center bg="danger.base" color="danger.900">
โ˜บ
</Center>
<Center bg="danger.200" color="danger.400">
โ˜บ
</Center>
</HStack>

Bootstrap

Use the background and color utilities to apply system colors.

live

<div class="hstack gap-200">
<div
class="bg-neutral-800 text-neutral-0 w-size-400 h-size-400 d-flex align-items-center justify-content-center"
>
โ˜บ
</div>
<div
class="bg-primary-200 text-primary-400 w-size-400 h-size-400 d-flex align-items-center justify-content-center"
>
โ˜บ
</div>
<div
class="bg-success text-success-900 w-size-400 h-size-400 d-flex align-items-center justify-content-center"
>
โ˜บ
</div>
<div
class="bg-warning text-warning-900 w-size-400 h-size-400 d-flex align-items-center justify-content-center"
>
โ˜บ
</div>
<div
class="bg-warning-200 text-warning-400 w-size-400 h-size-400 d-flex align-items-center justify-content-center"
>
โ˜บ
</div>
<div
class="bg-danger text-danger-900 w-size-400 h-size-400 d-flex align-items-center justify-content-center"
>
โ˜บ
</div>
<div
class="bg-danger-200 text-danger-400 w-size-400 h-size-400 d-flex align-items-center justify-content-center"
>
โ˜บ
</div>
</div>


Copyright ยฉ 2025 Hover Inc. All Rights Reserved.