Tokens

Tokens enumerate JDRF Spirit style values for color, typography, space, and more. They record design decisions in code for all products to depend on.

Tokens are available as pre-compiled SCSS or JSON in the Spirit NPM package.

Border

Border-color

Name Value

$spirit-border-color-focus

#0055FF

$spirit-border-color-success

#37A941

$spirit-border-color-error

#F40050

Style

Name Value

$spirit-border-style-default

solid

Width

Name Value

$spirit-border-width-control

2px

$spirit-border-width-card

1px

$spirit-border-width-button

4px

$spirit-border-width-button-secondary

2px

$spirit-border-width-button-toggle

2px

$spirit-border-width-input-focus

2px

$spirit-border-width-input-feedback

2px

Radius

Name Value

$spirit-border-radius-s

4px

$spirit-border-radius-m

6px

$spirit-border-radius-l

8px

Box-shadow

Name Value

$spirit-box-shadow-focus

4px

Breakpoint

Name Value

$spirit-breakpoint-xs

0

$spirit-breakpoint-s

375px

$spirit-breakpoint-m

768px

$spirit-breakpoint-l

1024px

$spirit-breakpoint-xl

1248px

Color

Palette

Name Value

$spirit-color-black

#00081A

$spirit-color-grey-35

#575859

$spirit-color-grey-70

#AFB0B3

$spirit-color-grey-95

#EDEFF2

$spirit-color-grey-98

#F5F7FA

$spirit-color-white

#ffffff

$spirit-color-blue-15

#D9E5FF

$spirit-color-blue-30

#B3CCFF

$spirit-color-blue-100

#0055FF

$spirit-color-green-20

#BBE9BF

$spirit-color-green-67

#37A941

$spirit-color-red-35

#FFA6C4

$spirit-color-red-100

#F40050

Background-color

Name Value

$spirit-background-color-white

#ffffff

$spirit-background-color-black

#00081A

$spirit-background-color-brand

#0055FF

Border-color

Name Value

$spirit-border-color-focus

#0055FF

$spirit-border-color-success

#37A941

$spirit-border-color-error

#F40050

Brand-color

Name Value

$spirit-brand-color-primary

#0055FF

$spirit-brand-color-light-blue

#B3CCFF

$spirit-brand-color-lightest-blue

#D9E5FF

Disabled-color

Name Value

$spirit-disabled-color-foreground

#AFB0B3

$spirit-disabled-color-background

#F5F7FA

Elevation-color

Name Value

$spirit-elevation-color-default

rgba(0,8,26,0.16)

$spirit-elevation-color-blue

rgba(0,85,255,0.16)

Feedback-color

Name Value

$spirit-feedback-color-foreground-danger

#F40050

$spirit-feedback-color-foreground-info

#0055FF

$spirit-feedback-color-foreground-success

#37A941

$spirit-feedback-color-background-danger

#FFA6C4

$spirit-feedback-color-background-info

#D9E5FF

$spirit-feedback-color-background-success

#BBE9BF

Icon-color

Name Value

$spirit-icon-color-blue

#0055FF

$spirit-icon-color-grey

#575859

Interactive-color

Name Value

$spirit-interactive-color-primary

#0055FF

$spirit-interactive-color-secondary

#EDEFF2

$spirit-interactive-color-on-dark

#ffffff

$spirit-interactive-color-text-primary

#0055FF

$spirit-interactive-color-text-on-dark

#ffffff

$spirit-interactive-color-focus-soft

#B3CCFF

$spirit-interactive-color-focus-hard

#0055FF

Text-color

Name Value

$spirit-text-color-primary

#00081A

$spirit-text-color-on-dark

#ffffff

$spirit-text-color-secondary

#575859

$spirit-text-color-link

#0055FF

$spirit-text-color-disabled

#AFB0B3

Elevation

Name Value

$spirit-elevation-0

0 0 0 0

$spirit-elevation-1

0 2px 4px 0

$spirit-elevation-2

0 4px 8px 0

$spirit-elevation-3

0 8px 16px 0

$spirit-elevation-4

0 12px 24px 0

$spirit-elevation-5

0 24px 48px 0

$spirit-elevation-secondary

0 0 4px 0

$spirit-elevation-shadow-default-0

