Color

A focused color palette is used to strengthen the connection with JDRF Blue through consistent repetition.

Color Direction

JDRF visual style offers a limited color palette of bright blue, black and white, and a range of subtle greys. The visual style uses bold splashes of color to establish visual priority, to encapsulate related content, and to highlight interactive elements. This expressive use of color is complemented by an accentuated typographic hierarchy and generous use of white space.

Interactive

Invite interaction and communicate state with bold high-contrast colors.

Primary
Secondary
On Dark
Text Primary
Text On Dark
Focus Soft
Focus Hard

Text

Primary

Use black for the full range of standard typography, such as headings and labels.

Primary
On Dark

Secondary

Use dark grey for body text and text of secondary importance, such as microcopy or placeholder text.

Secondary

Disabled

Disabled links, labels, or selections use medium grey.

Disabled

Links follow the default brand blue on light, and reverse to white on dark.

Link
On Dark

Feedback

These functional colors communicate success, danger, or neutral status across components, particularly in form level messages.

Foreground Danger
Foreground Info
Foreground Success
Background Danger
Background Info
Background Success

Palettes

These basic palettes are used in the specific applications above, and should only be used directly when no specific token applies.

Brand

JDRF blue and two tints.

Primary
Light Blue
Lightest Blue

Grey

A range of neutrals from black to white.

Black
Dark Grey
Grey
Light Grey
Lightest Grey
White

Accessibility

Color contrast represents the luminance difference between foreground and background colors. The WCAG 2.0 standard for accessibility sets three levels of achievement, from the minimum Level A to the stringent Level AAA. Level AA requires a contrast ratio of 4.5:1 for regular text and 3:1 for large text (+24px regular or +18.66px bold). Level AAA is even more stringent.

Spirit intends to achieve at least WCAG Level A.

However, as the contrast ratings on this page demonstrate, Spirit’s color palette for content generally meets the contrast requirement for Level AA or Level AA18. Disabled elements, such as locked form fields, fall below this contrast threshold.

Color Contrast Matrix

Background Text
Primary Text
#00081A
Secondary Text
#575859
Interactive
#0055FF
Text On Dark
#FFFFFF
White
#FFFFFF
Text
AAA 20
Text
AAA 7.1
Text
AA 5.6
Grey-98
#F5F7FA
Text
AAA 18.6
Text
AA 6.6
Text
AA 5.2
Text
DNP 1
Grey-95
#EDEFF2
Text
AAA 17.3
Text
AA 6.1
Text
AA 4.8
Text
DNP 1.1
JDRF Blue
#0055FF
Text
AA18 3.5
Text
DNP 1.2
Text
AA 5.6
Black
#00081A
Text
DNP 2.8
Text
AA18 3.5
Text
AAA 20
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
About WCAG 2.0 contrast