Herman 2.0.0

Herman Config: Color Palettes

This page contains documentation of the colors used by Herman. We use OddBird’s Accoutrement-Color module to store and manage colors directly in Sass map objects.

For help documenting your brand colors, see the “Documenting Colors” page.

Related

Accoutrement Color [external]

$brand-colors (map)

scss
$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).

Color Previews

brand-orange #c75000 hsl(24, 100%, 39%)
brand-blue #0d7fa5 hsl(195, 85%, 35%)
brand-pink #aa0e5c hsl(330, 85%, 36%)

$neutral-colors

scss
$neutral-colors: (
  'light-gray': 'brand-blue' ('tint': 80%, 'desaturate': 80%),
  'gray': 'brand-blue' ('desaturate': 80%),
  'black': 'brand-blue' ('shade': 30%, '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

light-gray #dedede hsl(0, 0%, 87%)
gray #555b5e hsl(200, 5%, 35%)
black #3b4042 hsl(197, 6%, 25%)

$theme-colors

scss
$theme-colors: (
  'theme-dark': 'brand-blue',
  'theme-light': 'brand-blue' ('tint': 80%),

  'background': #fff,
  'text': 'black',
  '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

theme-dark,  focus,  code #0d7fa5 hsl(195, 85%, 35%)
theme-light,  callout #cfe5ed hsl(196, 45%, 87%)
background #ffffff hsl(0, 0%, 100%)
text #3b4042 hsl(197, 6%, 25%)
text-light,  border #555b5e hsl(200, 5%, 35%)
action #aa0e5c hsl(330, 85%, 36%)
underline #eac3d6 hsl(331, 48%, 84%)
border-light #dedede hsl(0, 0%, 87%)
shadow #555b5e hsla(200, 5%, 35%, 0.5)
slight #fafcfd hsl(200, 43%, 99%)
code-shadow #0d7fa5 hsla(195, 85%, 35%, 0.2)

$system-colors

scss
$system-colors: (
  'contrast-light': 'background',
  'contrast-dark': 'text',
);

Colors used by accoutrement-color to calculate contrast ratios.

Color Previews

contrast-light #ffffff hsl(0, 0%, 100%)
contrast-dark #3b4042 hsl(197, 6%, 25%)