Color

The Comet design system applies color to set a visual tone, afford interaction, communicate meaning, distinguish products, and scaffold the interface with a range of predictable neutral tints.

Neutral Palette

The design system uses cool neutral grays – also referred to as “slates” – to establish a modern interface more attractive than an array of default grays. Use neutrals sparingly beyond essentials of text and background color, and avoid conveying many levels of hierarchy in many neutral tones.

  • Black
    AAA #262626 $comet-color-black
  • 15
    AAA #21242C $comet-color-neutral-15
  • 20
    AAA #2B303B $comet-color-neutral-20
  • 25
    AAA #363C49 $comet-color-neutral-25
  • 32
    AAA #404653 $comet-color-neutral-32
  • 38 (Deprecated)
    AA #535C70 $comet-color-neutral-38
  • 42
    AA #58627D $comet-color-neutral-42
  • 50
    AA18 #6C7893 $comet-color-neutral-50
  • 55
    AA18 #7B869D $comet-color-neutral-55
  • 65
    AA18 #98A1B3 $comet-color-neutral-65
  • 80
    AA #C4C9D4 $comet-color-neutral-80
  • 90
    AA #E2E4E9 $comet-color-neutral-90
  • 95
    AAA #F0F2F4 $comet-color-neutral-95
  • White
    AAA #FFFFFF $comet-color-white

Theming Palettes

Platform Blue

Use blue (also referred to as the default "platform" theme color) to afford interactivity in primary interactions like buttons, tabs, and links. You can also alter the interactive color to a product theme (see below).

  • Blue
    AA #3277B3 $comet-color-interactive-default
  • Dark
    AA #2D6A9F $comet-color-interactive-dark

Product Themes

Product theme colors are used to accent an individual product as distinct from the “platform” use of the interactive blue.. For example, Techbook products use custom green, orange, and purple hues for science, social studies, and math respectively. This accent color is primarily used to replace primary interactions and affordances. For more information, refer to Theming guidelines.

Science

Apply a green accent for the Techbook Science product.

  • Light
    AA18 #5D971C $comet-theme-product_science-color-light
  • Default
    AA #508118 $comet-theme-product_science-color-default
  • Dark
    AA #355610 $comet-theme-product_science-color-dark

Social Studies

Apply an orange accent for the Techbook Social Studies product.

  • Light
    AA18 #E0561F $comet-theme-product_social-studies-color-light
  • Default
    AA #C04A1A $comet-theme-product_social-studies-color-default
  • Dark
    AA #9D3C15 $comet-theme-product_social-studies-color-dark

Math

Apply a purple accent for the Techbook Math product.

  • Light
    AA18 #9161EA $comet-theme-product_math-color-light
  • Default
    AAA #4C17B0 $comet-theme-product_math-color-default
  • Dark
    AAA #3B1287 $comet-theme-product_math-color-dark

STEM

Apply an aqua accent for the STEM product.

  • Light
    DNP #3BC4AB $comet-theme-product_stem-color-light
  • Default
    AA #2C9481 $comet-theme-product_stem-color-default
  • Dark
    AA #237667 $comet-theme-product_stem-color-dark

Streaming, Comet

Apply alternative blue accents for the Streaming and Comet products.

  • Light
    AA18 #008EE6 $comet-theme-product_streaming-color-light
  • Default
    AA #0077C0 $comet-theme-product_streaming-color-default
  • Dark
    AA #005E99 $comet-theme-product_streaming-color-dark

Additional Themes

Contact the system team to establish additional themes for your products. During this process, we’ll work with you to identify a primary color harmonious with the primary palette, expand to dark and light variants, and apply it throughout your experience.

Feedback Palette

Use feedback colors to draw attention to an error, success, warning or other notable state. For more information, refer to Feedback guidelines.

  • Use the background variant to apply a background color to objects such as block messages.

Success

  • Background
    AA #DBF0DC $comet-background-color-feedback-success
  • Light
    AA18 #43A245 $comet-color-feedback-success-light
  • Default
    AA #357E36 $comet-color-feedback-success-default
  • Dark
    AA #265A26 $comet-color-feedback-success-dark

