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.

Inline Code

Unclassed <code>, <kbd>, and <samp> elements use a monospace font at the same size as the surrounding text. When used inline, they sit on a light-gray chip with a thin border and small rounded corners so they stand out from body text. Code inside a <pre> block does not get the chip; use the Code Box component for multi-line code.

Examples

To disable retry logic, set the retryOnFailure option to false when you call configureClient().

<p>
  To disable retry logic, set the
  <code>retryOnFailure</code>
  option to
  <code>false</code>
  when you call
  <code>configureClient()</code>
  .
</p>

Press Ctrl + S to save. If the upload works, the page shows File uploaded successfully.

<p>
  Press
  <kbd>Ctrl</kbd>
  +
  <kbd>S</kbd>
  to save. If the upload works, the page shows
  <samp>File uploaded successfully</samp>
  .
</p>

Element	Use for
`<code>`	Code, file names, and option or function names
`<kbd>`	Keys the learner presses
`<samp>`	Output or messages a program displays

Font Stacks

Variable	Font
`$font-sans`	Oswald, Oswald Fallback, sans-serif
`$font-serif`	Merriweather, Merriweather Fallback, serif
`$font-alt`	Merriweather Sans, Merriweather Sans Fallback, sans-serif
`$font-mono`	ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace (inline code)
`$font-stack-primary`	Merriweather Sans (body text)
`$font-path`	`/fonts/v1`, the root-relative font folder; override with `@use ... with ($font-path: ...)`

The brand fonts are self-hosted with base.css. See Fonts for the file URLs, fallback faces and preload guidance.

Line Heights

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