Styleguide
Colors
Brand Primary Contrast
Brand Secondary Contrast
Typography
H1 HEADLINE - 64PX
Lorem ipsum dolor sit amet
class: `.h1`
font-face: Gill Sans Std
font-weight: 800
text-transform: uppercase
font-size: 64px
line-height: 64px (100%)
letter-spacing: -1.92px
H1 HEADLINE - 48PX
Lorem ipsum dolor sit amet
class: `.h1`
font-face: Gill Sans Std
font-weight: 800
text-transform: uppercase
font-size: 48px
line-height: 48px (100%)
letter-spacing: -1.44px
H2 HEADLINE - 40PX
Lorem ipsum dolor sit amet
class: `.h2`
font-face: Gill Sans Std
font-weight: 800
text-transform: uppercase
font-size: 40px
line-height: 40px (100%)
letter-spacing: 0
H2 HEADLINE - 24PX
Lorem ipsum dolor sit amet
class: `.h2`
font-face: Gill Sans Std
font-weight: 800
text-transform: uppercase
font-size: 24px
line-height: 24px (100%)
letter-spacing: 0
H3 HEADLINE - 40PX
Lorem ipsum dolor sit amet
class: `.h3`
font-face: Gill Sans Std
font-weight: 400
text-transform: uppercase
font-size: 40px
line-height: 40px (100%)
letter-spacing: 0
H3 HEADLINE - 24PX
Lorem ipsum dolor sit amet
class: `.h3`
font-face: Gill Sans Std
font-weight: 400
text-transform: uppercase
font-size: 24px
line-height: 24px (100%)
letter-spacing: 0
H4 HEADLINE - 32PX
Lorem ipsum dolor sit amet
class: `.h4`
font-face: Gill Sans Std
font-weight: 400
text-transform: sentence case
font-size: 32px
line-height: 35.2px (110%)
letter-spacing: -0.96px
H4 HEADLINE - 24PX
Lorem ipsum dolor sit amet
class: `.h4`
font-face: Gill Sans Std
font-weight: 400
text-transform: sentence case
font-size: 24px
line-height: 32px (133.33%)
letter-spacing: -0.48px
H5 HEADLINE - 24PX
Lorem ipsum dolor sit amet
class: `.h5`
font-face: Gill Sans Std
font-weight: 400
text-transform: sentence case
font-size: 24px
line-height: 24px (100%)
letter-spacing: -0.72px
H5 HEADLINE - 20PX
Lorem ipsum dolor sit amet
class: `.h5`
font-face: Gill Sans Std
font-weight: 400
text-transform: sentence case
font-size: 20px
line-height: 24px (120%)
letter-spacing: -0.6px
H6 HEADLINE - 16PX
Lorem ipsum dolor sit amet
class: `.h6`
font-face: Gill Sans Std
font-weight: 700
text-transform: uppercase
font-size: 16px
line-height: 16px (110%)
letter-spacing: 0
H6 HEADLINE - 14PX
Lorem ipsum dolor sit amet
class: `.h6`
font-face: Gill Sans Std
font-weight: 700
text-transform: uppercase
font-size: 14px
line-height: 14px (110%)
letter-spacing: 0
H7 HEADLINE - 64PX
class: `.h7`
font-face: Gill Sans Std
font-weight: 400
text-transform: uppercase
font-size: 64px
line-height: 64px (100%)
letter-spacing: 0
H7 HEADLINE - 48PX
class: `.h7`
font-face: Gill Sans Std
font-weight: 400
text-transform: uppercase
font-size: 48px
line-height: 48px (100%)
letter-spacing: 0
Body Large - 18PX
Lorem ipsum dolor sit amet
class: `.body`
font-face: Gill Sans Std
font-weight: 400
text-transform: sentence case
font-size: 18px
line-height: 19.8px (110%)
letter-spacing: 0
Body Large - 16PX
Lorem ipsum dolor sit amet
class: `.body`
font-face: Gill Sans Std
font-weight: 400
text-transform: sentence case
font-size: 16px
line-height: 17.6px (110%)
letter-spacing: 0
Body Small - 14PX
Lorem ipsum dolor sit amet
class: `.body-sm`
font-face: Gill Sans Std
font-weight: 400
text-transform: sentence case
font-size: 14px
line-height: 16.8px (120%)
letter-spacing: 0.28px
Body Small - 14PX
Lorem ipsum dolor sit amet
class: `.body-sm`
font-face: Gill Sans Std
font-weight: 400
text-transform: sentence case
font-size: 14px
line-height: 16.8px (120%)
letter-spacing: 0.28px
Caption - 12PX
Lorem ipsum dolor sit amet
class: `.caption`
font-face: Gill Sans Std
font-weight: 400
text-transform: sentence case
font-size: 12px
line-height: 12px (100%)
letter-spacing: 0
Caption - 12PX
Lorem ipsum dolor sit amet
class: `.caption`
font-face: Gill Sans Std
font-weight: 400
text-transform: sentence case
font-size: 12px
line-height: 12px (100%)
letter-spacing: 0
Utility Large - 14PX
Lorem ipsum dolor sit amet
class: `.utility`
font-face: Gill Sans Std
font-weight: 400
text-transform: uppercase
font-size: 14px
line-height: 14px (100%)
letter-spacing: 0.56px
Utility Large - 14PX
Lorem ipsum dolor sit amet
class: `.utility`
font-face: Gill Sans Std
font-weight: 400
text-transform: uppercase
font-size: 14px
line-height: 14px (100%)
letter-spacing: 0.56px
Utility Small - 12PX
Lorem ipsum dolor sit amet
class: `.utility-sm`
font-face: Gill Sans Std
font-weight: 400
text-transform: uppercase
font-size: 12px
line-height: 12px (100%)
letter-spacing: 0
Utility Small - 12PX
Lorem ipsum dolor sit amet
class: `.utility-sm`
font-face: Gill Sans Std
font-weight: 400
text-transform: uppercase
font-size: 12px
line-height: 12px (100%)
letter-spacing: 0
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