Color

About

The color section in _brand.yml is used to define the brand’s color palette and theme colors, allowing you to codify your brand’s palette with minimal overhead and to map these colors to semantic theme fields.

Structure

The color section in _brand.yml consists of two main parts.

palette: A set of named colors specific to the brand.
Theme colors: Semantic color assignments for various UI elements.

You can approach creating a _brand.yml from your brand guidelines in two steps:

First, define the available brand colors in color.palette.
Then, map the brand colors to theme colors in the color section.

Examples

Example with Palette

This example first defines the brand’s color palette and then maps the brand’s colors to theme elements by reference:

_brand.yml

color:
  palette:
    white: "#FFFFFF"
    black: "#151515"
    blue: "#447099"
    orange: "#EE6331"
    green: "#72994E"
    teal: "#419599"
    burgundy: "#9A4665"

  foreground: black
  background: white
  primary: blue
  secondary: "#707073"
  tertiary: "#C2C2C4"
  success: green
  info: teal
  warning: orange
  danger: burgundy
  light: white
  dark: "#404041"

Notice that we can refer to blue and green directly. brand.yml will automatically replace these named values with the corresponding value from color.palette, color.palette.blue and color.palette.green respectively.

Minimal Example

Of course, you can also skip creating a brand color palette and pick theme colors directly.

_brand.yml

color:
  foreground: "#151515"
  background: "#FFFFFF"
  primary: "#447099"
  secondary: "#707073"
  tertiary: "#C2C2C4"
  success: "#72994E"
  info: "#419599"
  warning: "#EE6331"
  danger: "#9A4665"
  light: "#FFFFFF"
  dark: "#404041"

Attributes

palette

The palette attribute is a nested mapping of color names to color string values (hex colors are recommended).

_brand.yml

color:
  palette:
    blue: "#447099"
    orange: "#EE6331"
    gray: "#404041"

These named colors can be referenced in other parts of the color section and in any color or background-color attributes in the typography section of the _brand.yml file.

Some brands have creative names for colors, such as lava, mint, and mustard, and you’re welcome to use these names in your palette. However, many tools — of which Bootstrap is one — use common color names, like red, green, yellow, etc.

If your brand includes create color names, we recommend you create aliases within palette to map your brand’s color names to common color names:

_brand.yml

meta:
  name Mixpanel
  link: https://brand.mixpanel.com
color:
  palette:
    lava: "#FF7557"
    mint: "#80E1D9"
    mustard: "#F8BC3B"
    red: lava
    green: mint
    yellow: mustard

Theme Colors

Other than palette, the remaining attributes in color are used to map brand colors to semantic theme colors. These theme colors can then be used in web apps and reports by tools that support brand.yml to maintain a consistent color scheme across the brand.

Name	Description
`foreground`	The main text color. Typically will be close to black and must have high contrast with the background color.
`background`	The main background color. Tyically will be close to white and must have high contrast with the foreground color.
`primary`	The primary accent color, used for hyperlinks, active states, and primary action buttons.
`secondary`	The secondary accent color, often used for lighter text or disabled states.
`tertiary`	The tertiary accent color, used for hover states, accents, and wells.
`success`	The color used for positive or successful actions and information.
`info`	The color used for neutral or informational actions and information.
`warning`	The color used for warning or cautionary actions and information.
`danger`	The color used for errors, dangerous actions, or negative information.
`light`	A bright color, used as a high-contrast foreground color on dark elements or low-contrast background color on light elements.
`dark`	A dark color, used as a high-contrast foreground color on light elements or high-contrast background color on light elements.

Additional Features

Automatic Color Definitions

For specific output formats, the brand color palette will be automatically made available. For example, in HTML/Bootstrap settings, this would create $brand-{name} (Sass) and --brand-{name} (CSS) variables for each color in the palette.

Referencing Palette Colors

Colors defined in the palette can be referenced by name in other parts of the color section:

_brand.yml

color:
  palette:
    blue: "#447099"
  primary: blue

This approach allows for easy reuse of colors and maintains consistency throughout the brand definition.

Using Brand Colors in Typography

Colors defined in the color section can also be used by reference in any color and background-color attributes in the typography section:

_brand.yml

color:
  palette:
    blue: "#447099"
    burgundy: "#9A4665"
  primary: blue

typography:
  headings:
    color: primary
  link:
    color: burgundy