Utility

Communicate functionality or descriptive information for shorter copy

Live demo

REI Members get an estimated $50.00 on this item as part of their member dividend
Style
Scale
Generic classes

Purpose

Utility styles are used to communicate functionality or descriptive information. Because utility styling is more condensed and compact, it works well with shorter content.

Do not replace utility styles with headings. While headings help group and categorize content, utility styles help to label elements or give users information on how to take action.

Cedar utility styles are available in both serif and sans serif options. Additionally, each utility style has a strong option.

TypePurpose
SerifUse when additional brand emphasis is needed.
Serif strongUse when additional emphasis is needed over utility serif.
SansThe most commonly used utility style.
Sans strongUse when additional emphasis is needed.

Best practices

  • Use utility styles should to label elements or give users information on how to take action. For instance, on error messages or pricing information
  • Consider all cdr-color-text colors except for cdr-color-text-brand for utility styles
Do
Product price displayed correctly with utility styles.

Do use utility styles for more functional elements.

Don't
Product price incorrectly displayed with heading style.

Don't use headings in place of utility styles.

Do
Product information displayed with utility styles to accommodate tight spacing.

Do use utility styles for tight spaces.

Don't
Long-form content incorrectly displayed with utility styles.

Don't use utility styles for long-form content.