Log in Sign up

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>
Heading 5
<h5>Heading 5</h5>
Heading 6
<h6>Heading 6</h6>

Standard Body Copy

<p>Standard body copy</p>

Small Body Copy

<p class="text-sm">Small body copy</p>

Smaller Body Copy

<p class="text-xs">Smaller body copy</p>
<label>Form label</label>
Overline <span class="text-overline">Overline</span>
  1. Item one
  2. Item two
  3. Item three
  4. Item four
<ol><li>Item one</li></ol>
  • Item one
  • Item two
  • Item three
  • Item four
<ul><li>Item one</li></ul>
  • Item one
  • Item two
  • Item three
  • Item four
<ul class="ticks"><li>Item one</li></ul>
Overline <span class="text-overline">Overline</span>
Primary Button
Disabled Primary Button
<a href="#" class="button button-primary">Primary button</a>
Button with arrow
Disabled Button with arrow
<a href="#" class="button button-primary arrow">Primary button width arrow</a>
Short Button
Disabled Short Button
<a href="#" class="button button-primary short">Short button</a>
Outline Button
Disabled Outline Button
<a href="#" class="button outline">Outline button</a>
Outline Short Button
Disabled Outline Short Button
<a href="#" class="button outline short">Outline Short button</a>

Primary Colors

Deep Navy

$color-deep-navy

#0B1021

Navy

$color-navy

#0F152E

Light Peach

$color-light-peach

#F6CEBF

Light Green

$color-light-green

#CBE2DF

Secondary Colors

Sky

$color-sky

#B9BFD9

Light Sky

$color-light-sky

#E7E8F0

Sand

$color-sand

#E9E8ED

Light Sand

$color-light-sand

#F9F7F3