Styleguide
Colors
Brand Primary Contrast
Brand Secondary Contrast
Typography
H1 HEADLINE - 64PX
Lorem ipsum dolor sit amet
class: `.h1`
font-face: Arial
font-weight: 700
text-transform: uppercase
font-size: 64px
line-height: 57.6px (90%)
letter-spacing: -2.56px
H1 HEADLINE - 48PX
Lorem ipsum dolor sit amet
class: `.h1`
font-face: Arial
font-weight: 700
text-transform: uppercase
font-size: 48px
line-height: 43.2px (90%)
letter-spacing: -1.92px
H2 HEADLINE - 48PX
Lorem ipsum dolor sit amet
class: `.h2`
font-face: Arial
font-weight: 400
text-transform: uppercase
font-size: 48px
line-height: 48px (100%)
letter-spacing: -1.92px
H2 HEADLINE - 38PX
Lorem ipsum dolor sit amet
class: `.h2`
font-face: Arial
font-weight: 400
text-transform: uppercase
font-size: 38px
line-height: 38px (100%)
letter-spacing: -1.52px
H3 HEADLINE - 40PX
Lorem ipsum dolor sit amet
class: `.h3`
font-face: Arial
font-weight: 700
text-transform: uppercase
font-size: 40px
line-height: 44px (110%)
letter-spacing: -0.4px
H3 HEADLINE - 32PX
Lorem ipsum dolor sit amet
class: `.h3`
font-face: Arial
font-weight: 700
text-transform: uppercase
font-size: 32px
line-height: 35.2px (110%)
letter-spacing: -0.32px
H4 HEADLINE - 32PX
Lorem ipsum dolor sit amet
class: `.h4`
font-face: Arial
font-weight: 400
text-transform: sentence case
font-size: 32px
line-height: 38.4px (120%)
letter-spacing: -0.96px
H4 HEADLINE - 24PX
Lorem ipsum dolor sit amet
class: `.h4`
font-face: Arial
font-weight: 400
text-transform: sentence case
font-size: 24px
line-height: 28.8px (120%)
letter-spacing: -0.72px
H5 HEADLINE - 24PX
Lorem ipsum dolor sit amet
class: `.h5`
font-face: Arial
font-weight: 400
text-transform: uppercase
font-size: 24px
line-height: 28.8px (120%)
letter-spacing: -0.96px
H5 HEADLINE - 18PX
Lorem ipsum dolor sit amet
class: `.h5`
font-face: Arial
font-weight: 400
text-transform: uppercase
font-size: 18px
line-height: 21.6px (120%)
letter-spacing: -0.72px
H6 HEADLINE - 18PX
Lorem ipsum dolor sit amet
class: `.h6`
font-face: Arial
font-weight: 700
text-transform: uppercase
font-size: 18px
line-height: 23.4px (130%)
letter-spacing: -0.36px
H6 HEADLINE - 16PX
Lorem ipsum dolor sit amet
class: `.h6`
font-face: Arial
font-weight: 700
text-transform: uppercase
font-size: 16px
line-height: 20.8px (130%)
letter-spacing: -0.32
Body Large - 14PX
Lorem ipsum dolor sit amet
class: `.body`
font-face: Arial
font-weight: 400
text-transform: sentence case
font-size: 14px
line-height: 14px (100%)
letter-spacing: 0
Body Large - 14PX
Lorem ipsum dolor sit amet
class: `.body`
font-face: Arial
font-weight: 400
text-transform: sentence case
font-size: 14px
line-height: 14px (100%)
letter-spacing: 0
Body Small - 12PX
Lorem ipsum dolor sit amet
class: `.body-sm`
font-face: Arial
font-weight: 400
text-transform: sentence case
font-size: 12px
line-height: 14.4px (120%)
letter-spacing: 0
Body Small - 12PX
Lorem ipsum dolor sit amet
class: `.body-sm`
font-face: Arial
font-weight: 400
text-transform: sentence case
font-size: 12px
line-height: 14.4px (120%)
letter-spacing: 0
Caption - 10PX
Lorem ipsum dolor sit amet
class: `.caption`
font-face: Arial
font-weight: 400
text-transform: sentence case
font-size: 10px
line-height: 10px (100%)
letter-spacing: 0
Caption - 10PX
Lorem ipsum dolor sit amet
class: `.caption`
font-face: Arial
font-weight: 400
text-transform: sentence case
font-size: 10px
line-height: 10px (100%)
letter-spacing: 0
Utility Large - 14PX
Lorem ipsum dolor sit amet
class: `.utility`
font-face: Arial
font-weight: 400
text-transform: uppercase
font-size: 14px
line-height: 14px (100%)
letter-spacing: 0
Utility Large - 14PX
Lorem ipsum dolor sit amet
class: `.utility`
font-face: Arial
font-weight: 400
text-transform: uppercase
font-size: 14px
line-height: 14px (100%)
letter-spacing: 0
Utility Small - 12PX
Lorem ipsum dolor sit amet
class: `.utility-sm`
font-face: Arial
font-weight: 400
text-transform: uppercase
font-size: 12px
line-height: 12px (100%)
letter-spacing: 0.6px
Utility Small - 12PX
Lorem ipsum dolor sit amet
class: `.utility-sm`
font-face: Arial
font-weight: 400
text-transform: uppercase
font-size: 12px
line-height: 12px (100%)
letter-spacing: 0.6px
Buttons
Buttons with icon
Links/CTA
Forms
Text inputs
Select input
Radio input
Checkbox input
Spacing
d: 5px
m: 5px
d: 10px
m: 10px
d: 20px
m: 15px
d: 30px
m: 20px
d: 45px
m: 30px
d: 60px
m: 40px
d: 80px
m: 60px
d: 120px
m: 80px
Border Radiuses
d: 4px
m: 4px
d: 10px
m: 8px
d: 16px
m: 14px
d: 100VW
m: 100VW