Spirit visual style reinforces JDRF’s clear, powerful message by providing an amplified type hierarchy, limited color selections, and a single font family.
Use the typographic styles on this page via Spirit tokens and components. Aspects of typographic style, such as spacing or color, may be modified on per-component basis. For body text specifically, see the component Long Form Text, which extends this basic typography with spacing and other considerations for long blocks of text.
Spirit provides four weights of the Graphik font family. For instructions on loading Graphik as a web font, see Font Family, below.
Establish visual hierarchy using appropriate typographic scale.
Spirit uses a limited color palette for typography, consisting of black for headings and secondary grey for body text, microcopy, and all other small text.
All typography on a dark background is white, including links.
For additional guidance see Color.
If using the Spirit NPM package, the Graphik web font is included and should be deployed directly with your product. For technical details, see Getting Started for Developers.
If using Spirit’s styles and assets via the CDN, either use Spirit’s stylesheet directly to get the web fonts automatically or add the appropriate import string to your SCSS. For more information, see Getting Started for Developers: Using CDN Assets: Fonts.
Helper classes to achieve sizes and styles.
| Mixin | Class | Outcome |
|---|---|---|
|
|
|
Applies Display 1 styling |
|
|
|
Applies Display 2 styling |
|
|
|
Applies Heading 1 styling |
|
|
|
Applies Heading 2 styling |
|
|
|
Applies Heading 3 styling |
|
|
|
Applies Heading 4 styling |
|
|
|
Applies Heading 5 styling |
|
|
|
Applies Heading 6 styling |
|
|
|
Applies subhead paragraph styling |
|
|
|
Applies large paragraph styling |
|
|
|
Applies medium paragraph styling |
|
|
|
Applies small paragraph styling |
|
|
|
Applies basic link styling |