$brand-colors (Map)
scss
$brand-colors: (
'_brand-main': hsl(1, 100%, 41%),
'_brand-accent': hsl(42, 59%, 61%),
'_brand-gray': '#_brand-main'
(
'desaturate': 90%,
),
);The brand is defined by our primary brand blue, along with secondary pink and orange base colors.
Color Previews
_brand-main
#d10300
rgb(209, 3, 0)
hsl(1, 100%, 41%)
_brand-accent
#d6b361
rgb(214, 179, 97)
hsl(42, 59%, 61%)
_brand-gray
#735e5e
rgb(115, 94, 94)
hsl(0, 10%, 41%)
$shade-colors (Map)
scss
$shade-colors: shades-of($brand-colors, 4);Tints and shades of the brand colors.
Color Previews
_brand-main-dark-4
#460100
rgb(70, 1, 0)
hsl(1, 100%, 14%)
_brand-main-dark-3
#a30200
rgb(163, 2, 0)
hsl(1, 100%, 32%)
_brand-main-dark-2
#d10300
rgb(209, 3, 0)
hsl(1, 100%, 41%)
_brand-main-dark-1
#d51714
rgb(213, 23, 20)
hsl(1, 83%, 46%)
_brand-main-0
#dc3f3d
rgb(220, 63, 61)
hsl(1, 69%, 55%)
_brand-main-light-1
#e36866
rgb(227, 104, 102)
hsl(1, 69%, 65%)
_brand-main-light-2
#eb908f
rgb(235, 144, 143)
hsl(1, 70%, 74%)
_brand-main-light-3
#f2b8b8
rgb(242, 184, 184)
hsl(0, 69%, 84%)
_brand-main-light-4
#f9e1e0
rgb(249, 225, 224)
hsl(2, 68%, 93%)
_brand-accent-dark-4
#262011
rgb(38, 32, 17)
hsl(43, 38%, 11%)
_brand-accent-dark-3
#584a28
rgb(88, 74, 40)
hsl(43, 38%, 25%)
_brand-accent-dark-2
#8a743f
rgb(138, 116, 63)
hsl(42, 37%, 39%)
_brand-accent-dark-1
#bd9e56
rgb(189, 158, 86)
hsl(42, 44%, 54%)
_brand-accent-0
#d6b361
rgb(214, 179, 97)
hsl(42, 59%, 61%)
_brand-accent-light-1
#dbbc74
rgb(219, 188, 116)
hsl(42, 59%, 66%)
_brand-accent-light-2
#e4ce99
rgb(228, 206, 153)
hsl(42, 58%, 75%)
_brand-accent-light-3
#eee0be
rgb(238, 224, 190)
hsl(42, 59%, 84%)
_brand-accent-light-4
#f8f2e3
rgb(248, 242, 227)
hsl(43, 60%, 93%)
_brand-gray-dark-4
#261f1f
rgb(38, 31, 31)
hsl(0, 10%, 14%)
_brand-gray-dark-3
#594949
rgb(89, 73, 73)
hsl(0, 10%, 32%)
_brand-gray-dark-2
#735e5e
rgb(115, 94, 94)
hsl(0, 10%, 41%)
_brand-gray-dark-1
#7e6b6b
rgb(126, 107, 107)
hsl(0, 8%, 46%)
_brand-gray-0
#958585
rgb(149, 133, 133)
hsl(0, 7%, 55%)
_brand-gray-light-1
#ab9e9e
rgb(171, 158, 158)
hsl(0, 7%, 65%)
_brand-gray-light-2
#c1b8b8
rgb(193, 184, 184)
hsl(0, 7%, 74%)
_brand-gray-light-3
#d8d2d2
rgb(216, 210, 210)
hsl(0, 7%, 84%)
_brand-gray-light-4
#eeecec
rgb(238, 236, 236)
hsl(0, 6%, 93%)
$contrast-colors (Map)
scss
$contrast-colors: (
'contrast-light': #fff,
'contrast-dark': color('#_brand-gray-dark-4'),
);The light and dark contrast colors act as the high and low range of our palette. These colors should not be dynamic.
Color Previews
contrast-light
#ffffff
rgb(255, 255, 255)
hsl(0, 0%, 100%)
contrast-dark
#261f1f
rgb(38, 31, 31)
hsl(0, 10%, 14%)
$theme-colors (Map)
scss
$theme-colors: (
'background': '#contrast-light',
'text': '#contrast-dark',
'text-light': '#_brand-gray-dark-2',
'border': '#_brand-gray-0',
'border-light': '#_brand-gray-light-3',
'action': '#_brand-main',
'action-hover': '#_brand-main-dark-4',
'accent': '#_brand-accent',
'accent-light': '#_brand-accent-light-4',
'quote': '#_brand-accent-light-2',
'verse': hsl(22, 59%, 85%),
'active': '#_brand-main-light-4',
);Main theme colors will be set as relative CSS variables – applying the above colors to more specific use-cases. This map should not include any color-adjustments.
Color Previews
background
#ffffff
rgb(255, 255, 255)
hsl(0, 0%, 100%)
text
#261f1f
rgb(38, 31, 31)
hsl(0, 10%, 14%)
text-light
#735e5e
rgb(115, 94, 94)
hsl(0, 10%, 41%)
border
#958585
rgb(149, 133, 133)
hsl(0, 7%, 55%)
border-light
#d8d2d2
rgb(216, 210, 210)
hsl(0, 7%, 84%)
action
#d10300
rgb(209, 3, 0)
hsl(1, 100%, 41%)
action-hover
#5f1615
rgb(95, 22, 21)
hsl(1, 64%, 23%)
accent
#d6b361
rgb(214, 179, 97)
hsl(42, 59%, 61%)
accent-light
#f8f2e3
rgb(248, 242, 227)
hsl(43, 60%, 93%)
quote
#e4ce99
rgb(228, 206, 153)
hsl(42, 58%, 75%)
verse
#efd3c2
rgb(239, 211, 194)
hsl(23, 58%, 85%)
active
#f9e1e0
rgb(249, 225, 224)
hsl(2, 68%, 93%)