Sage provides a constrained, purposeful set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used.

Setting individual styles manually should be avoided, but where needed, should be sure to use the appropriate design tokens. In the end, we prefer adding new entries to the type spec over including one-off styling.

The Sage type system uses a loose major second modular scale (factor of 1.125) derived from an initial base font size of 14px. However, for improved readability with mobile / small screen devices, this base font size is increased to 16px.

Typography in our system uses t-sage- classes in order to apply a given typographical specification to an element These can be used on any element to apply the desired typographical styles regardless of the tag. This allows a wide range of flexibility for applying a desired style to an element while still using the most semantic element possible for a given context.

Type Spec Weight Kerning Desktop
(size / line)
(size / line)

Heading 1
HTML: t-sage-heading-1
Rails: SageClassnames::TYPE::HEADING_1
React: SageClassnames.TYPE.HEADING_1

700 -0.6px 40px / 48px 40px / 48px

Heading 2
HTML: t-sage-heading-2
Rails: SageClassnames::TYPE::HEADING_2
React: SageClassnames.TYPE.HEADING_2

700 -0.5px 32px / 40px 32px / 40px

Heading 3
HTML: t-sage-heading-3
Rails: SageClassnames::TYPE::HEADING_3
React: SageClassnames.TYPE.HEADING_3

700 -0.15px 28px / 32px 28px / 32px

Heading 4
HTML: t-sage-heading-4
Rails: SageClassnames::TYPE::HEADING_4
React: SageClassnames.TYPE.HEADING_4

600 -0.15px 24px / 32px 24px / 32px

Heading 5
HTML: t-sage-heading-5
Rails: SageClassnames::TYPE::HEADING_5
React: SageClassnames.TYPE.HEADING_5

600 0px 18px / 28px 18px / 28px

Heading 6
HTML: t-sage-heading-6
Rails: SageClassnames::TYPE::HEADING_6
React: SageClassnames.TYPE.HEADING_6

600 0px 16px / 28px 16px / 28px

HTML: t-sage-body
Rails: SageClassnames::TYPE::BODY
React: SageClassnames.TYPE.BODY

400* 0px 16px / 24px 16px / 24px

Small Body*
HTML: t-sage-body-small
Rails: SageClassnames::TYPE::BODY_SMALL
React: SageClassnames.TYPE.BODY_SMALL

400* 0px 14px / 20px 14px / 20px

Extra Small Body*
HTML: t-sage-body-xsmall
Rails: SageClassnames::TYPE::BODY_XSMALL
React: SageClassnames.TYPE.BODY_XSMALL

400* 0px 12px / 16px 12px / 16px

* The t-sage-body{-size} classes also have weight variations: append -med for medium (500); append -semi for semibold (600); append -bold for bold (700)

The type specs above map logically to corresponding HTML elements, as well as the following:

  • Body (t-sage-body) is used as the default type style, and is thus applied to elements such as li, dd, td, blockquote, and more.
  • Body Bold (t-sage-body-semi) is used for elements that are typically bolded such as tr, dt, strong, and b.

As an example, see here how the \"Heading 3\" type spec can be applied to an h3 element:

Lorem ipsum dolor sit

<h3 class="t-sage-heading-3">Lorem ipsum dolor sit</h3>

But the exact specs can also be applied to any element such as a span. This is not meant to be an excuse for using non-semantic markup, but rather, to free a spec to be applied to the most semantic element in context regardless of the spec's name.

Lorem ipsum dolor sit

<span class="t-sage-heading-3">Lorem ipsum dolor sit</span>

For setting text in open areas where simpler markup is desired, or where a content management system controls the markup being output, we recommend applying the sage-type class on a container around such content. This leads to some default styling applied to the tags within the container include our preferred colors and block spacing.

Coloring Type

While applying colors to type on-the-fly should generally be avoided we do provide the following utility classes for such cases where its most practical:

Color Type class Constants


Rails: SageClassnames::TYPE_COLORS::PRIMARY_300
React: SageClassnames.TYPE_COLORS.PRIMARY_300



Rails: SageClassnames::TYPE_COLORS::CHARCOAL_100
React: SageClassnames.TYPE_COLORS.CHARCOAL_100



Rails: SageClassnames::TYPE_COLORS::RED_300
React: SageClassnames.TYPE_COLORS.RED_300



Rails: SageClassnames::TYPE_COLORS::ORANGE_300
React: SageClassnames.TYPE_COLORS.ORANGE_300



Rails: SageClassnames::TYPE_COLORS::YELLOW_300
React: SageClassnames.TYPE_COLORS.YELLOW_300



Rails: SageClassnames::TYPE_COLORS::SAGE_300
React: SageClassnames.TYPE_COLORS.SAGE_300



Rails: SageClassnames::TYPE_COLORS::PURPLE_300
React: SageClassnames.TYPE_COLORS.PURPLE_300

Additional Type Features

While modifying type beyond the specs above is not encouraged a few type utilities are available:

Description Type class Constants

Truncate text with an ellipsis when available space runs out


Rails: SageClassnames::TRUNCATE_TEXT
React: SageClassnames.TRUNCATE_TEXT

Adjust alignment of type to right


Rails: SageClassnames::TYPE_ALIGN_RIGHT
React: SageClassnames.TYPE_ALIGN_RIGHT

Adjust alignment of type to hang center


Rails: SageClassnames::TYPE_ALIGN_CENTER
React: SageClassnames.TYPE_ALIGN_CENTER

Apply a strikethrough to text


Rails: SageClassnames::TYPE_STRIKETHROUGH
React: SageClassnames.TYPE_STRIKETHROUGH