Horizon Design System

Typography

Display headings

Typeface

ABC Monument Medium

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Weight

Medium / 500

Typescale

1.2 / Minor third

Leading

1.2em (120%)

Display 1 - 54.9324px / 1.5em

The quick brown fox jumps over the lazy dog

Display 2 - 43.9452px / 1.5em

The quick brown fox jumps over the lazy dog

Display 3 - 35.1558px / 1.5em

The quick brown fox jumps over the lazy dog

Display 4 - 28.125px / 1.5em

The quick brown fox jumps over the lazy dog

Display 5 - 22.5px / 1.5em

The quick brown fox jumps over the lazy dog

Display 6 - 18px / 1.5em

The quick brown fox jumps over the lazy dog

Body copy

Typeface

ABC Monument Regular

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()

Weight

Regular / 400

Typescale

1.2 / Minor third

Leading

1.5em (150%)

Body 1 - 54.9324px / 1em

The quick brown fox jumps over the lazy dog

Body 2 - 43.9452px / 1em

The quick brown fox jumps over the lazy dog

Body 3 - 35.1558px / 1em

The quick brown fox jumps over the lazy dog

Body 4 - 28.125px / 1em

The quick brown fox jumps over the lazy dog

Body 5 - 22.5px / 1em

The quick brown fox jumps over the lazy dog

Body 6 - 18px / 1em

The quick brown fox jumps over the lazy dog

Rich text

Donec a eros rutrum, pharetra erat quis, sagittis neque. Praesent nunc ligula, dapibus non sem ut, laoreet tempor eros.

  • Aenean finibus arcu id sem pretium malesuada.
  • Sed at lobortis nibh, at aliquam nisl.
  • Duis aliquam ac diam sit amet semper.
  1. Donec eleifend diam elit, et bibendum mauris tincidunt sed.
  2. Donec bibendum consectetur magna, in tristique urna pretium non.
  3. Nunc mi ligula, varius ornare auctor ac, congue sed leo.

Vivamus lacinia ipsum id pellentesque egestas. Nulla lobortis ex id tincidunt pellentesque. Curabitur quis nulla arcu. Integer finibus accumsan odio, at tristique sem imperdiet ut. Aenean tincidunt egestas velit, id condimentum tortor facilisis non.

Colours

Primary

50

#DAD5E3

100

#B5ABC7

200

#9182AA

300

#6C588E

400

#472E72

500

#39255B

600

#2B1C44

On Primary

50

#000000

100

#000000

200

#000000

300

#FFFFFF

400

#FFFFFF

500

#FFFFFF

600

#FFFFFF

Secondary

50

#FCD7DC

100

#F9B0B9

200

#F78896

300

#F46173

400

#F13950

500

#C12E40

600

#912230

On Secondary

50

#000000

100

#000000

200

#000000

300

#000000

400

#000000

500

#FFFFFF

600

#FFFFFF

Buttons

Primary

Menu

Secondary (not in use)