Save up to 30%!
Colors
backgrounds
#FAFAFA
default
bg-default
#FFFFFF
bright
bg-bright
#454545
dim
bg-dim
#FFFD76
primary
bg-primary
#F6F5F1
accent
bg-accent
#F3F2EF
greige
bg-greige
#F6D0D6
blush
bg-blush
#E6A8B1
blush-dark
bg-blush-dark
#774B8B
lavender
bg-lavender
#FFF1F0
danger-bright
bg-danger-bright
#F5222D
danger-default
bg-danger-default
#EEBF46
ratings
bg-ratings
#E6F7FF
info
bg-info
#E0141F
discount
bg-discount
#ABBBAD
disturb
bg-disturb
#73D13D
success-bright
bg-success-bright
#52C41A
success-default
bg-success-default
#237804
success-dark
bg-success-dark
#EFEEEA
soft-bright
bg-soft-bright
#EDE9E3
soft-default
bg-soft-default
#E3E1D6
soft-dim
bg-soft-dim
#F0F5FF
water-bright
bg-water-bright
#D6E4FF
water-default
bg-water-default
#ADC6FF
water-dim
bg-water-dim
#597EF7
water-extradim
bg-water-extradim
#E98695
water-active
bg-water-active
#F6FFED
loyalty-bright
bg-loyalty-bright
#D9F7BE
loyalty-default
bg-loyalty-default
#B7EB8F
loyalty-dim
bg-loyalty-dim
#DCD6F1
laundry-bright
bg-laundry-bright
#C2B8E5
laundry-default
bg-laundry-default
#A58FD4
laundry-dim
bg-laundry-dim
#DCD6F1
laundry-single-color-bright
bg-laundry-single-color-bright
#C2B8E5
laundry-single-color-default
bg-laundry-single-color-default
#A58FD4
laundry-single-color-dim
bg-laundry-single-color-dim
#FFDAD9
laundry-single-delicate-bright
bg-laundry-single-delicate-bright
#FFC5C5
laundry-single-delicate-default
bg-laundry-single-delicate-default
#FDA3A3
laundry-single-delicate-dim
bg-laundry-single-delicate-dim
#D8EDFF
laundry-single-universal-bright
bg-laundry-single-universal-bright
#BADAF7
laundry-single-universal-default
bg-laundry-single-universal-default
#83C0F6
laundry-single-universal-dim
bg-laundry-single-universal-dim
#FFFFFF
laundry-single-sensitive-bright
bg-laundry-single-sensitive-bright
#BADAF7
laundry-single-sensitive-default
bg-laundry-single-sensitive-default
#629FD5
laundry-single-sensitive-dim
bg-laundry-single-sensitive-dim
#F9DCDA
cleaning-bright
bg-cleaning-bright
#F5C1C1
cleaning-default
bg-cleaning-default
#F3AEAE
cleaning-dim
bg-cleaning-dim
#E9FAE7
cleaning-single-kitchen-bright
bg-cleaning-single-kitchen-bright
#B2E6BD
cleaning-single-kitchen-default
bg-cleaning-single-kitchen-default
#94DEAD
cleaning-single-kitchen-dim
bg-cleaning-single-kitchen-dim
#FFE4E4
cleaning-single-bathroom-bright
bg-cleaning-single-bathroom-bright
#FFBEC0
cleaning-single-bathroom-default
bg-cleaning-single-bathroom-default
#FDA3A3
cleaning-single-bathroom-dim
bg-cleaning-single-bathroom-dim
#DCD6F1
cleaning-single-universal-bright
bg-cleaning-single-universal-bright
#C7BCEE
cleaning-single-universal-default
bg-cleaning-single-universal-default
#B6A4F7
cleaning-single-universal-dim
bg-cleaning-single-universal-dim
#ECF2DD
candles-single-summer-bright
bg-candles-single-summer-bright
#CFE79A
candles-single-summer-default
bg-candles-single-summer-default
#B6E255
candles-single-summer-dim
bg-candles-single-summer-dim
#FFDED7
candles-single-love-bright
bg-candles-single-love-bright
#FFB9A9
candles-single-love-default
bg-candles-single-love-default
#FF9B84
candles-single-love-dim
bg-candles-single-love-dim
#D8F7DF
candles-single-winter-morning-bright
bg-candles-single-winter-morning-bright
#A9E1B7
candles-single-winter-morning-default
bg-candles-single-winter-morning-default
#87DC9C
candles-single-winter-morning-dim
bg-candles-single-winter-morning-dim
#FFD6D7
candles-single-warm-welcome-bright
bg-candles-single-warm-welcome-bright
#EE9EA0
candles-single-warm-welcome-default
bg-candles-single-warm-welcome-default
#E08688
candles-single-warm-welcome-dim
bg-candles-single-warm-welcome-dim
#E9FAE7
kitchen-bright
bg-kitchen-bright
#B2E6BD
kitchen-default
bg-kitchen-default
#94DEAD
kitchen-dim
bg-kitchen-dim
#FFF7BE
natural-care-bright
bg-natural-care-bright
#B2E6BD
natural-care-default
bg-natural-care-default
#94DEAD
natural-care-dim
bg-natural-care-dim
#F0F0F0
low-contrast
bg-low-contrast
#D9D9D9
medium-contrast
bg-medium-contrast
#BFBFBF
high-contrast
bg-high-contrast
#141414
highest-contrast
bg-highest-contrast
texts
#141414
on-bright-high-contrast
text-on-bright-high-contrast
#595959
on-bright-medium-contrast
text-on-bright-medium-contrast
#8C8C8C
on-bright-low-contrast
text-on-bright-low-contrast
#FFFFFF
on-dim-high-contrast
text-on-dim-high-contrast
#FFFFFF
on-dim-medium-contrast
text-on-dim-medium-contrast
#FFFFFF
on-dim-low-contrast
text-on-dim-low-contrast
#F5222D
danger
text-danger
#F5222D
discount
text-discount
#52C41A
success
text-success
#0050B3
infotext
text-infotext
#597EF7
water
text-water
#135200
loyalty
text-loyalty
#FFFD76
primary
text-primary
#894D58
on-blush
text-on-blush
#774B8B
on-lavender
text-on-lavender
New Colors
new colors
#F6D0D6
pink-light
bg-pink-light
#E6A8B1
pink-bright
bg-pink-bright
#B9838D
pink-muted
bg-pink-muted
#EBE7F3
purple-light
bg-purple-light
#D2BCDB
purple-bright
bg-purple-bright
#9C8CA3
purple-muted
bg-purple-muted
#D2E1E9
blue-light
bg-blue-light
#B6D7EA
blue-bright
bg-blue-bright
#A0BED8
blue-muted
bg-blue-muted
#E3EADB
green-light
bg-green-light
#9AC3A0
green-bright
bg-green-bright
#89A8A4
green-muted
bg-green-muted
#F5F3EB
neutrals-light
bg-neutrals-light
#FEFAC5
neutrals-bright
bg-neutrals-bright
#D9BCA3
neutrals-muted
bg-neutrals-muted
#FFEEDE
peach-light
bg-peach-light
#F1AFA0
peach-bright
bg-peach-bright
#EFCCC4
peach-muted
bg-peach-muted
#F3F2EF
greige
bg-greige
Typography
display
The quick brown fox jumps over the lazy dog.
Name:
display-lg
Desktop:
72px/84px
Mobile:
32px/44px
The quick brown fox jumps over the lazy dog.
Name:
display-lg-light
Desktop:
72px/84px
Mobile:
32px/44px
The quick brown fox jumps over the lazy dog.
Name:
display-md
Desktop:
54px/64px
Mobile:
28px/40px
The quick brown fox jumps over the lazy dog.
Name:
display-md-light
Desktop:
54px/64px
Mobile:
28px/40px
headline
The quick brown fox jumps over the lazy dog.
Name:
headline-md
Desktop:
40px/48px
Mobile:
24px/32px
The quick brown fox jumps over the lazy dog.
Name:
headline-md-light
Desktop:
40px/48px
Mobile:
24px/32px
title
The quick brown fox jumps over the lazy dog.
Name:
title-lg
Desktop:
32px/40px
Mobile:
24px/32px
The quick brown fox jumps over the lazy dog.
Name:
title-md
Desktop:
24px/32px
Mobile:
20px/28px
The quick brown fox jumps over the lazy dog.
Name:
title-sm
Desktop:
20px/28px
Mobile:
16px/20px
body
The quick brown fox jumps over the lazy dog.
Name:
body-lg
Desktop:
24px/32px
Mobile:
20px/24px
The quick brown fox jumps over the lazy dog.
Name:
body-md
Desktop:
18px/28px
Mobile:
16px/24px
The quick brown fox jumps over the lazy dog.
Name:
body-sm
Desktop:
14px/24px
Mobile:
14px/20px
The quick brown fox jumps over the lazy dog.
Name:
body-xs
Desktop:
11px/16px
Mobile:
11px/16px
The quick brown fox jumps over the lazy dog.
Name:
body-lg-highlight
Desktop:
24px/32px
Mobile:
20px/24px
The quick brown fox jumps over the lazy dog.
Name:
body-md-highlight
Desktop:
18px/28px
Mobile:
16px/24px
The quick brown fox jumps over the lazy dog.
Name:
body-sm-highlight
Desktop:
14px/24px
Mobile:
14px/20px
The quick brown fox jumps over the lazy dog.
Name:
body-xs-highlight
Desktop:
11px/16px
Mobile:
11px/16px
The quick brown fox jumps over the lazy dog.
Name:
body-lg-link
Desktop:
24px/32px
Mobile:
20px/24px
The quick brown fox jumps over the lazy dog.
Name:
body-md-link
Desktop:
18px/28px
Mobile:
16px/24px
The quick brown fox jumps over the lazy dog.
Name:
body-sm-link
Desktop:
14px/24px
Mobile:
14px/20px
The quick brown fox jumps over the lazy dog.
Name:
body-xs-link
Desktop:
11px/16px
Mobile:
11px/16px
label
The quick brown fox jumps over the lazy dog.
Name:
label-lg
Desktop:
18px/24px
Mobile:
16px/24px
The quick brown fox jumps over the lazy dog.
Name:
label-md
Desktop:
14px/24px
Mobile:
14px/20px
The quick brown fox jumps over the lazy dog.
Name:
label-sm
Desktop:
11px/16px
Mobile:
11px/16px
Buttons
All variants exposed by the shared Button component.
Variants
default
default
minimal
small
large
primary
default
minimal
small
large
secondary
default
minimal
small
large
invert
default
minimal
small
large
premium
default
minimal
small
large
success
default
minimal
small
large
dashed
default
minimal
small
large
values
default
minimal
small
large
clear
default
minimal
small
large
Sizes
Widths
States
Disabled
default
minimal
small
large
Loading
default
minimal
small
large