Color
- inprogress
Todo:
- Some guidelines about color and how we use it.
- Swatches need better grouping e.g. "Primary/Secondary brand colors", "Interface colors".
-
Green 05
#e3fff3$color-green-05
-
Green 10
#d1ffee$color-green-10
-
Green 20
#b3ffe3$color-green-20
-
Green 30
#88ffd1$color-green-30
-
Green 40
#54ffbd$color-green-40
-
Green 50
#3fe1b0$color-green-50
-
Green 60
#2ac3a2$color-green-60
-
Green 70
#008787$color-green-70
-
Green 80
#005e5e$color-green-80
-
Green 90
#08403f$color-green-90
-
Blue 05
#aaf2ff$color-blue-05
-
Blue 10
#80ebff$color-blue-10
-
Blue 20
#00ddff$color-blue-20
-
Blue 30
#00b3f4$color-blue-30
-
Blue 40
#0090ed$color-blue-40
-
Blue 50
#0060df$color-blue-50
-
Blue 60
#0250bb$color-blue-60
-
Blue 70
#054096$color-blue-70
-
Blue 80
#073072$color-blue-80
-
Blue 90
#09204d$color-blue-90
-
Violet 05
#e7dfff$color-violet-05
-
Violet 10
#d9bfff$color-violet-10
-
Violet 20
#cb9eff$color-violet-20
-
Violet 30
#c689ff$color-violet-30
-
Violet 40
#ab71ff$color-violet-40
-
Violet 50
#9059ff$color-violet-50
-
Violet 60
#7542e5$color-violet-60
-
Violet 70
#592acb$color-violet-70
-
Violet 80
#45278d$color-violet-80
-
Violet 90
#321c64$color-violet-90
-
Purple 05
#f7e2ff$color-purple-05
-
Purple 10
#f6b8ff$color-purple-10
-
Purple 20
#f68fff$color-purple-20
-
Purple 30
#f770ff$color-purple-30
-
Purple 40
#d74cf0$color-purple-40
-
Purple 50
#b833e1$color-purple-50
-
Purple 60
#952bb9$color-purple-60
-
Purple 70
#722291$color-purple-70
-
Purple 80
#4e1a69$color-purple-80
-
Purple 90
#2b1141$color-purple-90
-
Pink 05
#ffdef0$color-pink-05
-
Pink 10
#ffb4db$color-pink-10
-
Pink 20
#ff8ac5$color-pink-20
-
Pink 30
#ff6bba$color-pink-30
-
Pink 40
#ff4aa2$color-pink-40
-
Pink 50
#ff298a$color-pink-50
-
Pink 60
#e31587$color-pink-60
-
Pink 70
#c60084$color-pink-70
-
Pink 80
#7f145b$color-pink-80
-
Pink 90
#50134b$color-pink-90
-
Red 05
#ffdfe7$color-red-05
-
Red 10
#ffbdc5$color-red-10
-
Red 20
#ff9aa2$color-red-20
-
Red 30
#ff848b$color-red-30
-
Red 40
#ff6a75$color-red-40
-
Red 50
#ff4f5e$color-red-50
-
Red 60
#e22850$color-red-60
-
Red 70
#c50042$color-red-70
-
Red 80
#810220$color-red-80
-
Red 90
#440306$color-red-90
-
Orange 05
#fff4de$color-orange-05
-
Orange 10
#ffd5b2$color-orange-10
-
Orange 20
#ffb587$color-orange-20
-
Orange 30
#ffa266$color-orange-30
-
Orange 40
#ff8a50$color-orange-40
-
Orange 50
#ff7139$color-orange-50
-
Orange 60
#e25920$color-orange-60
-
Orange 70
#cc3d00$color-orange-70
-
Orange 80
#9e280b$color-orange-80
-
Orange 90
#7c1504$color-orange-90
-
Yellow 05
#ffffcc$color-yellow-05
-
Yellow 10
#ffff98$color-yellow-10
-
Yellow 20
#ffea80$color-yellow-20
-
Yellow 30
#ffd567$color-yellow-30
-
Yellow 40
#ffbd4f$color-yellow-40
-
Yellow 50
#ffa436$color-yellow-50
-
Yellow 60
#e27f2e$color-yellow-60
-
Yellow 70
#c45a27$color-yellow-70
-
Yellow 80
#a7341f$color-yellow-80
-
Yellow 90
#960e18$color-yellow-90
-
Light Gray 05
#ffffff$color-light-gray-05
-
Light Gray 10
#f9f9fb$color-light-gray-10
-
Light Gray 20
#f0f0f4$color-light-gray-20
-
Light Gray 30
#e0e0e6$color-light-gray-30
-
Light Gray 40
#cfcfd8$color-light-gray-40
-
Light Gray 50
#bfbfc9$color-light-gray-50
-
Light Gray 60
#afafba$color-light-gray-60
-
Light Gray 70
#9f9fad$color-light-gray-70
-
Light Gray 80
#8f8f9e$color-light-gray-80
-
Light Gray 90
#80808f$color-light-gray-90
-
Dark Gray 05
#5b5b66$color-dark-gray-05
-
Dark Gray 10
#52525e$color-dark-gray-10
-
Dark Gray 20
#4a4a55$color-dark-gray-20
-
Dark Gray 30
#42414d$color-dark-gray-30
-
Dark Gray 40
#3a3944$color-dark-gray-40
-
Dark Gray 50
#32313c$color-dark-gray-50
-
Dark Gray 60
#2b2a33$color-dark-gray-60
-
Dark Gray 70
#23222b$color-dark-gray-70
-
Dark Gray 80
#1c1b22$color-dark-gray-80
-
Dark Gray 90
#15141a$color-dark-gray-90
-
Marketing Gray 10
#f9f9fa$color-marketing-gray-10
-
Marketing Gray 20
#ededf0$color-marketing-gray-20
-
Marketing Gray 30
#cdcdd4$color-marketing-gray-30
-
Marketing Gray 40
#b1b1bc$color-marketing-gray-40
-
Marketing Gray 50
#9595a2$color-marketing-gray-50
-
Marketing Gray 60
#7a7a8b$color-marketing-gray-60
-
Marketing Gray 70
#5e5e72$color-marketing-gray-70
-
Marketing Gray 80
#42425a$color-marketing-gray-80
-
Marketing Gray 90
#1f2033$color-marketing-gray-90
-
Marketing Gray 99
#20123a$color-marketing-gray-99
-
Ink 05
#393473$color-ink-05
-
Ink 10
#342f6d$color-ink-10
-
Ink 20
#312a64$color-ink-20
-
Ink 30
#2e255d$color-ink-30
-
Ink 40
#2b2156$color-ink-40
-
Ink 50
#291d4f$color-ink-50
-
Ink 60
#271948$color-ink-60
-
Ink 70
#241541$color-ink-70
-
Ink 80
#20123a$color-ink-80
-
Ink 90
#1d1133$color-ink-90
-
Black
#000000$color-black
-
White
#ffffff$color-white
-
Link
#0060df$color-link
-
Link:Hover
#0250bb$color-link-hover
-
Link:Visited
#b833e1$color-link-visited
-
Link:Visited:Hover
#952bb9$color-link-visited-hover
-
Mozilla Neon Blue
#00ffff$color-moz-neon-blue
-
Mozilla Lemon Yellow
#fff44f$color-moz-lemon-yellow
-
Mozilla Warm Red
#ff4f5e$color-moz-warm-red
-
Mozilla Neon Green
#54ffbd$color-moz-neon-green
-
Mozilla Dark Purple
#6e008b$color-moz-dark-purple
-
Mozilla Dark Green
#005e5e$color-moz-dark-green
-
Mozilla Dark Blue
#00458b$color-moz-dark-blue
-
Mozilla Dark Gray
#959595$color-moz-dark-gray
-
Mozilla Light Gray
#e7e5e2$color-moz-light-gray