Moen Flo
DraftMoen Flo brand theme: color palettes and semantic token mapping.
Brand palettes
Core
Cream
Light Blue
Deep Blue
Navy
Interactive Blue
Light Red
White
Hot cold
Hot Red
Warm Purple
Cool Blue
Green
Green
Dark Green
Light Green
Neutral
Cool Gray
Light Gray
Gray
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
|
moenFlo.color.white |
#FFFFFF |
| Brand primary |
color.brand.primary
|
moenFlo.color.deepBlue |
#1B365D |
| Brand secondary |
color.brand.secondary
|
moenFlo.color.lightBlue |
#DBF1F9 |
| Text primary |
color.text.primary
|
color.brand.primary |
#1B365D |
| Control success foreground |
color.control.success.foreground
|
moenFlo.color.darkGreen |
#007D2B |
| Control success background |
color.control.success.background
|
moenFlo.color.lightGreen |
#E6F7EB |
| Control success border |
color.control.success.border
|
moenFlo.color.darkGreen |
#007D2B |
| Surface secondary |
color.surface.secondary
|
color.brand.secondary |
#DBF1F9 |
| Surface inverse secondary |
color.surface.inverseSecondary
|
color.brand.primary |
#1B365D |
| Focus outline |
color.focus.outline
|
moenFlo.color.interactiveBlue |
#0074E8 |
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 |
|---|---|---|---|
| Denim | "Denim", "Segoe UI", "Tahoma", "Geneva", "Verdana", sans-serif |
moenFlo.font.family.denim
|
Display, Headline, 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) |
3rem |
— | 700 |
1.2 |
— |
Headline |
var(--nbhd-typography-headline-fontFamily) |
1.5rem |
2.125rem |
700 |
1.2 |
— |
Subheading |
var(--nbhd-typography-subheading-fontFamily) |
1.125rem |
— | 700 |
1.3 |
— |
Eyebrow |
var(--nbhd-typography-eyebrow-fontFamily) |
0.8125rem |
— | 700 |
1.4 |
5px |
Body |
var(--nbhd-typography-body-fontFamily) |
1rem |
— | 400 |
1.5 |
— |
Body Small |
var(--nbhd-typography-bodySmall-fontFamily) |
0.875rem |
— | 400 |
1 |
— |
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) |
0.6875rem |
0.6875rem |
700 |
1 |
2px |
Control |
var(--nbhd-typography-control-fontFamily) |
1.125rem |
— | 500 |
1 |
— |
Badge |
var(--nbhd-typography-badge-fontFamily) |
0.625rem |
— | 700 |
1 |
— |