Moen
The Moen specific foundations and tokens for the Neighborhood Design System.
Brand palettes
Core
Cream
Moen Light Blue
Deep Blue
Moen Light Red
White
Burnt Orange
Charcoal
Hot cold
Hot Red
Warm Purple
Cool Blue
Neutral
Grey 50
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Black
System
Focus Violet
Danger Red
Success Green
Warning Yellow
No colors match.
Semantic tokens
Which brand color each semantic role resolves to. Components reference the role, so they pick up the brand automatically.
Set by this brand
The semantic colors this brand changes. Every other color keeps the core default or follows one of these.
| Color | Token / CSS | Points to | Hex |
|---|---|---|---|
| Inverse foreground |
color.inverse.foreground
|
moen.color.white |
#FFFFFF |
| Brand primary |
color.brand.primary
|
moen.color.deepBlue |
#1B365D |
| Brand secondary |
color.brand.secondary
|
moen.color.lightBlue |
#DBF1F9 |
| Text primary |
color.text.primary
|
color.brand.primary |
#1B365D |
| Text secondary |
color.text.secondary
|
moen.color.grey400 |
#616161 |
| Text subtle |
color.text.subtle
|
moen.color.grey400 |
#616161 |
| Link foreground |
color.link.foreground
|
moen.color.orange |
#AB4824 |
| Link hover foreground |
color.link.hover.foreground
|
moen.color.orange |
#AB4824 |
| Control border |
color.control.border
|
moen.color.grey400 |
#616161 |
| Control disabled foreground |
color.control.disabled.foreground
|
moen.color.grey300 |
#979797 |
| Control invalid foreground |
color.control.invalid.foreground
|
moen.color.darkRed |
#D3161C |
| Control invalid border |
color.control.invalid.border
|
moen.color.darkRed |
#D3161C |
| Control success foreground |
color.control.success.foreground
|
moen.color.darkGreen |
#017C1F |
| Control success border |
color.control.success.border
|
moen.color.darkGreen |
#017C1F |
| Surface secondary |
color.surface.secondary
|
color.brand.secondary |
#DBF1F9 |
| Surface inverse secondary |
color.surface.inverseSecondary
|
color.brand.primary |
#1B365D |
| Focus outline |
color.focus.outline
|
moen.color.violet |
#4B3DC4 |
All semantic colors
Every semantic color as it resolves for this brand, grouped as on Colors.
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
|
Font families
The fonts this brand's text styles use. Each brand's fonts.css loads them; the tokens below decide where each one is used.
| Font | Stack | Token / CSS | Used by |
|---|---|---|---|
| Family | 'Family', serif |
moen.font.family.moenFamily
|
Display, Headline |
| Denim | "Denim", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif |
moen.font.family.denim
|
Subheading, Eyebrow, Body, Body Small, Label, Supporting, Action, Control, Badge |
Text styles
Each text style as it resolves for this brand. Hover a value to see its token.
| Style | Family | Size | Large screens | Weight | Line height | Letter spacing |
|---|---|---|---|---|---|---|
Display |
var(--nbhd-typography-display-fontFamily) |
2.875rem |
5.5rem |
400 |
1 |
— |
Headline |
var(--nbhd-typography-headline-fontFamily) |
2.25rem |
4rem |
400 |
1.3 |
— |
Subheading |
var(--nbhd-typography-subheading-fontFamily) |
1.5rem |
2rem |
400 |
1.3 |
— |
Eyebrow |
var(--nbhd-typography-eyebrow-fontFamily) |
0.75rem |
— | 500 |
1.3 |
5px |
Body |
var(--nbhd-typography-body-fontFamily) |
1rem |
— | 400 |
1.5 |
— |
Body Small |
var(--nbhd-typography-bodySmall-fontFamily) |
0.875rem |
— | 400 |
1.5 |
— |
Label |
var(--nbhd-typography-label-fontFamily) |
1rem |
— | 600 |
1 |
— |
Supporting |
var(--nbhd-typography-supporting-fontFamily) |
0.8125rem |
— | 400 |
1 |
— |
Action |
var(--nbhd-typography-action-fontFamily) |
1rem |
0.6875rem |
400 |
1 |
2px |
Control |
var(--nbhd-typography-control-fontFamily) |
0.8125rem |
— | 500 |
1 |
— |
Badge |
var(--nbhd-typography-badge-fontFamily) |
0.75rem |
— | 500 |
1.3 |
— |
Size
| Token | CSS Variable | Value |
|---|---|---|
size.container.max | var(--nbhd-size-container-max) | 1800px |
Spacing
Moen uses a 5px base spacing.
| Token | CSS Variable | Value |
|---|---|---|
base.space.0 | var(--nbhd-base-space-0) | 0 |
base.space.1 | var(--nbhd-base-space-1) | 5px |
base.space.2 | var(--nbhd-base-space-2) | 10px |
base.space.3 | var(--nbhd-base-space-3) | 15px |
base.space.4 | var(--nbhd-base-space-4) | 20px |
base.space.5 | var(--nbhd-base-space-5) | 25px |
base.space.6 | var(--nbhd-base-space-6) | 30px |
base.space.7 | var(--nbhd-base-space-7) | 35px |
base.space.8 | var(--nbhd-base-space-8) | 40px |
base.space.9 | var(--nbhd-base-space-9) | 45px |
base.space.10 | var(--nbhd-base-space-10) | 50px |
base.space.11 | var(--nbhd-base-space-11) | 55px |
base.space.12 | var(--nbhd-base-space-12) | 60px |
base.space.13 | var(--nbhd-base-space-13) | 65px |
base.space.14 | var(--nbhd-base-space-14) | 70px |
base.space.15 | var(--nbhd-base-space-15) | 75px |
base.space.16 | var(--nbhd-base-space-16) | 80px |
base.space.17 | var(--nbhd-base-space-17) | 85px |
base.space.18 | var(--nbhd-base-space-18) | 90px |
base.space.19 | var(--nbhd-base-space-19) | 95px |
base.space.20 | var(--nbhd-base-space-20) | 100px |
base.space.21 | var(--nbhd-base-space-21) | 105px |
base.space.22 | var(--nbhd-base-space-22) | 110px |
base.space.23 | var(--nbhd-base-space-23) | 115px |
base.space.24 | var(--nbhd-base-space-24) | 120px |
base.space.25 | var(--nbhd-base-space-25) | 125px |
base.space.26 | var(--nbhd-base-space-26) | 130px |
base.space.27 | var(--nbhd-base-space-27) | 135px |
base.space.28 | var(--nbhd-base-space-28) | 140px |
base.space.29 | var(--nbhd-base-space-29) | 145px |
base.space.30 | var(--nbhd-base-space-30) | 150px |
base.space.31 | var(--nbhd-base-space-31) | 155px |
base.space.32 | var(--nbhd-base-space-32) | 160px |
base.space.33 | var(--nbhd-base-space-33) | 165px |
base.space.34 | var(--nbhd-base-space-34) | 170px |
base.space.35 | var(--nbhd-base-space-35) | 175px |
base.space.36 | var(--nbhd-base-space-36) | 180px |
base.space.37 | var(--nbhd-base-space-37) | 185px |
base.space.38 | var(--nbhd-base-space-38) | 190px |
base.space.39 | var(--nbhd-base-space-39) | 195px |
base.space.40 | var(--nbhd-base-space-40) | 200px |
No spacing match.