Error

  • Background
    AA #F9D4D2 $comet-background-color-feedback-error
  • Light
    AA #E0301E $comet-color-feedback-error-light
  • Default
    AA #B42818 $comet-color-feedback-error-default
  • Dark
    AA #9D2315 $comet-color-feedback-error-dark

Warning

  • Background
    AA #FAF4D1 $comet-background-color-feedback-warning
  • Light
    AA #F0DD75 $comet-color-feedback-warning-light
  • Default
    AA #E8CD30 $comet-color-feedback-warning-default
  • Dark
    AA #CFB317 $comet-color-feedback-warning-dark

New

  • Background
    AA #FFEACC $comet-background-color-feedback-new
  • Light
    AA #FFAA33 $comet-color-feedback-new-light
  • Default
    AA #FF9500 $comet-color-feedback-new-default
  • Dark
    AA18 #CC7700 $comet-color-feedback-new-dark

TEI Feedback

  • Correct
    AA18 #43A245 $comet-color-feedback-correct
  • Incorrect
    AA #E0301E $comet-color-feedback-incorrect

Badges

  • Notification
    AA #E0301E $comet-color-feedback-badge-notification

Assignment Palette

  • Not Started
    AA18 #008EE6 $comet-color-assignment-not-started
  • In Progress
    AA #FF9854 $comet-color-assignment-in-progress
  • Submitted
    AA #5257C0 $comet-color-assignment-submitted

Background Color

The Comet system offers four common neutral background colors to create a predictable setting to compose a user interface with accessible, consistent appearance.

Neutral Backgrounds

  • White
    AAA #FFFFFF $comet-color-white
    Use as the default canvas of main content and long form text.
  • Light
    AAA #E2E4E9 $comet-background-color-light
    Use to establish subtle contrast with a main content block, such as a right rail block or TEI within the flow of a Techbook concept.
  • Dark
    AAA #363C49 $comet-background-color-dark
    Use in low light settings, in canvases to create stark contrast or focus on an object, or to signal separate, distinct content in a new row of a scrolling page.
  • Black
    AAA #262626 $comet-color-black
    Use sparingly, such as for lightbox or backdrop for photographs and videos like the Player/Asset page. In most cases, prefer the cooler Dark Gray for background contrast relative to Cool Gray and White.

Themed Backgrounds

Avoid using themed colors as a background color, instead reserving such colors for accents and interactions. Nevertheless, there may be rare occasions such as a full canvas, large message, or full-bleed row where such displays may be warranted.

  • Platform
    AA #3277B3 $comet-color-blue-53
    Use platform blue sparingly as a background color, since it's reserved mainly for accents and interactive elements.
  • Product Theme
    AA #C04A1A $comet-theme-product_social-studies-color-default
    Example use of Social Studies product theme default color as a background.

When using a theme color as a background:

  • Always get approval for using a new theme color not already provided by the Comet design system.
  • In most cases, treat the theme color as a dark background, using light text (and white for links and inline error messages).
  • Ensure all text results in at least AA scored accessible contrast.
  • Use white as an alternate to the theme color’s use for primary interactions and accents.

Block Color Layering

As component displays become more complex, individual objects may use a background color distinct from a row or canvas background color. Such block colors are useful for distinguish an interaction, module (such as blocks on a right rail), and a collection of items (such as a grid of cards).

While Comet provides for a range of neutral color choices, the system offers optimized displays for light and dark colored blocks with sufficient and harmonious contrast with the four most common neutral backgrounds.

Use $comet-background-color-block-light (Neutral 95) as a light block background color for subtle contrast on white backgrounds and stark contrast on darker backgrounds. However, on light gray backgrounds, use $comet-color-white.

Figure: Light background in foreground Figure: Light background above varying backgrounds

Use $comet-background-color-block-dark (Neutral 42) as a dark block background color for subtle contrast on darker backgrounds and start contrast on lighter backgrounds.

