Style Guide

Primary

Primary 1 Light

Primary 1

Primary 1 Dark

Primary 2 Light

Primary 2

Primary 2 Dark

Primary 3 Light

Primary 3

Primary 3 Dark

Secondary

Secondary 1

Secondary 2

Secondary 3

Secondary 4

Secondary 5

Secondary 6

Monotone

Light 100

Light 88

Light 64

Light 48

Light 32

Light 16

Light 8

Light 4

Dark 100

Dark 88

Dark 64

Dark 48

Dark 32

Dark 16

Dark 8

Dark 4

System

Success

Warning

Error

Typography

Display 1

Almost before we knew it,
we had left the ground.

Display 2

Almost before we knew it,
we had left the ground.

H1

Almost before we knew it,
we had left the ground.

H2

Almost before we knew it,
we had left the ground.

H3

Almost before we knew it,
we had left the ground.

H4

Almost before we knew it,
we had left the ground.

H5

Almost before we knew it,
we had left the ground.

H6

Almost before we knew it,
we had left the ground.

Preheading

Almost before we knew it,
we had left the ground.

Subheading

Almost before we knew it,
we had left the ground.

Blockquote Large

"Apparently we had reached a great height</br/>in the atmosphere, for the sky was a <strong>dead black</strong>,</br> and the stars had ceased to twinkle."

Blockquote

"Apparently we had reached a great height</br/>in the atmosphere, for the sky was a <strong>dead black</strong>,</br> and the stars had ceased to twinkle."

Body Large

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

Body Medium (default)

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

Body Small

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

Body Tiny

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

Bullet Points

  • Looking down into the dark gulf below.
  • I could see a ruddy light streaming through a rift in the clouds.
  • By the same illusion which lifts the horizon…
  • Apparently we had reached a great height.
    • Nested bullet one.
    • Nested bullet two.

List Items

  1. List item one
  2. List item two
  3. List item three

CITE

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

Error Text

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

Menu Link Large

Menu Link Small

Button Large

Download Now

Button Small

Download Now

Label Large

Label Small

Buttons

primary btn–no-icon

primary btn–icon-right

primary btn–icon-left

primary btn–no-icon btn–small

primary btn–icon-right btn–small

primary btn–icon-left btn–small

secondary btn–no-icon

secondary btn–icon-right

secondary btn–icon-left

tertiary btn–no-icon

tertiary btn–icon-right

tertiary btn–icon-left

monotone btn–no-icon

monotone btn–icon-right

monotone btn–icon-left

outline btn–no-icon

outline btn–icon-right

outline btn–icon-left

link btn–no-icon

link btn–icon-right

link btn–icon-left

circle-primary

circle-secondary

Container Width

100

200

300

400

500

600

700

800

900

1000

Block Spacing

100

200

300

400

500

Global Padding

50

100

200

300

400

500

600

700

800

900

1000

1100

Content Spacing

100

200

300

400

500

600

Border Radius

Radius 100

Radius 200

Radius 300

Radius 400

Radius 1000

Overlay | Default

Overlay 100

Overlay 200

Overlay 300

Overlay 400

Overlay | Gradient

Gradient Overlay 100

Gradient Overlay 200

Blur

Blur 100

Blur 200

Blur 300

Blur 400

Shadow

Shadow 100

Shadow 200

Shadow 300

Shadow 400

Border

Border 100

Border 200

Border 300

Border 400