Web Style Guide

Color Palette

Primary
#134A9A

Secondary
#0C4290

Accent
#2BBAFF

Text
#C0C0C0

Primary Dark
#14161A

Typography

Lorem Ipsum Dolor

Heading 1 & Display Heading 1 | Font: Rubik / Weight: 700 / Size: 72px / Line Height: 1.17em / Color: #FFF / Uppercase

Lorem Ipsum Dolor

Heading 2 | Font: Rubik / Weight: 700/ Size: 48px / Line Height: 1.17em / Color: #FFF / Uppercase

Lorem Ipsum Dolor

Heading 3 | Font: Rubik / Weight: 700/ Size: 45 px / Line Height: 1.17em / Color: #FFF

Lorem Ipsum Dolor

Heading 4 | Font: Rubik / Weight: 700 / Size: 32px / Line Height: 1.17em / Color: #FFF
Lorem Ipsum Dolor
Heading 5 | Font: Rubik / Weight: 500 / Size: 18px / Line Height: 1.36em / Color: #FFF
Lorem Ipsum Dolor
Heading 6 | Font: Rubik / Weight: 700 / Size: 17px / Line Height: 1.23em / Color: #FFF

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Body | Font: Rubik / Weight: 300 / Size: 18px / Line Height: 1.4em / Color: #C0C0C0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lead Paragraph | Font: Rubik / Weight: 400 / Size: 24px / Line Height: 1.4em / Color: #C0C0C0
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit.
  • Proin gravida dolor sit amet lacus accumsan
  • Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis.
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit.
  3. Proin gravida dolor sit amet lacus accumsan
  4. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis.
Lists | Font: Rubik / Weight: 300 / Size: 15px / Line Height: 1.625em / Color: #C0C0C0

Accessible Buttons

There needs to be a visible change on hover & focus. Color change is not sufficient. Pick one variation from the options below for each client.

Icons

Font Awesome 5

Elegant Icon Font

Forms

Panel Examples

0 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
0 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.
0
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.
0 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
0
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.
0 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

FAQs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. luctus nec ullamcorper mattis, pulvinar dapibus leo.

Luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio.

Learn More

Teaser Listing

Lorem Ipsum Dolor Sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.

Call to Action

Lorem Ipsum Dolor Sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.

Call to Action

Lorem Ipsum Dolor Sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.

Call to Action