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

Default BodyText

Neutral400#141414

Subdued BodyText

Neutral90#737475

Link

Blue400#2270ee

Layout Colors

Page Background

Neutral0#ffffff

Alt Background

Neutral10#fcfcfc

Accent

Neutral40#f5f5f5

Border

Neutral60#dfe0e1

Global Header

Neutral300#2d2e31

Action Colors

Primary Action

Blue400#2270ee

Neutral Action

Neutral50#eeeeee

Negative Action

Red500#e63717

Status Colors

Critical

Red400#f94d32

Warning

Yellow400#ffc902

Success

Green500#18a761

Info

Blue400#2270ee

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.

Black on White

Neutral90 on White

White on Blue400

Neutral90 on Neutral40

Neutral80 on White

White on Yellow

Black on Red400

Black on Blue400

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.

Default State Items

Disabled Versions

Primary Color Palette

Blue

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

Blue100#ecf4fd

Blue200#a9d1ff

Blue300#3684f5

Blue400#2270ee

Blue500#1360d9

Blue600#004cc3

Neutral

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

Neutral0#ffffff

Neutral10#fcfcfc

Neutral20#fafafa

Neutral30#f7f7f7

Neutral40#f5f5f5

Neutral50#eeeeee

Neutral60#dfe0e1

Neutral70#bcbcbd

Neutral80#9e9ea0

Neutral90#737475

Neutral100#606162

Neutral200#444445

Neutral300#2d2e31

Neutral400#141414

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.

Red100#ffece9

Red200#ffb2a0

Red300#ff745f

Red400#f94d32

Red500#e63717

Red600#bf2a00

Yellow

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

Yellow100#fff9e2

Yellow200#fff0b1

Yellow300#ffe278

Yellow400#ffc902

Yellow500#ffbe00

Yellow600#de9500

Green

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

Green100#e1fdef

Green200#90efc0

Green300#60dfa6

Green400#1fbc70

Green500#18a761

Green600#10864b

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.

Blue-grey100#eaeff2

Blue-grey200#d0d8dd

Blue-grey300#b4c1c8

Blue-grey400#8c9ca5

Blue-grey500#6a7a85

Blue-grey600#576671

Orange

Orange100#fff2dc

Orange200#ffcc80

Orange300#ffa23a

Orange400#ff9116

Orange500#ee8400

Orange600#df7600

Cyan

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

Cyan100#e3fcff

Cyan200#b1f3fa

Cyan300#13ceea

Cyan400#08bfdf

Cyan500#0ca5c0

Cyan600#038299

Purple

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

Purple100#f1edff

Purple200#c1b6f2

Purple300#8772e5

Purple400#6954c0

Purple500#4f3a9e

Purple600#422799

Magenta

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

Magenta100#fbeaf5

Magenta200#faafe2

Magenta300#d949a9

Magenta400#b52d88

Magenta500#982071

Magenta600#7d165b

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.