Figure: Dark background in foreground Figure: Dark background above varying backgrounds

Examples: Buttons

Many icon buttons predictably can use a platform blue background color as a primary button or have a flat button appearance. However, secondary and tertiary buttons utilize the light and dark block colors, and swap their appearance in dark setting appropriately. For example, while dark by default, secondary buttons become light in dark settings.

Figure: Buttons across backgrounds Figure: Buttons across backgrounds

Example: Cards

The Card component offers both a light and dark background color for the content area containing the object’s title, description, and type. Therefore, no matter the setting, both variations achieve the subtle or stark contrast for each application. Note the exception for light cards on light backgrounds, using a white card content background.

Figure: Cards across backgrounds Figure: Cards across backgrounds

Input Controls

All form input objects – textbox, text area, radio button, checkbox, and other similar controls – use a white background surrounded by a conventional light gray border, regardless of background. This guarantees a predictable contrast and easy to acquire fields, despite their sometimes less “elegant and cool” appearance.

  • Do Image

    use standard background colors for input controls (such as a default textbox) as defined for forms, even in dark color backgrounds.

  • Do Image

    alter default background colors to create a “ghost” effect, even above a predictable background color or photo. This reduces findability and impedes usability.

Refer to variables in the form.styl file for specific text, foreground, and border colors used in forms.

Text Color

The Comet system offers an optimized, accessible system for applying color to text across varied settings. These conventions are woven into Comet components and should be used when applying color to custom designs.

Dark Text on Light Backgrounds

Role Color Token
Primary, essential text #363C49 $comet-text-color-primary-on-light
Secondary, supporting text #58627D $comet-text-color-secondary-on-light
Interactive, linked text #2D6A9F $comet-text-color-link-on-light
Inline error text #B42818 $comet-text-color-error-on-light
Disabled text #98A1B3 $comet-text-color-disabled

Light Text on Dark Backgrounds

Role Color Token
Primary, essential text #FFFFFF $comet-text-color-primary-on-dark
Secondary, supporting text #C4C9D4 $comet-text-color-secondary-on-dark
Interactive, linked text #FFFFFF $comet-text-color-link-on-dark
Inline error text #FFFFFF $comet-text-color-error-on-dark
Disabled text #98A1B3 $comet-text-color-disabled
  • Never use “Platform Blue” links on dark backgrounds, which offers very poor, inaccessible contrast.
  • Never use “Feedback Red” color for inline error text on dark backgrounds, which offers very poor, inaccessible contrast.

Border Color

Hairlines

Hairline borders are used to separate objects in collections.

Usage Color Token


On light backgrounds
#C4C9D4 $comet-border-hairline-on-light


On dark backgrounds
#58627d $comet-border-hairline-on-dark
  • Use hairlines very sparingly, usually to divide items in a vertical collection such as a list group or rows of a data table.
  • Avoid littering the interface with thin rules. Instead, favor whitespace to create contrast and separation between elements and components.
  • Avoid drawing a hairline around objects except when even a shadow is insufficient (typically, a white block on a white background).
  • Never use hairlines to separate passages of text or above/below headings. Use whitespace instead.

Contrast & Accessibility

Comet aims to meet WCAG standards for color contrast for all essential content, which is 4.5:1 for normal text and 3:1 for bold or larger text.

Score Contrast Ratio Result
AAA 7.0+:1 Passes WCAG 2.0 AAA
AA 4.5+:1 Passes WCAG 2.0 AA
AA18 3.0+:1 Passes WCAG 2.0 AA Large Text Only (18pt or 14pt bold)
DNP <3.0 DNP

The following table contrasts neutral background colors (as rows) with foreground type colors (as columns), revealing combinations that don't pass or pass at varying levels.

W 95 90 80 65 55 50 42 38 32 25 20 15 B
Background Foreground
B
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
15
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
20
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
25
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
32
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
38
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
42
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
50
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
55
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
65
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
80
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
90
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
95
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
W
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21
DNP 21