Skip Navigation

Color Palette

Guidelines & Colors

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

Create Prominence
Use bolder colors to draw the eye and create visual prominence.
Reinforce Intuitiveness
Use colors in a consistent, logical manner to reinforce their connotation from one context to the next.
Convey Meaning
Reserve colors for specific contexts, as they carry associated meaning.

Primary Colors

The following colors anchor the appearance of Sabre interfaces and utilize variable names ($color-name) in the Spark code. To access color implementation information, visit the Updating to Katana section on the Developer Resources page.

Sabre’s Brand

Brand Red

$sabre-red

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 unique hue variation in the extended palette should be used for error messaging and critical actions, for visual distinction from brand red.
Prominent Focal Points

Select Blue

$blue-60

Select Blue is a strong color that draws attention to elements on the screen. Since it creates visual prominence and establishes focal points, like showing the current location in Menus, 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.
Strong Calls to Action

Katana Black

$katana-black

Black was chosen over Brand Red as the primary action color, due to red’s bias towards negative actions. It has a strong visual weight that draws the eye to it. Due to its high level of contrast, Katana Black is reserved for elements of highest importance, like headers, primary action buttons and price text.
Bright Foundations

White

$white

White provides a strong base for most components, giving optimum contrast to all elements inside panels and other containers; though, it’s still necessary to ensure text or icons meet an appropriate level of contrast for accessibility. White also allows Spark’s extended colors to display prominently, even at the lightest color steps.

Extended Colors

Spark’s extended color palette includes 5 standard colors along with tints and shades of each:

Blue variable name list

  • $blue-10
  • $blue-20
  • $blue-30
  • $blue-40
  • $blue-50
  • $blue-60
  • $blue-70
  • $blue-80
  • $blue-90
  • $blue-100

Green variable name list

  • $green-10
  • $green-20
  • $green-30
  • $green-40
  • $green-50
  • $green-60
  • $green-70
  • $green-80
  • $green-90
  • $green-100

Yellow variable name list

  • $yellow-10
  • $yellow-20
  • $yellow-30
  • $yellow-40
  • $yellow-50
  • $yellow-60
  • $yellow-70
  • $yellow-80
  • $yellow-90
  • $yellow-100

Red variable name list

  • $red-10
  • $red-20
  • $red-30
  • $red-40
  • $red-50
  • $red-60
  • $red-70
  • $red-80
  • $red-90
  • $red-100

Gray variable name list

  • $gray-10
  • $gray-20
  • $gray-30
  • $gray-40
  • $gray-50
  • $gray-60
  • $gray-70
  • $gray-80
  • $gray-90
  • $gray-100

Color Usage Guidelines

Extended palette colors should be used in the following ways:

  • Use Blue to indicate when something is selected or to highlight neutral information. Blue is also used for - Text Buttons and Links.
  • Use Green for positive and successful messaging or indicators.
  • Use Yellow to warn users about scenarios that benefit from added prominence but are less critical than errors that require action.
  • Use Red for errors and invalid situations that require users to take action.
  • Use Gray 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.

Accessible Color System

Spark makes it easy to choose accessible color pairs with it’s color system. Each color family has 10 steps defined in values 10 through 100. White and Katana Black sit outside these steps and take on the values 5 and 105 respectively.

Subtracting any two values regardless of color family determines whether that pair passes as follows:
  • A result of 50+ passes WCAG AA for standard text
  • A result of 40+ passes WCAG AA for large text

Accessible

$katana-black text (105) passes on background steps 50 and below

Accessible

$white text (5) passes on background steps 60 and above.

$gray-80 text passes accessibility contrast on $gray-30 backgrounds and below

Not Accessible

$gray-80 text fails accessibility contrast on $gray-40 backgrounds and above
A $blue-70 background passes accessibility contrast with text colors $blue-20 and below
A $blue-70 background fails accessibility contrast with text colors $blue-30 and above

Other Examples

background: $blue-80
$blue-40, bold, 25px
$blue-30, regular, 16px

80 - 30 = 50. On a background with value 80 using any color with value 30 and below will pass for standard text. For large text, any color with value 40 and below will pass (80 - 40 = 40).

background: $gray-20
$red-60, bold, 25px
$red-70, regular, 16px

70 - 20 = 50. On a background with value 20 using any color with value 70 and above will pass for standard text. For large text, any color with value 30 and above will pass (70 - 30 = 40).

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: