{Client} Web Style Guide

Color Palette

Primary
Secondary
Accent 1
Accent 2
Black
Dark Grey
Light Grey
White

Typography

Heading 1 (Page Titles)

Lorem Ipsum Dolor

Heading 2

Lorem Ipsum Dolor

Heading 3

Lorem Ipsum Dolor

Heading 4

Lorem Ipsum Dolor

Heading 5
Lorem Ipsum Dolor
Heading 6
Lorem Ipsum Dolor
Display Title 1
Lorem Ipsum Dolor
Display Title 2
Lorem Ipsum Dolor
Lead Paragraph

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.

Paragraph

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.

Lists
  • 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.

Buttons & Links

Primary Button
Secondary Button

Big Link

Medium Link

Regular Link
Primary Button
Secondary Button

Big Link

Medium Link

Regular Link

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.

Underline
Knockout
Fill
Grow
Icon
Border
All Corners
1 Corner

Forms

Inquire Now

Section Examples

Panel Content

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, 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.

Learn More

Lorem Ipsum Dolor

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

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, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Inquire Now

Lorem Ipsum Dolor

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

Get Started

View Details

Lorem Ipsum Dolor

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

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, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Inquire Now

Image Gallery