Color

As a general rule, SKY UX uses color to convey meaning and not as pure decoration. You should rarely apply colors directly to elements because components incorporate colors as necessary. If a need for color arises outside of a component, you likely need for to create a component for that scenario.

Background, border, and text colors are derived from base colors through tinting and shading. Colors for information visualizations such as graphs are available in the palette component.

For text, ensure that the contrast between the text color and the background color is at least 4.5:1 to meet Web Content Accessibility Guidelines 2.0 level AA.
Usage

Indicates primary or highlighted actions and states.

Code
$bb-color-blue
Styling
  • Hex: #1c84c6
  • RGB: R28, G132, B198
Usage

Calls out key elements on a page or indicates success.

Code
$bb-color-green
Styling
  • Hex: #1ab394
  • RGB: R26, G179, B148
Usage

Provides an accent color to add visual emphasis.

Code
$bb-color-aqua
Styling
  • Hex: #23c6c8
  • RGB: R35, G198, B200
Usage

Provides an accent color to add visual emphasis or indicate caution.

Code
$bb-color-yellow
Styling
  • Hex: #f8ac59
  • RGB: R248, G172, B89
Usage

Provides an accent color to add visual emphasis or indicate danger.

Code
$bb-color-red
Styling
  • Hex: #ed5565
  • RGB: R237, G85, B101
Usage

Provides the base font color in SKY UX.

Code
$text-color
Styling
  • Hex: #292a2b
  • RGB: R41, G42, B43