Typography
Header
Source Sans Pro Bold (700)
2.625rem (42px)
Used at the top of the page or on the home. Use sparingly.
class="header"
Subheader
Source Sans Pro Semi-Bold (600)
2rem (32px)
class="subheader"
Title
Source Sans Pro Semi-Bold (600)
2.25rem (36px)
Title of page or article
class="title"
Subtitle
Source Sans Pro 1.2rem Semi-Bold (600)
1.5rem (24px)
Used underneath the titles or introducing paragaph sections.
class="subtitle"
Intro Text
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
Cutline
Source Sans Pro
0.85rem (13-14px)
Used for image captions or where small text is necessary.
class="cutline" or figcaption or small
Quote
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"
This is a header example
This is a subheader example
This is a title
This is a subtitle
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.
This is a subtitle
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.
This is a subtitle
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.
This is a subtitle
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
Brand Colors
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"
Social Colors
Various Social Media Brand Colors
Facebook
#3b5998
"-bg-facebook" or
"-fg-facebook"
Flickr
#0063db
"-bg-flickr" or
"-fg-flickr"
Github
#4183c4
"-bg-github" or
"-fg-github"
Google Plus
#dd4b39
"-bg-googleplus" or
"-fg-googleplus"
Instagram
#517fa4
"-bg-instagram" or
"-fg-instagram"
LinkedIn
#007bb6
"-bg-linkedin" or
"-fg-linkedin"
Pinterest
#cb2027
"-bg-pinterest" or
"-fg-pinterest"
Twitter
#00aced
"-bg-twitter" or
"-fg-twitter"
Vimeo
#aad450
"-bg-vimeo" or
"-fg-vimeo"
Youtube
#b00
"-bg-youtube" or
"-fg-youtube"
Buttons
Primary Button
Used as the main call-to-action
class="button -primary"
Secondary Button
class="button -secondary"
Secondary Alt Button
class="button -secondary-alt"
Outline Button
class="button -outline"
Text Button
class="button -text"
Text Alt Button
class="button -text-alt"
Icons
Brand Icons this is a test
Icons Associated with the Scylla Brand
UI Icons
Carousel arrows, hamburgers, and close icons
Social Icons
Social media icons