Gilroy Semibold (700)
Used at the top of the page or on the home. Use sparingly.
class="text-4xl semibold"
Gilroy Semibold (700)
class="text-2xl semibold"
Source Sans Pro Semi-Bold (600)
2.25rem (36px)
Title of page or article
class="title"
Source Sans Pro 1.2rem Semi-Bold (600)
1.5rem (24px)
Used underneath the titles or introducing paragaph sections.
class="subtitle"
Source Sans Pro
1.375rem (22px)
Used to introduce paragraph text.
class="intro"
Paragraph Text
Source Sans Pro
1rem (16px)
Regular paragraph text.
Regular paragraph text.
p tag
Source Sans Pro
0.85rem (13-14px)
Used for image captions or where small text is necessary.
class="cutline" or figcaption or small
Source Sans Pro, Italic
1.375rem (22px)
Used to break the monotony of the sans-serif pattern and draw attention to the text block. It can be used for a quote or call to action.
class="quote"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Colors Associated with the Absolute Brand
Primary 1
#78be20
"-bg-primary1" or
"-fg-primary1"
Primary 2
#1E4D66
"-bg-primary2" or
"-fg-primary2"
Secondary 1
#26B282
"-bg-secondary1" or
"-fg-secondary1"
Secondary 2
#30A7B0
"-bg-secondary2" or
"-fg-secondary2"
Tertiary 1
#37769D
"-bg-tertiary1" or
"-fg-tertiary1"
Tertiary 2
#0F878D
"-bg-tertiary2" or
"-fg-tertiary2"
Neutral 1
#F7F7F7
"-bg-neutral1" or
"-fg-neutral1"
Neutral 2
#E7E7E7
"-bg-neutral2" or
"-fg-neutral2"
Neutral 3
#C9C8C7
"-bg-neutral3" or
"-fg-neutral3"
Primary Button
Used as the main call-to-action
class="btn-primary"
Secondary Button
class="btn-secondary"
Outline Button Light
class="btn-outline-light"
Outline Button Dark
class="btn-outline-dark"
Text Link Dark
class="text-link-dark"
Text Link
class=""
Text Link Slant Arrow
class="text-link-dark slant-arrow"
Text Link Arrow
class="arrow"
Social media icons
