Color Palette

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.

Color Usage Guidelines

Hex #E50000
RGB 229, 0, 0

Brand Red

Red is Sabre’s primary brand color.

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 of the primary red will be used for error messaging and critical actions in order to give these elements the appropriate level of affordance while also providing visual distinction from Sabre Brand Red.

Brand Red should only be used in relation to the Sabre logo, either as a red logo on a white background or a white logo on a red background.

Hex #23826F
RGB 35, 130, 111

Primary Action Green

Because red is biased toward negative actions, green was chosen to replace the Brand Red as the primary action color. It has a strong visual weight and carries an appropriate level of prominence to draw the eye to it.

In addition to being the color of primary action buttons, this green is reserved for elements in the interface that are clickable and/or have an action associated with it. Do not use this green to call attention to elements that the user can’t interact with.

Hex #4A5767
RGB 74, 87, 103

Stand-Out Slate

Similar to the Action Green, Stand-Out Slate is a strong color that draws attention to elements on the screen. The relative darker weight creates visual prominence and establishes focal points, and, as such, 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, indicating progress and sequences of buttons requiring more visual prominence than the secondary button treatment (see the Alternate Button pattern).

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.

Hex #AC0000
RGB 172, 0, 0

Text Error Red
Hex #AC0000
RGB 172, 0, 0

Error Red

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

Hex #CD8511
RGB 205, 133, 17

Text Warning Yellow
Hex #CD8511
RGB 205, 133, 17

Warning Yellow

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.

Hex #75A01F
RGB 117, 160, 31

Text Success Green
Hex #75A01F
RGB 117, 160, 31

Success Green

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.

Hex #4A5767
RGB 74, 87, 103

Text Neutral Blue
Hex #4A5767
RGB 74, 87, 103

Neutral Blue

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

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
    RGB 255, 255, 255
  • Hex #EEEEEE
    RGB 238, 238, 238
  • Hex #E4E4E4
    RGB 228, 228, 228
  • Hex #DDDDDD
    RGB 221, 221, 221
  • Hex #CCCCCC
    RGB 204, 204, 204
  • Hex #A1A1A1
    RGB 161, 161, 161
  • Hex #767676
    RGB 118, 118, 118
  • Hex #666666
    RGB 102, 102, 102
  • Hex #555555
    RGB 85, 85, 85
  • Hex #333333
    RGB 51, 51, 51
  • Hex #222222
    RGB 34, 34, 34

Tertiary & Accent Colors

Tertiary colors are an extension of the existing color palette and serve primarily in the context of data visualization. These colors should not be used in the UI elements.

Each tertiary color has three shades: light, medium, and dark. This allows for contrast between the shades, while creating a harmonious palette across hues.

Orange

#FF8D2E
#FFC694
#CC7025

Blue

#3399CC
#79CAF2
#1A4D66

Cyan

#5FE9EA
#099C9D
#074849

Green

#B0EA3B
#729135
#2E3D10

Purple

#804F92
#D0ABDE
#53335E

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


Accessibility & 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.

Here is a list of some acceptable color combinations that are Section 508 compliant foreground/background color contrast ratios:

Background Color: #FFF

Text Color Contrast Ratio
#767676 4.5
#666 5.7
#555 7.5
#333 12.6
#222 15.9
#23826F 4.7
#267DA9 4.5
#AC0000 7.6

Background Color: #EEE

Text Color Contrast Ratio
#666666 4.9
#555555 6.4
#333333 10.9
#222222 13.7
#207866 4.6
#AC0000 6.6

Background Color: #DDD

Text Color Contrast Ratio
#555555 5.5
#333333 9.3
#222222 11.7

Background Color: #23826F

Text Color
Contrast Ratio

#FFF

4.7

Background Color: #6F991C

Text Color
Contrast Ratio

#FFF

3.4

Background Color: #AC0000

Text Color
Contrast Ratio

#FFF

7.6

Background Color: #CD8511

Text Color
Contrast Ratio

#FFF

3.0

Background Color: #4A5767

Text Color
Contrast Ratio

#FFF

7.4

Background Color: #666

Text Color
Contrast Ratio

#FFF

5.7