Web

Primary Web Colors

The primary brand colors were updated to meet accessibility standards and guidelines defined by WCAG 2.1. Please note that Slate is the same as the FM Slate brand color, but Fire Dark and Teal are web-safe versions of FM Fire and FM Sea.

Secondary Web Colors

Secondary brand colors are incorporated throughout the design to provide depth and highlight important pieces of content. Please note that Slate Dark and Slate Light are the same as our brand colors FM Slate Dark and FM Slate Light.

Gray Web Colors

Gray tones are used to separate content blocks and soften the background throughout the experience.

UI

UI colors are only used to highlight success, error and alert states. Do not use for any other purpose.

In keeping with the rest of the Foundation Medicine brand, GT Sectra and Gotham are the typefaces used in our website design. Heading and body copy styling has been accounted for on light and dark backgrounds to ensure legibility and accessibility. Larger font sizes have been edited for better readability on mobile screens.

Primary sans serif: gotham

Primary serif: GT Sectra

Primary buttons incorporate Fire Dark and Slate as the main color on light backgrounds, and use a white outline on dark backgrounds (pictured below). Primary buttons on dark backgrounds incorporate a white stroke and text. Secondary buttons on light backgrounds incorporate Fire Dark as an outline. Disabled buttons should appear inactive and not interactive.

INLINE TEXT LINKS

Inline text links on light backgrounds receive a 1px Fire Dark underline. On hover, the text changes to Fire Dark and the underline grows to 2px. Inline text links on dark backgrounds receive a 1px Yellow Muted underline. On hover, the text changes to Yellow Muted and the underline grows to 2px.

BUTTON LINKS

Button links on light backgrounds appear in Fire Dark or Slate. On hover and focus, the accompanying icon shifts left or right. Button links on dark backgrounds appear in white to ensure proper legibility.

Input fields receive labels above each field to ensure proper accessibility.

Dropdowns receive labels above each input to ensure proper accessibility.

Accordions appear on dark backgrounds and use Yellow Muted iconography to indicate expand and collapse functions.

Modals appear on a light background, they include a modal headline description, footer and a CTA button. They can also include interactive elements with images and other links.

Tabs appear on a light background and must have a label and description. The design mimics file tabs for easy recognition and a green bar as indicator above the selected tab label.

Alerts must include a title and description. Alerts appear on a different color background according to their type. Red for warnings, green for success and slate gray for a general notice.