0 0 0 0 rgba(#00081A, .16), 0 0 0 0 rgba(#00081A, .08)

$spirit-elevation-shadow-default-1

0 2px 4px 0 rgba(#00081A, .16), 0 0 4px 0 rgba(#00081A, .08)

$spirit-elevation-shadow-default-2

0 4px 8px 0 rgba(#00081A, .16), 0 0 4px 0 rgba(#00081A, .08)

$spirit-elevation-shadow-default-3

0 8px 16px 0 rgba(#00081A, .16), 0 0 4px 0 rgba(#00081A, .08)

$spirit-elevation-shadow-default-4

0 12px 24px 0 rgba(#00081A, .16), 0 0 4px 0 rgba(#00081A, .08)

$spirit-elevation-shadow-default-5

0 24px 48px 0 rgba(#00081A, .16), 0 0 4px 0 rgba(#00081A, .08)

$spirit-elevation-shadow-blue-0

0 0 0 0 rgba(#0055FF, .16), 0 0 0 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-blue-1

0 2px 4px 0 rgba(#0055FF, .16), 0 0 4px 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-blue-2

0 4px 8px 0 rgba(#0055FF, .16), 0 0 4px 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-blue-3

0 8px 16px 0 rgba(#0055FF, .16), 0 0 4px 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-blue-4

0 12px 24px 0 rgba(#0055FF, .16), 0 0 4px 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-blue-5

0 24px 48px 0 rgba(#0055FF, .16), 0 0 4px 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-success-0

0 0 0 0 rgba(#37A941, .16), 0 0 0 0 rgba(#37A941, .08)

$spirit-elevation-shadow-success-1

0 2px 4px 0 rgba(#37A941, .16), 0 0 4px 0 rgba(#37A941, .08)

$spirit-elevation-shadow-success-2

0 4px 8px 0 rgba(#37A941, .16), 0 0 4px 0 rgba(#37A941, .08)

$spirit-elevation-shadow-success-3

0 8px 16px 0 rgba(#37A941, .16), 0 0 4px 0 rgba(#37A941, .08)

$spirit-elevation-shadow-success-4

0 12px 24px 0 rgba(#37A941, .16), 0 0 4px 0 rgba(#37A941, .08)

$spirit-elevation-shadow-success-5

0 24px 48px 0 rgba(#37A941, .16), 0 0 4px 0 rgba(#37A941, .08)

$spirit-elevation-shadow-info-0

0 0 0 0 rgba(#0055FF, .16), 0 0 0 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-info-1

0 2px 4px 0 rgba(#0055FF, .16), 0 0 4px 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-info-2

0 4px 8px 0 rgba(#0055FF, .16), 0 0 4px 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-info-3

0 8px 16px 0 rgba(#0055FF, .16), 0 0 4px 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-info-4

0 12px 24px 0 rgba(#0055FF, .16), 0 0 4px 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-info-5

0 24px 48px 0 rgba(#0055FF, .16), 0 0 4px 0 rgba(#0055FF, .08)

$spirit-elevation-shadow-danger-0

0 0 0 0 rgba(#F40050, .16), 0 0 0 0 rgba(#F40050, .08)

$spirit-elevation-shadow-danger-1

0 2px 4px 0 rgba(#F40050, .16), 0 0 4px 0 rgba(#F40050, .08)

$spirit-elevation-shadow-danger-2

0 4px 8px 0 rgba(#F40050, .16), 0 0 4px 0 rgba(#F40050, .08)

$spirit-elevation-shadow-danger-3

0 8px 16px 0 rgba(#F40050, .16), 0 0 4px 0 rgba(#F40050, .08)

$spirit-elevation-shadow-danger-4

0 12px 24px 0 rgba(#F40050, .16), 0 0 4px 0 rgba(#F40050, .08)

$spirit-elevation-shadow-danger-5

0 24px 48px 0 rgba(#F40050, .16), 0 0 4px 0 rgba(#F40050, .08)

$spirit-elevation-shadow-transparent-0

0 0 0 0 transparent, 0 0 0 0 transparent

$spirit-elevation-shadow-transparent-1

0 2px 4px 0 transparent, 0 0 4px 0 transparent

$spirit-elevation-shadow-transparent-2

0 4px 8px 0 transparent, 0 0 4px 0 transparent

$spirit-elevation-shadow-transparent-3

0 8px 16px 0 transparent, 0 0 4px 0 transparent

$spirit-elevation-shadow-transparent-4

0 12px 24px 0 transparent, 0 0 4px 0 transparent

$spirit-elevation-shadow-transparent-5

0 24px 48px 0 transparent, 0 0 4px 0 transparent

Elevation-color

Name Value

$spirit-elevation-color-default

rgba(0,8,26,0.16)

$spirit-elevation-color-blue

rgba(0,85,255,0.16)

Font

Font Family

Name Value

$spirit-font-family-sans-serif

'Graphik Web', 'Graphik Web Subset', Helvetica, Arial, sans-serif

$spirit-font-family-monospace

'Andale Mono', Courier, monospace

Font Weight

Name Value

$spirit-font-weight-regular

400

$spirit-font-weight-medium

500

$spirit-font-weight-semibold

600

$spirit-font-weight-bold

700

Font Size

Name Value

$spirit-font-size-xs

13px

$spirit-font-size-s

14px

$spirit-font-size-m

16px

$spirit-font-size-l

18px

$spirit-font-size-subhead-normal

16px

$spirit-font-size-subhead-breakpoint-l

24px

$spirit-font-size-display-level-1-normal

56px

$spirit-font-size-display-level-1-breakpoint-l

96px

$spirit-font-size-display-level-2-normal

42px

$spirit-font-size-display-level-2-breakpoint-l

72px

$spirit-font-size-heading-level-1-normal

32px

$spirit-font-size-heading-level-1-breakpoint-l

56px

$spirit-font-size-heading-level-2-normal

24px

$spirit-font-size-heading-level-2-breakpoint-l

44px

$spirit-font-size-heading-level-3-normal

18px

$spirit-font-size-heading-level-3-breakpoint-l

32px

$spirit-font-size-heading-level-4-normal

16px

$spirit-font-size-heading-level-4-breakpoint-l

24px

$spirit-font-size-heading-level-5-normal

14px

$spirit-font-size-heading-level-5-breakpoint-l

18px

$spirit-font-size-heading-level-6-normal

13px

$spirit-font-size-heading-level-6-breakpoint-l

16px

$spirit-font-size-code

13px

Font Line-height

Name Value

Size

Icon

Name Value

$spirit-size-icon-xs

16px

$spirit-size-icon-s

20px

$spirit-size-icon-m

24px

$spirit-size-icon-l

32px

Space

Generic

Name Value

$spirit-space-generic-24-x

192px

$spirit-space-generic-12-x

96px

$spirit-space-generic-8-x

64px

$spirit-space-generic-6-x

48px

$spirit-space-generic-5-x

40px

$spirit-space-generic-4-x

32px

$spirit-space-generic-3-x

24px

$spirit-space-generic-2-x

16px

$spirit-space-generic-1-x

8px

$spirit-space-generic-half-x

4px

Inset

Name Value

$spirit-space-inset-8-x

64px

$spirit-space-inset-6-x

48px

$spirit-space-inset-5-x

40px

$spirit-space-inset-4-x

32px

$spirit-space-inset-3-x

24px

$spirit-space-inset-2-x

16px

$spirit-space-inset-1-x

8px

$spirit-space-inset-half-x

4px

Inset-squish

Name Value

$spirit-space-inset-squish-6-x

24px 48px

$spirit-space-inset-squish-4-x

16px 32px

$spirit-space-inset-squish-3-x

12px 24px

$spirit-space-inset-squish-2-x

8px 16px

$spirit-space-inset-squish-1-x

4px 8px

$spirit-space-inset-squish-half-x

2px 4px

Stack

Name Value

$spirit-space-stack-24-x

0 0 192px 0

$spirit-space-stack-12-x

0 0 96px 0

$spirit-space-stack-8-x

0 0 64px 0

$spirit-space-stack-6-x

0 0 48px 0

$spirit-space-stack-5-x

0 0 40px 0

$spirit-space-stack-4-x

0 0 32px 0

$spirit-space-stack-3-x

0 0 24px 0

$spirit-space-stack-2-x

0 0 16px 0

$spirit-space-stack-1-x

0 0 8px 0

$spirit-space-stack-half-x

0 0 4px 0

Inline-right

Name Value

$spirit-space-inline-right-24-x

0 192px 0 0

$spirit-space-inline-right-12-x

0 96px 0 0

$spirit-space-inline-right-8-x

0 64px 0 0

$spirit-space-inline-right-6-x

0 48px 0 0

$spirit-space-inline-right-5-x

0 40px 0 0

$spirit-space-inline-right-4-x

0 32px 0 0

$spirit-space-inline-right-3-x

0 24px 0 0

$spirit-space-inline-right-2-x

0 16px 0 0

$spirit-space-inline-right-1-x

0 8px 0 0

$spirit-space-inline-right-half-x

0 4px 0 0

Inline-left

Name Value

$spirit-space-inline-left-24-x

0 0 0 192px

$spirit-space-inline-left-12-x

0 0 0 96px

$spirit-space-inline-left-8-x

0 0 0 64px

$spirit-space-inline-left-6-x

0 0 0 48px

$spirit-space-inline-left-5-x

0 0 0 40px

$spirit-space-inline-left-4-x

0 0 0 32px

$spirit-space-inline-left-3-x

0 0 0 24px

$spirit-space-inline-left-2-x

0 0 0 16px

$spirit-space-inline-left-1-x

0 0 0 8px

$spirit-space-inline-left-half-x

0 0 0 4px

Transition

Name Value

$spirit-transition-timing-default

.3s

Image Ratio

Name Value

$spirit-ratio-portrait

133.3333%

$spirit-ratio-square

100%

$spirit-ratio-tall-wide

66.66667%

$spirit-ratio-wide

56.25%

$spirit-ratio-short-wide

33.3333%