Style Guide
TYPOGRAPHY
display1
weight: semiBold, Bold, extraBold
font-family: Ubuntu
font-size: 40px
line-height: 48px
letter-spacing: normal
Display 1
Bold
h1
weight: semiBold
font-family: Ubuntu
font-size: clamp(32px, 8vw, 40px)
line-height: clamp(40px, 8vw, 48px)
letter-spacing: normal
H1
Bold
MH1
Bold
h2
weight: semiBold
font-family: Ubuntu
font-size: clamp(28px, 8vw, 32px)
line-height: clamp(32px, 8vw, 40px)
letter-spacing: normal
H2
Medium
MH2
Medium
h3
weight: semiBold
font-family: Ubuntu
font-size: clamp(24px, 8vw, 28px)
line-height: clamp(32px, 8vw, 32px)
letter-spacing: normal
H3
Medium
MH3
Medium
h4
weight: semiBold
font-family: Ubuntu
font-size: clamp(20px, 8vw, 24px)
line-height: clamp(24px, 8vw, 32px)
letter-spacing: normal
H4
Medium
MH4
Medium
h5
weight: semiBold
font-family: Ubuntu
font-size: clamp(16px, 8vw, 20px)
line-height: clamp(24px, 8vw, 24px)
letter-spacing: normal
H5
Medium
MH5
Medium
h6
weight: semiBold
font-family: Ubuntu
font-size: clamp(14px, 8vw, 16px)
line-height: clamp(16px, 8vw, 24px)
letter-spacing: normal
H6
Medium
MH6
Medium
subheader1
weight: regular
font-family: Ubuntu
font-size: 24px
line-height: 32px
letter-spacing: normal
Subheader 1
Regular
subheader2
weight: regular
font-family: Ubuntu
font-size: 20px
line-height: 24px
letter-spacing: normal
Subheader 1
Regular
body1
weight: regular, semiBold
font-family: Ubuntu
font-size: 16px
line-height: 24px
letter-spacing: normal
Body 1
Regular
Body 1
Semi Bold
Body 1
Regular Underlined
body2
weight: regular, semiBold
font-family: Ubuntu
font-size: 14px
line-height: 20px
letter-spacing: normal
Body 2
Regular
Body 2
Semi Bold
Body 2
Regular Underlined
caption1
weight: regular, semiBold
font-family: Ubuntu
font-size: 12px
line-height: 16px
letter-spacing: normal
Caption 1
Regular
Caption 1
Semi Bold
Caption 1
Regular Underlined
caption2
weight: regular, semiBold
font-family: Ubuntu
font-size: 10px
line-height: 12px
letter-spacing: normal
Caption 2
Regular
Caption 2
Semi Bold
Caption 2
Regular Underlined
overline
weight: regular
font-family: Ubuntu
font-size: 14px
line-height: 16px
letter-spacing: normal
font-variant: small-caps
Overline
Regular
Overline
Semi Bold
button
weight: medium
font-family: Ubuntu
font-size: 16px
line-height: 24px
letter-spacing: normal
Button
Medium
Style Guide
COLORS
Neutral
Neutral tones used for the majority of UI.
Primary - Picton Blue
Primary tones used as the main hue for the UI.
Secondary - Cerise
Primary tones used as the main hue for the UI.
Accent
Accent colors and tones to convey a semantic purpose such as success, error, warning, and info.
Style Guide
EFFECTS
Drop Shadow
Tiny
Small
Medium
Large
Extra Large
Blur
None
Small
Medium
Large
Extra Large
Style Guide
ICONS
Style Guide
SPACING
4px
8px
16px
24px
32px
48px
64px
96px
128px
192px
256px
384px
512px
640px
768px