Moen
The Moen specific foundations and tokens for the Neighborhood Design System.
Color Palette
Core
Cream
moen.color.cream
var(--nbhd-moen-color-cream)
#f5f3f1
Moen Light Blue
moen.color.lightBlue
var(--nbhd-moen-color-lightBlue)
#dbf1f9
Deep Blue
moen.color.deepBlue
var(--nbhd-moen-color-deepBlue)
#1b365d
Moen Light Red
moen.color.lightRed
var(--nbhd-moen-color-lightRed)
#fde9e7
White
moen.color.white
var(--nbhd-moen-color-white)
#ffffff
Hot Cold
Hot Red
moen.color.hotRed
var(--nbhd-moen-color-hotRed)
#f16755
Warm Purple
moen.color.warmPurple
var(--nbhd-moen-color-warmPurple)
#7ea9ef
Cool Blue
moen.color.coolBlue
var(--nbhd-moen-color-coolBlue)
#009ed7
Surface Colors
| Sample | Name | Token | CSS | Hex |
|---|---|---|---|---|
|
|
Primary |
moen.color.white
|
var(--nbhd-moen-color-white)
|
#ffffff |
|
|
Secondary |
moen.color.lightBlue
|
var(--nbhd-moen-color-lightBlue)
|
#dbf1f9 |
|
|
Tertiary |
moen.color.cream
|
var(--nbhd-moen-color-cream)
|
#f5f3f1 |
|
|
Inverse |
moen.color.deepBlue
|
var(--nbhd-moen-color-deepBlue)
|
#1b365d |
|
|
Inverse Secondary |
moen.color.deepBlue
|
var(--nbhd-moen-color-deepBlue)
|
#1b365d |
Size
| Token | CSS Variable | Value |
|---|---|---|
size.container.max
|
var(--nbhd-size-container-max)
|
1525px |
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 |
Font Family
| Token | CSS Variable | Value |
|---|---|---|
moen.font.family.denim
|
var(--nbhd-moen-font-family-denim)
|
'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif |
moen.font.family.denimBold
|
var(--nbhd-moen-font-family-denimBold)
|
'DenimBold', 'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif |
moen.font.family.moenFamily
|
var(--nbhd-moen-font-family-moenFamily)
|
'Family', serif |
Text Styles
Display
- Font Family
typography.display.family➝moen.font.family.moenFamily➝ 'Family', serif- Font Size
typography.display.size➝base.font.size.46➝ 2.875rem- Font Weight
typography.display.weight➝base.font.weight.500➝ 500- Line Height
typography.display.lineHeight➝base.font.lineHeight.100➝ 1- Font Size-bp Lg
typography.display.size-bpLg➝base.font.size.88➝ 5.5rem
Headline
- Font Family
typography.headline.family➝moen.font.family.moenFamily➝ 'Family', serif- Font Size
typography.headline.size➝base.font.size.36➝ 2.25rem- Font Weight
typography.headline.weight➝base.font.weight.400➝ 400- Line Height
typography.headline.lineHeight➝base.font.lineHeight.130➝ 1.3- Font Size-bp Lg
typography.headline.size-bpLg➝base.font.size.64➝ 4rem
Subheading
- Font Family
typography.subheading.family➝moen.font.family.denim➝ 'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif- Font Size
typography.subheading.size➝base.font.size.24➝ 1.5rem- Font Weight
typography.subheading.weight➝base.font.weight.400➝ 400- Line Height
typography.subheading.lineHeight➝base.font.lineHeight.130➝ 1.3- Font Size-bp Lg
typography.subheading.size-bpLg➝base.font.size.32➝ 2rem
Eyebrow
- Font Family
typography.eyebrow.family➝moen.font.family.denim➝ 'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif- Font Size
typography.eyebrow.size➝base.font.size.12➝ 0.75rem- Font Weight
typography.eyebrow.weight➝base.font.weight.500➝ 500- Line Height
typography.eyebrow.lineHeight➝base.font.lineHeight.130➝ 1.3
Body
- Font Family
typography.body.family➝moen.font.family.denim➝ 'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif- Font Size
typography.body.size➝base.font.size.16➝ 1rem- Font Weight
typography.body.weight➝base.font.weight.400➝ 400- Line Height
typography.body.lineHeight➝base.font.lineHeight.150➝ 1.5
Body Small
- Font Family
typography.bodySmall.family➝moen.font.family.denim➝ 'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif- Font Size
typography.bodySmall.size➝base.font.size.14➝ 0.875rem- Font Weight
typography.bodySmall.weight➝base.font.weight.400➝ 400- Line Height
typography.bodySmall.lineHeight➝base.font.lineHeight.150➝ 1.5
Label
- Font Family
typography.label.family➝moen.font.family.denim➝ 'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif- Font Size
typography.label.size➝base.font.size.16➝ 1rem- Font Weight
typography.label.weight➝base.font.weight.600➝ 600- Line Height
typography.label.lineHeight➝base.font.lineHeight.100➝ 1
Supporting
- Font Family
typography.supporting.family➝moen.font.family.denim➝ 'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif- Font Size
typography.supporting.size➝base.font.size.13➝ 0.8125rem- Font Weight
typography.supporting.weight➝base.font.weight.400➝ 400- Line Height
typography.supporting.lineHeight➝base.font.lineHeight.100➝ 1
Action
- Font Family
typography.action.family➝moen.font.family.denim➝ 'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif- Font Size
typography.action.size➝base.font.size.16➝ 1rem- Font Weight
typography.action.weight➝base.font.weight.400➝ 400- Line Height
typography.action.lineHeight➝base.font.lineHeight.100➝ 1- Font Size-bp Md
typography.action.size-bpMd➝base.font.size.16➝ 1rem
Control
- Font Family
typography.control.family➝moen.font.family.denim➝ 'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif- Font Size
typography.control.size➝base.font.size.13➝ 0.8125rem- Font Weight
typography.control.weight➝base.font.weight.500➝ 500- Line Height
typography.control.lineHeight➝base.font.lineHeight.100➝ 1
Badge
- Font Family
typography.badge.family➝moen.font.family.denim➝ 'Denim', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif- Font Size
typography.badge.size➝base.font.size.12➝ 0.75rem- Font Weight
typography.badge.weight➝base.font.weight.500➝ 500- Line Height
typography.badge.lineHeight➝base.font.lineHeight.130➝ 1.3