The size, weight, and color of type conveys meaning and establishes a hierarchy.

Opattern’s typographic system is designed to provide structure, draw attention to the most important messages, and make the interface easy to scan.

Typography v3.41.0

Display large

Display medium

Display small

Display smaller

Display smallest

Primary heading

Section heading

Section subheading

A Paragraph with a link.

A Paragraph with an important link.

A quiet paragraph with a link.

Bar Chart Label
Text Label

Mixins v3.41.0

Opattern provides mixins for all of the typography classes. Use @mixin instead of @extend to apply the typography to your own custom classes, for example:

.my-custom-display {
    @include display-medium;
.my-custom-heading {
    @include heading-primary;

Check the reference section to see what mixins available.

Content Strategy


We use display type to call attention to an interface’s main message. Think of it as a newspaper headline: if your reader is skimming quickly, what’s the one thing you want them to see?

  • Use display type sparingly—too many different sizes can look messy.
  • Don’t use display type to do the job of a heading.


Hierarchical headings are short phrases that describe the content that follows. They create structure and order and make a page more scannable.

  • Make sure the heading describes the content below.
  • Be brief (3-5 words).
  • Use sentence case.
  • Don’t use punctuation. Exception: OK to use a question mark if needed.

Body and Aside

Write in full sentences and do not use bold. Avoid using all caps for emphasis.

Customization v3.41.0

Font family

Much like color, fonts are defining elements of a brand identity. The Opattern default font stack is Helvetica Neue, Helvetica, Arial, sans-serif (and Arial, sans-serif for emails), but we intend for this to be overridden for each client to match their brand.


Avoid customizing font sizes—you don’t want to mess up the hierarchy. Instead of changing individual font sizes, change all the typography at once by customizing the $root-font-size variable.


Sass VariableDescriptionDefault
$text-colorDefault text color$darkest-gray
$quiet-font-colorDefault quiet font color$dark-gray
$header-font-colorHeader font color$text-color
$anchor-font-colorAnchor font color$primary-color
$anchor-font-color-hoverAnchor font color on hoverlighten($primary-color, 20%)
$anchor-text-decorationAnchor text decorationnone
$paragraph-font-sizeParagraph font size$font-size-medium
$paragraph-aside-font-sizeAside text font size$font-size-tiny
$paragraph-aside-font-colorAside text font color$quiet-font-color
$bar-chart-label-font-colorBar chart font color$quiet-font-color
$text-label-font-colorText label font color$quiet-font-color
$text-label-text-transformText label transformuppercase

Reference v3.41.0

ClassMixinFont Size VariableSizeStyles
.paragraph or

.text-labeltext-label$font-size-small14pxnormal and uppercase
.aside or aside$font-size-tiny12pxnormal