Logos
Logo details on placement, padding and so on
Logo color – One color, either brand blue or white
padding???
margin???
always left aligned???
never over an image or text
Width 162px x Height 40px
Width 250px x Height 62px
Logo color – One color, either brand blue or white
padding???
margin???
always left aligned???
never over an image or text
Colors
Brand Blue
Main Color
On Hover
Icon medium blue
Icon light blue
#0092D2
#005EA0
#aecff0
#e5f2fb
Product Icon button background
Product Icon button On Hover
#E5F2FC
#B3CFEA
Brand Orange
Main Color
On Hover
Icon medium orange
Icon light orange
#F37021
#BC4605
#FEBFA2
#FEDBCD
Product Icon button background
Product Icon button On Hover
#FFEDE2
#FFCDB5
Brand Grey
#F5F5F5
#9a9a9a
Brand Red
Alert color #CD002F
Fonts
Main Font
Secondary Fonts
Whitney
Bold
Italics
Any other fonts allowed for headings of landing pages?
H1 {
font-size:44px, 2.444em
line-height: 44px, 2.444em
text-transform:uppercase
color: #000;
}
PLYmouth rock assurance
H2 {
font-size:32px, 1.7777777777777777em
line-height: 33px, 1.833em
color: #000;
}
Plymouth Rock Assurance
H3 {
font-size:18px, 1em
line-height: 23px, 1.278em
color: #000;
}
Plymouth Rock Assurance
Plymouth Rock Assurance
P {
font-size:18px, 1em
line-height: 23px, 1.278em
color: #000;
}
Plymouth Rock Assurance
Plymouth Rock Assurance
P bottom margin:15px
Text link: #0092D2
text hover: #005EA0
Lists
Bulleted lists
Unordered
Basic round bullet to be used, heading of bullet in bold(16px) with a long dash followed by list item content
Example:
- Plymouth Rock Assurance– Protects you against the physical failure of underground pipes and lines that bring critical services into your home.
Listed
???
Icon sizes
Large
Medium
Small
List of Icons
Auto
Age of Home
Motorcycle
Umbrella
Renters
Condo
Get Home Safe
Crash Busters
Get Home Safe
Car Pics
Repair Shop
Schedule a Call
Live Chat
Email a Rep
Login/Account
My Policy
New Customer
Text Adjuster
Phone
Careers
Openings
Culture
Benefits
Commercial
More
Find an Agent
Bundle
Pet
Pledge of Assurance
Road Rewards
Advanced Savings
Electronic Funds Transfer
Guaranteed Repairs
Savings
edocuments
Billing
Documents
ID Cards
Claims
Claim Free
Quick Pay
Utility Service
Systems Equipment
Personal Equipment
Appliances
Identity Protection
Cabinets and Fixtures
Flood
Collector Car
Water Craft
Life Insurance
Motor Home
Teachers
Roadside Assistance
Independent Agent
Home Cyber
Pay by Phone
Questions
Environmental
Signature
Superior
Alexia
Baseball
Football
Pay by Phone
Nice
Environmental
Buttons
Main button
padding:15px/60px/15px/60px
border:1px
corner-radius:5px
background-color: #F37021
font-color:#ffffff;
On Hover
background-color: #BC4605
Secondary Button
border:1px
corner-radius:5px
background-color: #0092D2
font-color:#ffffff;
On Hover
background-color: #005EA0
Tertiary Button
border:1px
corner-radius:5px
background-color: #ffffff
font-color:#0092D2;
On Hover
background-color: #ffffff
font-color:#005EA0
Section structure
section padding
top: 60px
bottom: 60px
section element padding
top: 30px
bottom: 30px
Max content page width:1100px
Second width:720px
Forms
Form headings H2 tag
Form fields
Field text 22/22px
Padding 15px
Border: 1px
Corner radius 5px
Label position: left above field, 8px margin-bottom
Form Submit button:
Right aligned using button sizing
