Color

In product design, color draws user attention to important information and then instantly conveys context about that information through consistent use of semantic meaning. The Forge color palette reflects athenahealth’s brand and adheres to best practices for accessibility and interface design.

The guidance for using Forge colors in your product is straightforward, but it’s important to follow it consistently for a cohesive user experience.

• Forge has several color palettes, each for a different purpose.
• Use each color palette for its designated purpose to create a consistent user experience.
• Forge uses semantic color names for clear communication between designers and developers.
• To implement Forge colors, use Sass maps, not CSS.

To create a consistent user experience, Forge has created guiding principles to define how color should be used. When designing with color, treat these principles as rules to follow: 

1. Embrace our neutral palette: Before adding secondary colors to a design, generously utilize the neutral colors in the Forge palette. In our streamlined EHRM, we rely on our neutrals to create a consistent experience that is balanced, easy to parse, and does not distract our users. Overuse of color incurs biological fatigue over time and can make communication less clear by co-opting attention. ​

2. Explore alternative signifiers: Instead of relying solely on color, explore other methods of semantically categorizing information. Utilize an inverse neutral palette, modified stroke weight, or other pattern breaking visual changes to convey divergent content before resorting to color alone.

3. Prioritize contrast: Place a strong emphasis on contrast when using color. Ensure that color combinations provide sufficient contrast to enhance readability and accessibility. Be conservative with color usage to prioritize contrast.

4. Always dual-code: When using color semantically, always dual-code by combining color with other visual elements, such as icons or labels, to ensure content belonging to a semantic or symbolic group is clearly understood. color alone to indicate a status or characteristic requires effort from users and is not inclusive to users with color processing differences.

5. Establish consistency: Use color consistently in local areas of your application, especially when used to communicate information like status or interactivity​. To maintain consistency, stick to the same semantic color associations within a localized context and always dual-code. This consistency creates a cohesive and intuitive user experience. In this context, local can be defined as application areas which a user will either:
   1. View on the same screen
   2. Access within the same workflow
   3. Repetitively navigate between within less than 90 seconds

We chose our color palette carefully, with these considerations:

• Accessibility: athenahealth products must meet certain accessibility standards, including contrast ratios specified by the Web Content Accessibility Guidelines (WCAG) 2.1 for text and background color combinations. Forge colors are Level AA compliant when used in proper combinations. NOTE: Per WCAG recommendations 'text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.'
• Meaning: Forge employs color sparingly and deliberately. Forge’s use of color conveys specific, intentional meaning, so no matter the product, screen, or workflow, users can easily understand the colors and their connotations.
• Consistency: Built on athenahealth’s brand colors, the Forge color palette is both familiar to users and flexible to meet a range of product design needs.

The colors and guidance on this page are categorized by use to help you create products that are aesthetically and functionally consistent. For a smooth design-dev handoff, design specifications should always use the semantic color name (like color-interaction, default or orchid-100) instead of hex or RGB values.

$color-interaction ← SASS map name

• default

  #0466B4
  rgb(4, 102, 180)
  map-get(forge-abstracts.$color-interaction, default)

• ← Semantic name (SASS map key)

  ← HEX color value
  ← RGB(A) color value
  ← SASS map variable access

Semantic category: color-alert

Forge components like InlineAlert, Modal, or Banner present information, messages, and alerts to users. Color helps communicate the type and severity of this information. Use the alert palette only for the corresponding alert types. These colors aren’t interchangeable with similar hues from other palettes.

• new

  #23A1BE
  rgb(35, 161, 190)
  map-get(forge-abstracts.$color-alert, new)

• success

  #118647
  rgb(17, 134, 71)
  map-get(forge-abstracts.$color-alert, success)

• info

  #9C28B1
  rgb(156, 40, 177)
  map-get(forge-abstracts.$color-alert, info)

• ** attention

  #F3A61C
  rgb(243, 166, 28)
  map-get(forge-abstracts.$color-alert, attention)

• *** critical

  #CA0D0D
  rgb(202, 13, 13)
  map-get(forge-abstracts.$color-alert, critical)

* color-alert, new can only be used as a text color for large font sizes (above 14 pt). It isn’t WCAG 2.1 AA compliant in small sizes against a light background.

** color-alert, attention shouldn’t be used as a text color. It isn’t WCAG 2.1 AA compliant against a light background.

*** color-alert, critical is a restricted color. Use it only for:

• Patient safety issues (anything that could result in patient harm)
• Business issues that could severely affect the financial health of a client (e.g., missing data that could endanger a hospital’s Medicare payments)

Semantic category: color-background

Use background colors to separate discrete sections of a page or to call attention to specific areas like side navigation panels.

• default

  #FFFFFF
  rgb(255, 255, 255)
  map-get(forge-abstracts.$color-background, default)

