Styleguide

  • White #FFFFFF
  • Neon Green #A4F70F
  • Light Gray #9B9B9B
  • Charcoal #272727
  • Black #000000
Charcoal
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
pass
Black
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
pass
Charcoal
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
pass
Black
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
pass
Charcoal
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
fail
Black
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
pass
White
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
pass
Neon Green
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
pass
Light Gray
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
fail
White
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
pass
Neon Green
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
pass
Light Gray
Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

WCAG AA
pass
WCAG AAA
pass
Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.

WCAG AA
pass
WCAG AAA
pass
Lorem ipsum dolor sit amet
hero
Font size 105px Line height 102px Tracking 1px
Font size 50px Line height 52px Tracking 1px
Lorem ipsum dolor sit amet
h1
Font size 65px Line height 64px Tracking 1px
Font size 35px Line height 43px Tracking 1px
Lorem ipsum dolor sit amet
h2
Font size 35px Line height 42px Tracking 1px
Font size 30px Line height 32px Tracking 1px
Lorem ipsum dolor sit amet
h3
Font size 28px Line height 30px Tracking 1px
Font size 25px Line height 28px Tracking 1px
Lorem ipsum dolor sit amet
h4
Font size 24px Line height 28px
Font size 22px Line height 24px
Lorem ipsum dolor sit amet
h5
Font size 22px Line height 24px
Font size 16px Line height 18px
Lorem ipsum dolor sit amet
h6
Font size 20px Line height 22px
Font size 16px Line height 18px
Lorem ipsum dolor sit amet
h7
Font size 18px Line height 18px
Font size 16px Line height 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Expectoque quid ad id, quod quaerebam, respondeas.
p
Font size 14px Line height 15px
Font size 14px Line height 10px
Lorem ipsum dolor sit amet
xs
Font size 12px Line height 16px
Lorem ipsum dolor sit amet
tooltip
Font size 10px Line height 13px
Lorem ipsum dolor sit amet
caption
Font size 14px Line height 18px
Lorem ipsum dolor sit amet
numbers
Font size 16px Line height 16px
Lorem ipsum dolor sit amet
button
Font size 18px Line height 18px Tracking 0.36px
Lorem ipsum dolor sit amet
date
Font size 14px Line height 16px
Lorem ipsum dolor sit amet
tag
Font size 12px Line height 12px
Font size 10px Line height 10px
Lorem ipsum dolor sit amet
nav
Font size 18px Line height 22px Tracking 0.88px
Lorem ipsum dolor sit amet
nav-xs
Font size 18px Line height 18px
Lorem ipsum dolor sit amet
byline
Font size 14px Line height 20px
Font size 12px Line height 16px
account-nav
Font size 16px Line height 20px
120px
Druk
120px
Hammer & Tongs
120px
United Sans
120px
Ringside
120px
Ringside Condensed