A focused color palette is used to strengthen the connection with JDRF Blue through consistent repetition.
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.
Invite interaction and communicate state with bold high-contrast colors.
Use black for the full range of standard typography, such as headings and labels.
Use dark grey for body text and text of secondary importance, such as microcopy or placeholder text.
Disabled links, labels, or selections use medium grey.
Links follow the default brand blue on light, and reverse to white on dark.
These functional colors communicate success, danger, or neutral status across components, particularly in form level messages.
These basic palettes are used in the specific applications above, and should only be used directly when no specific token applies.
JDRF blue and two tints.
A range of neutrals from black to white.
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.
|
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
|
||||