• * dark

  #DBDBDB
  rgb(219, 219, 219)
  map-get(forge-abstracts.$color-background, dark)

• * light

  #E9E9EA
  rgb(233, 233, 234)
  map-get(forge-abstracts.$color-background, light)

* color-background, dark and color-background, light are WCAG 2.1 AA compliant only when used with color-font, dark, color-font, default, and color-font, muted. Don’t use any other Forge font colors with these backgrounds.

Semantic category: color-border

Use border colors for outlines and dividers that help set page sections apart.

• default

  #B6B7B7
  rgb(182, 183, 183)
  map-get(forge-abstracts.$color-border, default)

• dark

  #5D5E5E
  rgb(93, 94, 94)
  map-get(forge-abstracts.$color-border, dark)

• light

  #DBDBDB
  rgb(219, 219, 219)
  map-get(forge-abstracts.$color-border, light)

• focus

  #0466B4
  rgb(4, 102, 180)
  map-get(forge-abstracts.$color-border, focus)

• focus-invert

  #D9EBFA
  rgb(217, 235, 250)
  map-get(forge-abstracts.$color-border, focus-invert)

Semantic category: color-brand

Use brand colors for global navigation and other branded elements.

Semantic category: color-font

Product copy must be legible and accessible. Use the font palette with Forge’s Typography guidelines for clear, compliant text.

• default

  #373738
  rgb(55, 55, 56)
  map-get(forge-abstracts.$color-font, default)

• dark

  #000000
  rgb(0, 0, 0)
  map-get(forge-abstracts.$color-font, dark)

• muted

  #5D5E5E
  rgb(93, 94, 94)
  map-get(forge-abstracts.$color-font, muted)

• * light

  #7C7D7D
  rgb(124, 125, 125)
  map-get(forge-abstracts.$color-font, light)

• ** disabled

  #B6B7B7
  rgb(182, 183, 183)
  map-get(forge-abstracts.$color-font, disabled)

• invert

  #FFFFFF
  rgb(255, 255, 255)
  map-get(forge-abstracts.$color-font, invert)

* color-font, light isn’t WCAG 2.1 AA compliant in most conditions. It’s compliant only when used in font-size, large, font-size, xlarge, or font-size, xxlarge on color-background, light or color-background, default. Given these constraints, use color-font, light for placeholder text only.

** color-font, disabled is WCAG 2.1 AA compliant only when used for disabled states. Per WCAG recommendations 'text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.' Don’t use this color for anything else.

Semantic category: color-interaction

Use interaction colors for interactive elements like Button or Paginator that move users through workflows and decision points.

• default

  #0466B4
  rgb(4, 102, 180)
  map-get(forge-abstracts.$color-interaction, default)

• select

  #043961
  rgb(4, 57, 97)
  map-get(forge-abstracts.$color-interaction, select)

• select-light

  #F0F9FF
  rgb(240, 249, 255)
  map-get(forge-abstracts.$color-interaction, select-light)

• hover-dark

  #005496
  rgb(0, 84, 150)
  map-get(forge-abstracts.$color-interaction, hover-dark)

• hover

  #D9EBFA
  rgb(217, 235, 250)
  map-get(forge-abstracts.$color-interaction, hover)

• * disabled

  #B6B7B7
  rgb(182, 183, 183)
  map-get(forge-abstracts.$color-interaction, disabled)

* color-interaction, disabled is WCAG 2.1 AA compliant only when used for disabled states. Per WCAG recommendations 'text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.' Don’t use this color for anything else.

Semantic category: color-shadow

Shadows provide depth for UI elements like Modal or Tooltip that appear above the underlying page content, and also emphasize other elements like Card or images. Unlike Forge’s other colors, our shadow colors use an alpha channel value to achieve a semi-transparent shadow effect that allows partial view of the elements below.

• default

  #000000, 25% opacity
  rgba(0, 0, 0, 0.25)
  map-get(forge-abstracts.$color-shadow, default)

• dark

  #000000, 40% opacity
  rgba(0, 0, 0, 0.4)
  map-get(forge-abstracts.$color-shadow, dark)

In the Forge palette, only alert colors are reserved for specific semantic uses. Due to the limited number of colors in the secondary palette, Forge does not reserve secondary colors for specific semantic uses. This means that a color used from the secondary palette to signify ‘cost’ related information can also be used to signify ‘scheduling’ information in a different area of athenaOne.

To successfully use secondary colors in your designs, Forge recommends adhering to the Forge Color Principles of:

• Embracing our neutral palette
• Always dual-coding
• Exploring alternative signifiers
• Establishing consistency

When using secondary colors semantically, Forge recommends reaching out to other designers with the same users as a way to ensure your color selections are cohesive with existing and upcoming designs.

