Font colors
Color is also used to establish hierarchy, show the relationship between pieces of content, and either emphasize or downplay content. Our typography color palette uses a range of neutral colors that indicate whether information is primary, secondary, or tertiary.
Accessibility Note
If you use color to indicate a state, then you must use an additional visual indicator to ensure that all users can notice the indication.
Font Colors
$now-color--text-<color type>
| Size | Value | Example |
|---|---|---|
| primary | now-color_text--primary |
A wizard’s job is to vex chumps quickly |
| secondary | now-color_text--secondary |
A wizard’s job is to vex chumps quickly |
| tertiary | now-color_text--tertiary |
A wizard’s job is to vex chumps quickly |
Primary
The primary font color is for information that's essential to the workflow. It draws the user's eye to the most relevant content or information.
PRIMARY FONT COLOR IS USED FOR:
- Content and components
- Body copy
- Component text
Secondary
The secondary font color is an alternative to the primary font color. It's used to downplay information so the primary content can have more emphasis.
The secondary font color can also be used to crate visual hierarchy. For example, you can couple this font color with size and/or shape to give the content more attention.
SECONDARY FONT COLOR IS USED FOR:
- Complimentary content to primary content (such as labels for inputs)
- Repeated content
Tertiary
The tertiary font color can be used in conjunction with a primary or secondary color to compliment content. Consistent use of the tertiary font color builds visual recognition and pattern.
TERTIARY FONT COLOR IS USED FOR:
- Complimentary data
- Meta data
Weight and casing
Weight and casing are used to call out or distinguish specific content. Therefore, it's critical to use both weight and casing to preserve their ability to stand out.
Weight
Weight and casing are used to call out or distinguish specific content. Therefore, it's critical to use both weight and casing to preserve their ability to stand out.
Weight should be used sparingly and only in these specific, pre-defined use cases. In rare cases, you can go outside these guidelines and use weight for emphasis or to create a distinct difference between typographical elements.
Semibold: We use semibold in titles (including search results) to create a strong visual presence and distinguish the content from other items.
Bold: Bold is used to call strong attention to content and should be used only after very careful consideration. A good alternative to bold is using color and size to differentiate content.
Bold is used to clearly distinguish the item that is selected.
Casing
Casing is used to distinguish very specific types of content like labels, key-value pairs, and titles.
All caps
All caps is used in labels on forms or for key-value pairs. It's coupled with a smaller font and lighter color to distinguish between the label and the content, as well as add emphasis to the primary content.