Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.

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 to create a component for that scenario.

Text

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
The default color for text
Code
$sky-text-color-default
Styling
#212327
Usage
De-emphasized text
Code
$sky-text-color-deemphasized
Styling
#686c73
Usage
Text on a dark background
Code
$sky-text-color-on-dark
Styling
#ffffff
Usage
Action-invoking elements such as links
Code
$sky-text-color-action-primary
Styling
#0974a1
Usage
Borderless icon buttons such as the expand/collapse chevron
Code
$sky-text-color-icon-borderless
Styling
#cdcfd2

Backgrounds

Usage
Background for elements that need to contrast with the containers they hold, such as a record page made up of tiles
Code
$sky-background-color-neutral-light
Styling
#eeeeef
Usage
Background for elements that invoke primary actions, such as a primary button
Code
$sky-background-color-primary-dark
Styling
#0974a1
Usage
Background for disabled interactive elements such as buttons
Code
$sky-background-color-disabled
Styling
#cdcfd2
Usage
Background for selected items within a list of items
Code
$sky-background-color-selected
Styling
#f1eef6
Usage
Background for elements that convey an "information" status, such as alerts, labels, and toasts
Code
$sky-background-color-info
Styling
#81d4f7
Usage
Background for less important elements that convey an "information" status, such as applied filter bubbles
Code
$sky-background-color-info-light
Styling
#c1e8fb
Usage
Background for elements that convey a "success" status, such as alerts, labels, and toasts
Code
$sky-background-color-success
Styling
#b7da9b
Usage
Background for elements that convey a "warning" status, such as alerts, labels, and toasts
Code
$sky-background-color-warning
Styling
#ffd597
Usage
Background for elements that convey a "danger" status, such as alerts, labels, and toasts
Code
$sky-background-color-danger
Styling
#f7a08f
Usage
Background for buttons that invoke a primary action that is destructive, such as deleting an item
Code
$sky-background-color-danger-dark
Styling
#d93a3d

Highlights

Usage
Highlight for elements that convey an "information" status, such as alerts, labels, and toasts
Code
$sky-highlight-color-info
Styling
#00b4f1
Usage
Highlight for elements that convey a "success" status, such as alerts, labels, and toasts
Code
$sky-highlight-color-success
Styling
#71bf43
Usage
Highlight for elements that convey a "warning" status, such as alerts, labels, and toasts
Code
$sky-highlight-color-warning
Styling
#fbb034
Usage
Highlight for elements that convey a "danger" status, such as alerts, labels, and toasts
Code
$sky-highlight-color-danger
Styling
#ef4044

Borders

Usage
Borders that separate sections of content within a container
Code
$sky-border-color-neutral-light
Styling
#e2e3e4
Usage
Borders that separate containers from their surroundings, or that separate sections of active elements from the contents of a container such as separating a toolbar from a list of records
Code
$sky-border-color-neutral-medium
Styling
#cdcfd2