Herman 4.0.2

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)

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 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%,
    ),
  '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

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

$theme-colors

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

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 #b81e6c hsl(330, 72%, 42%)
underline #edc7da hsl(330, 51%, 85%)
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)