Skip Navigation

Color Palette

Guidelines & Colors

Color plays a very intentional role in our language and is leveraged throughout Spark to:

  • Create Prominence: Bolder colors are used to draw the eye and create visual prominence.
  • Reinforce Intuitiveness: Color is used in a consistent and logical manner to reinforce its connotation from one context to the next. For example, Primary Action Green should only be used for elements that the user can click and interact with.
  • Convey Meaning: Specific colors in the palette carry an associated meaning and should be reserved for contexts related to that meaning. For example, Error Red should only be used to communicate critical issues and/or actions.

Primary Colors

Brand Red

Hex #E50000

Red is Sabre’s primary brand color, and should only be used in relation to the Sabre logo.

As a result of red’s association with errors and critical actions, brand red should not be used in any UI elements. A darker variation should be used for error messaging and critical actions, for visual distinction from brand red.

Stand-Out Slate

Hex #4A5767

Stand-Out Slate is a strong color that draws attention to elements on the screen. Since it creates visual prominence and establishes focal points, it should be used in an intentional and sparing manner. It also provides a neutral color that does not carry a connotation of positive or negative.

Slate is used for wayfinding (to show the current location in Panel Menus), headings, and indicating progress.

Primary Action Green

Hex #23826F

Green was chosen to replace the Brand Red as the primary action color, due to red’s bias towards negative actions. It has a strong visual weight and carries an appropriate level of prominence to draw the eye to it.

This green is reserved for primary action buttons and clickable elements only.

Page Gray

Hex #E4E4E4

Page gray softens the page while providing additional contrast for white container components like panels and tables.

When placing text or icons directly on this background, be sure to meet an appropriate level of contrast for accessibility.

Secondary & Background Colors

Secondary colors are to be used for all static (non-actionable) elements, such as backgrounds, informational icons, and text. These colors focus more on clarity and readability, and less on conveying prominence and specific meanings.

  • Hex #FFFFFF
  • Hex #EEEEEE
  • Hex #E4E4E4
  • Hex #DDDDDD
  • Hex #CCCCCC
  • Hex #A1A1A1
  • Hex #767676
  • Hex #666666
  • Hex #555555
  • Hex #333333
  • Hex #222222

Tertiary & Accent Colors

Tertiary colors are used for links and various states on most components, for visual guidance.

Link Blue
Hex #006BA8

Highlight Blue
Hex #E2EAF3

Focus Blue
Hex #A2B5CC

Focus Green
Hex #ABDED4

Messaging Colors

Messaging colors have been selected to convey the appropriate level of severity while also being prominent enough to stand out within the interface.

Error Red

Hex #AC0000

Text Error Red

Hex #AC0000

Error Red, a darker version of primary red, informs the user that they have provided invalid information and need to make necessary changes.

Brand Red should never be used for error messaging since it is directly tied to the Sabre Brand.

Warning Yellow

Background: Hex #F9B646
Text: Hex #663812

Text Warning Yellow

Hex #99541C

Warning Yellow informs the user they may have forgotten to fill in a field or have provided partially incorrect information.

Unlike the Error Red, Warning Yellow can be used in less critical scenarios in which optional information may help the user.

Success Green

Hex #5E8120

Text Success Green

Hex #55761B

Success Green notifies the user that they have entered something successfully. The green is different from primary green to reinforce that the item is not actionable.

Neutral Blue

Hex #4A5767

Text Neutral Blue

Hex #4A5767

Neutral Blue may be used for messages that do not have an explicit positive or negative association.

Data Visualization Colors

Data visualization colors are an extension of the existing color palette and should not be used in standard UI elements. There are four types of palettes defined for data visualization:

Accessibility and Color Contrast

Our language has been designed to meet WCA (Web Content Accessibility) standards. To meet these standards, text and interactive elements less than 14pt bold or 18pt normal should have a color contrast ratio of at least 4.5:1. Large text at or above these sizes should have a contrast ratio of at least 3:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.

If you choose to customize the palette, be sure to check contrast ratios when handling type if you are unsure.

We’ve provided a list of some acceptable color combinations that are Section 508 compliant foreground/background color contrast ratios.

Contrast Examples
Text Color Contrast per Background
#FFFFFF #EEEEEE #E4E4E4
#333333 12.6 10.9 9.9
#555555 7.5 6.4 5.9
#666666 5.7 4.9 4.5
#767676 4.5 3.9* 3.6*
#55761B 5.26 4.53 4.14*
#006BA8 5.7 4.9 4.5
#663812 9.82 8.46 7.72
#99541C 5.77 4.97 4.54

* Text color is acceptable for this background at the large text size.

Light to Dark Principle

When creating new elements with hover and on-click states, a general rule is to move in a light to dark progression. The lighter state serves as the static default style while the darker represents the engaged or on-click. The hover state is an intermediary of the two.

In the case of a button, for example, the word darkens indicating an action. The on-click state takes one step further in the spectrum and darkens the background, indicating the action has been executed.

When creating different UI states it is important to remember this progress principle as it contributes to the intuitiveness of the interface. Here are a few examples of this principle applied:

Light

Dark

Static



Hover



On-Click