WellSense Digital Style Guide

Please consult the WellSense Brand Guidelines for complete information on usage of our brand.

Color palette

 

WellSense Gold
#ffb600

 

Gray 100
#f8f9fa
Module background
Table rows



 

WellSense Green
#088542

 

Gray 200
#e9ecef
Light gray button

 

WellSense Blue
#075f9e
Hyperlinks only

 

Gray 300
#dee2e6
Divider line
Table borders



 

 
 
 

 

Gray 400
#ced4da
Light gray button
hover state



 

 
 
 

 

Gray 500
#4b4f54
All copy
Table headers



Typography

Red Hat Display is the brand font.

Major page header

Red Hat Display / 600 weight / 56px / Gray 500

h1

Red Hat Display / 600 weight / 49.8744px / Gray 500

h2

Red Hat Display / 600 weight /39.6208px / Gray 500

h3

Red Hat Display / 600 weight / 30.1559px / Gray 500

h4

Red Hat Display / 600 weight / 26.2122px / Gray 500

h5

Red Hat Display / 600 weight / 22.2685px / Dark Gray

h6

Red Hat Display / 600 weight / 18.08px / Gray 500

This is body copy. 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.

Red Hat Display / 400 weight / 18.08px / Gray 500 / Margin bottom 16px

This is a link.

Red Hat Display / 500 weight / 18.08px / WellSense Blue

This is an external link.

Red Hat Display / 500 weight / 18.08px / WellSense Blue

This is bold and italicized text.

Red Hat Display / 700 weight / 18.08px / Gray 500
Red Hat Display (Italics) / 400 weight / 18.08px / Gray 500

  • For routine care, call your PCP during business hours.
  • For urgent care needs that happen after hours, please call your PCP first. If your PCP office is not available, try our 24/7 Nurse Advice Line.
  • If you are having a true emergency, please call 911.

Red Hat Display / 400 weight / 18.08px / Gray 500 / Margin between bullets: 8px / WellSense Green bullets

Elements

Button

Red Hat Display / 500 Weight / 18.08px / Gray 500 text / WellSense Gold background / Border radius: 50px

Table

  PCP Afterhours Call 9-1-1
Well visits and checkups x    
To renew a prescription x    
Sore throat, runny nose, slight fever or cold symptoms x x  
Sever stomach pain with vomiting x x x
Earache, eye soreness or pink eye x x  
Allergies and rashes x x  
To get a flu shot or other vaccine x x  
Broken bones     x
Chest pains     x
Sprains or twists x x  

Table cells: Red Hat Display / 400 weight / 14.4px / Gray 500 text
Table header: Gray 500 background / Red Hat Display / 700 weight / 14.4px / White text
Table rows: Gray 100 background / Gray 300 top and bottom border

Pagination


Showing of 1 - 10 of 64 resources


Pagination: Gray 500 text. Current page: Gray 500 background / White text

Form



Inputs: Border radius 25px / Border color Gray 400
Labels: 16px Gray 500 text
Button: Red Hat Display / 500 weight / 18.08px / Gray 500 text / WellSense Gold background / Border radius: 50px

Menu

Top level: Red Hat Display / 700 weight / 24px / Gray 500 text

Subnav level 1: Red Hat Display / 400 weight / 16px / Gray 500 text

Subnav level 2: Red Hat Display / 400 weight / 16px / Gray 500 text / Gray 100 background

 

 

Styles based on Bootstrap framework