Typography is used to determine all spacing and rhythm. Typography should change in scale and size according to context.
Typefaces
Selection
Typography should be chosen strategically based on brand style, content tone, target audience, industry, and market. Typefaces are paired and sized by the designer. The designer should start with the body text first: defining base body size and lineheight. The body type will inform the spacing for the system.
Scale
Type sizes should be derived using a typographic scale. This is something that will also be defined by the designer.
Sizes
App
Typography used in the context of an application or complex interface.
Constant Sizes
Small paragraph
Body size, regular paragraph
Lead paragraph
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Prose
Typography used in the context of long-form content or stories.
Mobile
Small paragraph
Body size, regular paragraph
Lead paragraph
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Desktop
Small paragraph
Body size, regular paragraph
Lead paragraph
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Color tints and shades are generated from a chosen set of hues.
Selection
Main swatches are denoted with a “★” character. Tints and shades are derived from these values.
Core
Primary
Secondary
Layout
Base
Feedback
Atoms define decisions being made after choices (tokens) are established.
Form Elements
App & Mobile
Styles and sizes for App & Mobile contexts.
Desktop
Styles and sizes for Desktop contexts.
The spacing system is generated from the sizes of the type depending on context and device.