Herman Config: Color Palettes
This page contains documentation of the colors used by Herman. We use OddBird’s Accoutrement Color plugin to store and manage colors directly in Sass map objects.
For help documenting your brand colors, see the “Documenting Colors” page.
Related
Accoutrement [external]
$brand-colors (map)
$brand-colors: (
'brand-orange': hsl(24, 100%, 39%),
'brand-blue': hsl(195, 85%, 35%),
'brand-pink': hsl(330, 85%, 48%)
(
'shade': 25%,
),
);
We use bright primary colors for the main brand, everything else is based on these colors. These are based on the OddBird brand colors, but using a darker shade of the OddBird pink.
These colors should be assigned to semantic theme-specific names before they are used in styling patterns and components.
Map Properties
'<color-name>': (Color | String | List)
Each <color-name>
key can be assigned a color
or previously-defined key,
followed by an optional map of adjustments
(as defined in
Accoutrement).
Color Previews
#c75000
hsl(24, 100%, 39%)
#0d7fa5
hsl(195, 85%, 35%)
#aa0e5c
hsl(330, 85%, 36%)
$neutral-colors
$neutral-colors: (
'light-gray': '#brand-blue'
(
'tint': 80%,
'desaturate': 80%,
),
'gray': '#brand-blue'
(
'desaturate': 80%,
),
'contrast-light': #fff,
'contrast-dark': '#brand-blue'
(
'shade': 30% #000,
'desaturate': 80%,
),
);
Use these neutral colors to create structure and hierarchy in the document. These colors should be assigned to semantic theme-specific names before they are used in styling patterns and components.
Color Previews
#dedede
hsl(0, 0%, 87%)
#555b5e
hsl(200, 5%, 35%)
#ffffff
hsl(0, 0%, 100%)
#3b4042
hsl(197, 6%, 25%)
$theme-colors
$theme-colors: (
'theme-dark': '#brand-blue',
'theme-light': '#brand-blue'
(
'tint': 80%,
),
'background': '#contrast-light',
'text': '#contrast-dark',
'text-light': '#gray',
'action': '#brand-pink',
'focus': '#theme-dark',
'underline': '#action'
(
'tint': 75%,
),
'border': '#gray',
'border-light': '#light-gray',
'shadow': '#gray'
(
'rgba': 0.5,
),
'callout': '#theme-light',
'slight': '#callout'
(
'tint': 90%,
),
'code': '#theme-dark',
'code-shadow': '#code'
(
'rgba': 0.2,
),
);
Rather than directly accessing and adjusting the explicitly named (e.g. “pink” or “gray”) brand and neutral colors, we assign them to semantic theme-specific names. These are the colors that should be used in our pattern/component styles.
Color Previews
#0d7fa5
hsl(195, 85%, 35%)
#cfe5ed
hsl(196, 45%, 87%)
#ffffff
hsl(0, 0%, 100%)
#3b4042
hsl(197, 6%, 25%)
#555b5e
hsl(200, 5%, 35%)
#b81e6c
hsl(330, 72%, 42%)
#edc7da
hsl(330, 51%, 85%)
#dedede
hsl(0, 0%, 87%)
#555b5e
hsla(200, 5%, 35%, 0.5)
#fafcfd
hsl(200, 43%, 99%)
#0d7fa5
hsla(195, 85%, 35%, 0.2)