Typography

The design system applies base typography styles to unclassed HTML elements. These are the foundational styles that apply site-wide without any CSS classes.

Headings (h1–h6)

Unclassed heading elements use the design system’s typography mixins. Each heading level has a distinct font family, size, and style.

Level	Font	Size	Style
h1	Merriweather (serif)	2.5rem	Normal weight
h2	Oswald (sans)	2.25rem	Uppercase, underline accent
h3	Merriweather Sans (alt)	1.75rem	Normal weight, red
h4	Merriweather (serif)	1.625rem	Bold
h5	Merriweather Sans (alt)	1.375rem	Bold, red
h6	Merriweather Sans (alt)	1.125rem	Bold, uppercase

Examples

Heading Level 1

<h1>Heading Level 1</h1>

Heading Level 2

<h2>Heading Level 2</h2>

Heading Level 3

<h3>Heading Level 3</h3>

Heading Level 4

<h4>Heading Level 4</h4>

Heading Level 5

<h5>Heading Level 5</h5>

Heading Level 6

<h6>Heading Level 6</h6>

Paragraphs

Unclassed <p> elements receive the default paragraph mixin: Merriweather Sans at 1rem, with 1.5 line height and appropriate vertical margins. Adjacent paragraphs following headings have their top margin removed to maintain consistent vertical rhythm.

Examples

This is a standard paragraph element. It uses the Merriweather Sans font family at 1rem with a comfortable 1.5 line height for readability. The design system sets paragraph styling on unclassed elements, so no utility class is needed.

<p>
  This is a standard paragraph element. It uses the Merriweather Sans font
  family at 1rem with a comfortable 1.5 line height for readability. The design
  system sets paragraph styling on unclassed elements, so no utility class is
  needed.
</p>

Heading Followed by Paragraph

When a paragraph immediately follows a heading, its top margin is removed so the heading and paragraph sit closely together with consistent vertical rhythm.

<h3>Heading Followed by Paragraph</h3>
<p>
  When a paragraph immediately follows a heading, its top margin is removed so
  the heading and paragraph sit closely together with consistent vertical
  rhythm.
</p>

Links

Unclassed <a> elements with an href attribute are styled with Olympic (#004E60) color and an underline. The underline is removed on hover. Links without an href attribute inherit the parent’s color with no underline.

Examples

This is a paragraph with a standard link inside it. Hover over the link to see the underline removed.

<p>
  This is a paragraph with a
  <a href="#">standard link</a>
  inside it. Hover over the link to see the underline removed.
</p>

State	Color
Default	Olympic (#004E60)
Hover	Olympic (underline removed)
Visited	Athens (#66435A)
Active	Bulldog Red (#BA0C2F)

In print media, links display their URL in parentheses after the link text.

Font Stacks

Variable	Font
$font-sans	Oswald, sans-serif
$font-serif	Merriweather, serif
$font-alt	Merriweather Sans, sans-serif
$font-stack-primary	Merriweather Sans (body text)

Line Heights

Variable	Value
$line-height-normal	1.5
$line-height-header	1.3
$line-height-tight	1.15