Semantic category: color-secondary

Use this palette for interface elements like pictograms, illustrations, accent backgrounds, and highlights. Each color has a 4-tint ramp that provides a range of colors for accenting and distinguishing elements on the page.

We recommend against using -secondary-100 tints for text backgrounds. If you must, pair these tints with font colors that meet WCAG 2.1 AA contrast requirements:

• For orchid-100 and purple-100, use color-font, invert (#FFFFFF).
• For jungle-100 and citron-100, use color-font, dark (#000000).
• For all other -secondary-100 tints, use color-font, default (#373738).

Secondary colors have many uses, such as:

Pictograms, illustrations, and avatars: Forge uses the secondary palette for illustrations in EmptyState and throughout the Forge guide.

Avatar and signpost: Forge uses the secondary palette for emphasis in Avatar and Signpost

Tags: Forge uses the secondary palette for status style Tags in components like DataTable and throughout the Forge guide.

Other components, like Badge, InlineAlert, and Banner, are built on the color-alert palette: don’t use secondary colors in these components.

Accent backgrounds and highlights: The Forge guide also uses secondary colors for accents and highlights. Unlike the color-background palette, which can be used anywhere, the color-secondary palette is for less frequent accents, to subtly draw attention to an element (like Signpost). When using secondary colors to accent backgrounds in content, use the lightest tint (e.g., jungle-10) and check for compliance with WCAG 2.1 AA guidelines.

To enhance color usage, Forge has guiding principles for using color in data visualizations.

1. Only use color to enhance meaning and clarity in data visualizations: Color is most effective when used to enhance a visualization and is more effective for certain types of data vs. others. Not all visualizations need broad color usage.
2. Use caution when assigning meaning to a color or set of colors: There is no universal meaning for color: color is culturally bound. When assigning meaning to color, use the same selections for every chart.

Semantic category: color-dataviz

This palette expands the secondary palette to include a full ramp of 10 tints for each color, with a luminance range from 90 to 10.  Use these additional tints for data visualization applications, like divergent or sequential data, relationship charts, and trend graphs.

Please note, these colors are NOT WCAG AA standard compliant when used directly next to each other or used without the appropriate background color.

In addition to the expanded tint range, this palette:

• Uses color-dataviz, gray instead of color-secondary, neutral.
• Includes an additional color, color-dataviz, mariner. This color is very close to color-interaction, default, so use it mainly for categorical data visualization. (EmptyState is an exception: it uses this color for a clean, monochromatic look with the blue Button.)

Consider two aspects of representing data with color:

• The type of data being represented (nominal, ordinal, interval, ratio)
• The scale being used to represent it (categorical, sequential, divergent).

The table below provides recommendations for using color to address both of these aspects.

Use color to convey meaning

Use caution when assigning meaning to a color or set of colors. Consider these guidelines when using color to convey meaning:

• There is no universal meaning for color: color is culturally bound.
• Reserve specific colors for specific categorical data used throughout a dashboard. For example, use the same hues for North, South, East, West on every chart.
• Reserve specific colors to highlight or emphasize data, and consistently apply those colors for that purpose throughout every visualization.

Use color sparingly

Most visualizations will be monochrome, reserving colors to emphasize data that needs users’ attention.

Reserve color (color hue) to distinguish among nominal categories of data

Use five or fewer colors for nominal categories.

Use color values to emphasize ordinality (a progression) of data.

Use a range of color values within the same hue to convey a progression (for ordinal and interval data) or divergence (for ordinal and ratio data) within data sets. Limit the range to five values.

Hex and RGB values on this page are for reference only. Don’t hard code hex or RGB values in CSS style rules: this creates CSS styles that are easy to break and hard to maintain. Instead, use the below tools:

Sass color maps are the best way to specify Forge colors in CSS. Use the Sass map-get function:

// Access Forge Sass variables 
@use '@athena/forge/sass/forge-abstracts'; 

.my-pill-box {  
  border: 1px solid map-get(forge-abstracts.$color-border, default);  
} 

If the Forge team changes the underlying color values, Sass color maps will use the new values, so you won’t have to update your code to use the new colors. However, if the Forge team deletes a color, the map-get will silently fail, returning nothing. It's for this reason that deleting colors is done with extreme caution, and is documented in the breaking change section of Forge's release notes.

Forge builds its design tokens and exports them in @athena/forge-shared. In particular, getSemanticColor() accepts a hyphenated string in the form of category-name, and returns the appropriate RGB value.

• Sass documentation: https://sass-lang.com/documentation

Related Sass variables:

• $color-alert
• $color-background
• $color-border
• $color-brand
• $color-font
• $color-interaction
• $color-shadow
• $color-secondary
• $color-dataviz