Color Guidelines

Purposeful

Our palettes are used to convey meaning to the information they present.

Brings Attention

Color, when used with purpose and sparingly, brings attention to the important parts.

Accessible

Colors should be readable and supplement the presentation of information.

BodyText Colors

Layout Colors

Action Colors

Status Colors

Contrast

When using color, it is strongly encouraged to meet minimum contrast ratios with text and background colors. At minimum, text contrast should meet the WCAG 2.0 AA Large guidelines.

Icon Exception

Icons are able to be one color shade below the WCAG AA guidelines. This means that icons can be Neutral 80 on a white background. This should be avoided with icon-only interfaces and with small icons.

Interactive States

Hover

Hover states are typically one shade lighter on dark background colors, and one shade darker on light background colors.

Active and Focus

A blue border is typically used to indicate both focus and active states.

Disabled

In general, the disabled state is denoted with a 60% opacity applied to the element. It is also common for elements to be greyscaled.

Primary Color Palette

Blue

Blue is used to denote primary and most interactive elements on the page.

Neutral

Neutral shades represent the foundation of interfaces. They are used to represent most a page's layout, information, and non-interactive elements.

System Colors

Red

Red is used to indicate negative trends, critical/error messages, and destructive events. It should be used sparingly on high priority situations. Lower priority warnings should utilize yellow.

Yellow

Yellow is used to indicate warnings that users should be aware of, but do not require immediate action.

Green

Green is used to indicate positive trends, success, and on states.

Extended Colors

Extended colors give designers additional options in novel UI situations and visual design. These colors can be used to describe UI elements with many potential options (such as Avatars and Tags), in data visualizations, illustrations, and user generated content.

Blue Grey

Blue Grey can be used to give subtle distinction from neutrals and blues. It should not be used to indicate disabled states.

Orange

Cyan

Cyan can be used as an accent color in data visualizations and illustrations.

Purple

Purple can be used to denote info, particularly on non-interactive elements.

Magenta

Magenta can be used as an accent color in data visualizations and illustrations.

Tokens and CSS Utilities

Anvil uses Tokens to manage its colors. Tokens act as variables in our design system, allowing us to avoid hard-coding hex values, and letting us use the colors in multiple contexts. In development, this can be used to easily apply background and text colors.

Token Examples

const items = [
    { color: <BodyText><span className="dot bg-blue-400"/>Blue</BodyText>, token: "colorBlue400", Hex: "#2270ee", CSSbg: "bg-blue-400", CSSc: "c-blue-400" },
    { color: <BodyText><span className="dot bg-neutral-400"/>Black</BodyText>, token: "colorNeutral400", Hex: "#141414", CSSbg: "bg-neutral-400", CSSc: "c-blue-400" },
    { color: <BodyText><span className="dot bg-neutral-90"/>Grey</BodyText>, token: "colorNeutral90", Hex: "#737475", CSSbg: "bg-neutral-90", CSSc: "c-neutral-90" },
    { color: <BodyText><span className="dot bg-blue-grey-300"/>Blue Grey</BodyText>, token: "colorBlueGrey300", Hex: "#b4c1c8", CSSbg: "bg-blue-grey-300", CSSc: "c-blue-grey-90" },
];
render (
  <>
    <style>{`.dot { width: 10px; height: 10px; border-radius: 50%; display:inline-block; margin-right: 4px;  }`}</style>
    <DataList
      className="DocsTable"
      items={items}
      header={[
        <DataList.HeaderCell key={0} name="color" content="Color" />,
        <DataList.HeaderCell key={1} name="token" content="Token" />,
        <DataList.HeaderCell key={2} name="Hex" content="Hex" />,
        <DataList.HeaderCell key={3} name="CSSbg" content="CSS Background Utility" />,
        <DataList.HeaderCell key={4} name="CSSc" content="CSS Color Utility" />
      ]}
    />
  </>
)

The complete list of Token values for our color palette can be found in Storybook.