Style Guide for PUX Site

Fonts

heading-1

Inter extra bold
64 / 64 / -2% / 0

heading-2

inter bold
32 / 40 / -2% / 0

heading-3

inter bold
40 / 40 / -2% / 16

heading-4

inter extra bold
48 / 48 / -2% / 0
heading-5
inter extrabold
24 / 32 / -2% / 0
heading-6
inter semibold
18 / 24 / -2% / 0
body-text, lg
inter regular
24 / 32 / 0% / 0
body-text
inter medium
16 / 32 / 0% / 8
caption
inter medium Italic
16 / 24 / 0% / 8
label
inter medium Italic - Uppercase
12 / 16 / .05 em / 0
link-text, black
inter bold
16 / 32 / 0% / 8
link-text, lg
inter bold
18 / 32 / 0% / 8
Rich Text Element (Blog Posts)

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. (Body Paragraph)

Heading 2

image caption
"Quote"&Callout text
- Author's name

Linkstyle

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

heading 5
  1. list item
  2. list item
  • list item 1
  • list item 2
  • list item 3
Colors
Black
HEX: #323232
RGB: 50, 50, 50
12.82:1
AAA
Teal
HEX: #00838F
RGB: 0, 131, 143
4.52:1
AA
Dark Navy
HEX: #0B2A52
RGB: 11, 42, 82
14.31:1
AAA
Navy
HEX: #2B5C9B
RGB: 42, 93, 155
6.76:1
AA
Blue
HEX: #1EB5D1
RGB: 30, 181, 209
5.24:1
AA
Lime
HEX: #93EF97
RGB: 147, 239, 151
9.18:1
AAA
Green Gradient
HEX: #47CD93 >
hex: #42c4cc
not for small text
Red
HEX: #F85A5A
RGB: 248, 90, 90
3.18:1
aa
Gray
HEX: #F2F2F2
RGB: 242, 242, 242
11.45:1
AAA
White
HEX: #FFFFFF
RGB: 255, 255, 255
12.82:1
AAA
Image Overlay
HEX: #000000 35%
RGB: 0, 0, 0
for image treatment
Global classes
Style name

Heading

Heading

Working with