Colors
Semantic colors for your CSS, and the global base palette they point to.
Use the semantic colors in your CSS. Each one is named for its job, such as body text or a button background, and brand themes change what it points to, so your styles follow the brand the same way the components do.
.example {
color: var(--nbhd-color-text-primary);
background-color: var(--nbhd-color-surface-secondary);
}Inside an inverse section, use the --nbhd-context-color-* version of a token, such as --nbhd-context-color-text-primary. It switches to the inverse color automatically. See Surfaces.
The base palette further down holds the raw colors the semantic tokens point to. Use a base color only when no semantic color fits, because base colors don’t change with the brand.
Semantic colors
Use these in your CSS. Each one is named for its job and changes with the brand.
Brand
The brand’s main colors. Most other roles point to these.
| Color | Hex | Token / CSS |
|---|---|---|
| Primary |
color.brand.primary
|
|
| Secondary |
color.brand.secondary
|
Text
Body copy, secondary text and accents.
| Color | Hex | Token / CSS |
|---|---|---|
| Primary |
color.text.primary
|
|
| Secondary |
color.text.secondary
|
|
| Subtle |
color.text.subtle
|
|
| Accent |
color.text.accent
|
Surface
Section and component backgrounds.
| Color | Hex | Token / CSS |
|---|---|---|
| Primary |
color.surface.primary
|
|
| Secondary |
color.surface.secondary
|
|
| Inverse |
color.surface.inverse
|
|
| Inverse secondary |
color.surface.inverseSecondary
|
|
| Highlight |
color.surface.highlight
|
Link
Inline text links and their states.
| Color | Hex | Token / CSS |
|---|---|---|
| Foreground |
color.link.foreground
|
|
| Decoration |
color.link.decoration
|
|
| Hover foreground |
color.link.hover.foreground
|
|
| Hover decoration |
color.link.hover.decoration
|
|
| Active foreground |
color.link.active.foreground
|
|
| Active decoration |
color.link.active.decoration
|
|
| Visited foreground |
color.link.visited.foreground
|
|
| Visited decoration |
color.link.visited.decoration
|
No colors match.
Action
Buttons and CTAs, by variant and state.
| Color | Hex | Token / CSS |
|---|---|---|
| Primary foreground |
color.action.primary.foreground
|
|
| Primary background |
color.action.primary.background
|
|
| Primary border |
color.action.primary.border
|
|
| Primary interactive |
color.action.primary.interactive
|
|
| Primary hover foreground |
color.action.primary.hover.foreground
|
|
| Primary hover background |
color.action.primary.hover.background
|
|
| Primary hover border |
color.action.primary.hover.border
|
|
| Primary active foreground |
color.action.primary.active.foreground
|
|
| Primary active background |
color.action.primary.active.background
|
|
| Primary active border |
color.action.primary.active.border
|
|
| Secondary foreground |
color.action.secondary.foreground
|
|
| Secondary background |
color.action.secondary.background
|
|
| Secondary border |
color.action.secondary.border
|
|
| Secondary interactive |
color.action.secondary.interactive
|
|
| Secondary hover foreground |
color.action.secondary.hover.foreground
|
|
| Secondary hover background |
color.action.secondary.hover.background
|
|
| Secondary hover border |
color.action.secondary.hover.border
|
|
| Secondary active foreground |
color.action.secondary.active.foreground
|
|
| Secondary active background |
color.action.secondary.active.background
|
|
| Secondary active border |
color.action.secondary.active.border
|
|
| Tertiary foreground |
color.action.tertiary.foreground
|
|
| Tertiary background |
color.action.tertiary.background
|
|
| Tertiary border |
color.action.tertiary.border
|
|
| Tertiary hover foreground |
color.action.tertiary.hover.foreground
|
|
| Tertiary hover background |
color.action.tertiary.hover.background
|
|
| Tertiary hover border |
color.action.tertiary.hover.border
|
|
| Tertiary active foreground |
color.action.tertiary.active.foreground
|
|
| Tertiary active background |
color.action.tertiary.active.background
|
|
| Tertiary active border |
color.action.tertiary.active.border
|
|
| Plain foreground |
color.action.plain.foreground
|
|
| Plain background |
color.action.plain.background
|
|
| Plain border |
color.action.plain.border
|
|
| Plain hover foreground |
color.action.plain.hover.foreground
|
|
| Plain hover background |
color.action.plain.hover.background
|
|
| Plain hover border |
color.action.plain.hover.border
|
|
| Plain active foreground |
color.action.plain.active.foreground
|
|
| Plain active background |
color.action.plain.active.background
|
|
| Plain active border |
color.action.plain.active.border
|
|
| Link foreground |
color.action.link.foreground
|
|
| Link background |
color.action.link.background
|
|
| Link border |
color.action.link.border
|
|
| Link hover foreground |
color.action.link.hover.foreground
|
|
| Link hover background |
color.action.link.hover.background
|
|
| Link hover border |
color.action.link.hover.border
|
|
| Link active foreground |
color.action.link.active.foreground
|
|
| Link active background |
color.action.link.active.background
|
|
| Link active border |
color.action.link.active.border
|
No colors match.
Control
Form fields, by state.
| Color | Hex | Token / CSS |
|---|---|---|
| Foreground |
color.control.foreground
|
|
| Background |
color.control.background
|
|
| Border |
color.control.border
|
|
| Placeholder |
color.control.placeholder
|
|
| Hover foreground |
color.control.hover.foreground
|
|
| Hover background |
color.control.hover.background
|
|
| Hover border |
color.control.hover.border
|
|
| Focus foreground |
color.control.focus.foreground
|
|
| Focus background |
color.control.focus.background
|
|
| Focus border |
color.control.focus.border
|
|
| Selected foreground |
color.control.selected.foreground
|
|
| Selected background |
color.control.selected.background
|
|
| Selected border |
color.control.selected.border
|
|
| Selected indicator |
color.control.selected.indicator
|
|
| Disabled foreground |
color.control.disabled.foreground
|
|
| Disabled background |
color.control.disabled.background
|
|
| Disabled border |
color.control.disabled.border
|
|
| Invalid foreground |
color.control.invalid.foreground
|
|
| Invalid background |
color.control.invalid.background
|
|
| Invalid border |
color.control.invalid.border
|
|
| Success foreground |
color.control.success.foreground
|
|
| Success background |
color.control.success.background
|
|
| Success border |
color.control.success.border
|
|
| Track inactive |
color.control.track.inactive
|
|
| Track active |
color.control.track.active
|
No colors match.
Interactive
Small interactive parts such as carousel dots and pagination.
| Color | Hex | Token / CSS |
|---|---|---|
| Default |
color.interactive.default
|
|
| Hover |
color.interactive.hover
|
|
| Active |
color.interactive.active
|
Accent
Highlights that aren’t a full brand color.
| Color | Hex | Token / CSS |
|---|---|---|
| Primary |
color.accent.primary
|
|
| Secondary |
color.accent.secondary
|
Focus
The keyboard focus outline. See Focus.
| Color | Hex | Token / CSS |
|---|---|---|
| Outline |
color.focus.outline
|
Selection
Text the user has highlighted.
| Color | Hex | Token / CSS |
|---|---|---|
| Foreground |
color.selection.foreground
|
|
| Background |
color.selection.background
|
Spinner
The loading spinner.
| Color | Hex | Token / CSS |
|---|---|---|
| Background |
color.spinner.background
|
Overlay
The dark layer behind dialogs and over media. Pair it with an opacity token.
| Color | Hex | Token / CSS |
|---|---|---|
| Overlay |
color.overlay
|
Neutral
| Color | Hex | Token / CSS |
|---|---|---|
| Neutral0 |
base.color.neutral.0
|
|
| Neutral50 |
base.color.neutral.50
|
|
| Neutral100 |
base.color.neutral.100
|
|
| Neutral200 |
base.color.neutral.200
|
|
| Neutral300 |
base.color.neutral.300
|
|
| Neutral400 |
base.color.neutral.400
|
|
| Neutral500 |
base.color.neutral.500
|
|
| Neutral600 |
base.color.neutral.600
|
|
| Neutral700 |
base.color.neutral.700
|
|
| Neutral800 |
base.color.neutral.800
|
|
| Neutral900 |
base.color.neutral.900
|
|
| Neutral1000 |
base.color.neutral.1000
|
No colors match.
Blue
| Color | Hex | Token / CSS |
|---|---|---|
| Blue50 |
base.color.blue.50
|
|
| Blue100 |
base.color.blue.100
|
|
| Blue200 |
base.color.blue.200
|
|
| Blue300 |
base.color.blue.300
|
|
| Blue400 |
base.color.blue.400
|
|
| Blue500 |
base.color.blue.500
|
|
| Blue600 |
base.color.blue.600
|
|
| Blue700 |
base.color.blue.700
|
|
| Blue800 |
base.color.blue.800
|
|
| Blue900 |
base.color.blue.900
|
No colors match.
Green
| Color | Hex | Token / CSS |
|---|---|---|
| Green50 |
base.color.green.50
|
|
| Green100 |
base.color.green.100
|
|
| Green200 |
base.color.green.200
|
|
| Green300 |
base.color.green.300
|
|
| Green400 |
base.color.green.400
|
|
| Green500 |
base.color.green.500
|
|
| Green600 |
base.color.green.600
|
|
| Green700 |
base.color.green.700
|
|
| Green800 |
base.color.green.800
|
|
| Green900 |
base.color.green.900
|
No colors match.
Red
| Color | Hex | Token / CSS |
|---|---|---|
| Red50 |
base.color.red.50
|
|
| Red100 |
base.color.red.100
|
|
| Red200 |
base.color.red.200
|
|
| Red300 |
base.color.red.300
|
|
| Red400 |
base.color.red.400
|
|
| Red500 |
base.color.red.500
|
|
| Red600 |
base.color.red.600
|
|
| Red700 |
base.color.red.700
|
|
| Red800 |
base.color.red.800
|
|
| Red900 |
base.color.red.900
|
No colors match.
Yellow
| Color | Hex | Token / CSS |
|---|---|---|
| Yellow50 |
base.color.yellow.50
|
|
| Yellow100 |
base.color.yellow.100
|
|
| Yellow200 |
base.color.yellow.200
|
|
| Yellow300 |
base.color.yellow.300
|
|
| Yellow400 |
base.color.yellow.400
|
|
| Yellow500 |
base.color.yellow.500
|
|
| Yellow600 |
base.color.yellow.600
|
|
| Yellow700 |
base.color.yellow.700
|
|
| Yellow800 |
base.color.yellow.800
|
|
| Yellow900 |
base.color.yellow.900
|
No colors match.