IT | Security

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 Scylla Brand

Primary 1
#e92051
"-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


anchor.svg

bar-graph.svg

bird.svg

calendar.svg

camera.svg

cloud-download.svg

cloud-upload.svg

comments.svg

desktop.svg

desktop-airplane.svg

decktop-code.svg

desktop-dash.svg

desktop-gear.svg

desktop-graph.svg

devices.svg

e-commerce.svg

games.svg

global.svg

home.svg

idea.svg

interactive.svg

link.svg

lock.svg

mail.svg

map-pin.svg

megaphone.svg

mobile-gear.svg

pen-paper.svg

person.svg

search.svg

stats.svg

target.svg

target-audience.svg

thumbs-up.svg

time-money.svg

tools.svg

trash.svg

video.svg

UI Icons

Carousel arrows, hamburgers, and close icons


arrow-down.svg

arrow-left.svg

arrow-right.svg

arrow-up.svg

arrow-down-thin.svg

arrow-left-thin.svg

arrow-right-thin.svg

arrow-up-thin.svg

close.svg

close-2.svg

close-thin.svg

down.svg

hamburger.svg

kabob.svg

plus.svg

plus-2.svg

plus-thin.svg

refresh.svg

share.svg

spinner.svg

up.svg

Social Icons

Social media icons


facebook.svg

facobook-logo.svg

github-logo.svg

github-mark.svg

linkedin.svg

linkedin-logo.svg

pinterest.svg

twitter.svg

you-tube.svg

you-tube-text.svg