Sanfordhealth.org Elements
Page Contents
Typography
<h1> Page Title
Font Family: Open Sans
Font Size: Desktop 80px, Mobile 42px
Font Weight: Extra Bold
Hex Color: #ffffff
<h4> Header
Font Family: Open Sans
Font Size: Desktop 26px, Mobile 22px
Font Weight: Bold
Hex Color: #282828
Background Colors
Text Colors
Photo Standards
Bright, simple and airy imagery should be used in the Sanford Health website. Avoid using any dark, complex or overtly medical-related images. Smiling, happy and active individuals should be the focus. Images that convey warmth, love and hope among family, friends and medical professionals are key to creating a trusting brand for Sanford Health. Always be mindful to include images of people from a wide range of ages, races, cultural backgrounds and medical conditions. For information, visit sanfordhealth.org or Sanford Health News.
Buttons
Primary Button
Text: Open Sans Bold
Background: #003f72
Size: Variable width x 50px
Secondary Button
Text: Open Sans Bold
Background: #6AAde4
Size: Variable width x 50px
Ghost Button
Text: Open Sans Bold
1px Stroke: #003f72
Size: Variable width x 50px
Icon Library
Billing & Insurance
Breast Screening Pink
Classes & Events
Browse
Call-in
Cancer Ribbon
Care Planning
Careers
Check Wait Times
Clinical Trials
Dermatology
Expecting Families
Profile Logo
Research
Connect
Courses
Disclosure Information
Donate
e-Visits
Edith Newly Diagnosed
Share
Edith Wisdom Study
Emergency Care
Family Medicine
Find a Doctor
Find a Location
Foundation & Philanthropy
Genetics
Health Information
Health Reminders
Health Summary
Heart Care
Medical Professionals
Patient
Patient Non-medical
Information
Information for Students & Teachers
Visitors
Parking, Lodging & Wayfinding
Medical Services
Medical Specialties
Medications
Men’s Health
Messages
My Sanford Chart
My Sanford Nurse
Orthopedics & Sports Medicine
Our Story
Bill Pay Locations
Pay Bill by Mail
Online Bill Pay
Payment Plan
Bill Pay by Phone
Pay My Bill
Pediatrics
Prescription Renewal
Printer
Ask a Question
Refer a Patient
Request Colonoscopy
Research (Alt)
Resources
Share Your Experience
Technical Support
Test Results
Track My Health
Treatment
Video Visit
Walk-in
Women’s Health
Appointments
Design Examples & Structure
Homepage
Header (1)
- Logo Size: 175x45px
- Secondary Nav Text: Open Sans Semi-Bold, 20pt, #FFFFFF
- Icons: 20x20px
- Background Bar: 1920x110px, #003F72
Hero Image (2)
- Image Size: 1375x559px
- Title Text (h1): Open Sans Extrabold, 80pt, #ffffff
- Subtitle Text (h2): Open Sans, 40pt, #ffffff
Resource Quick Links (3)
- Icon Size: 35px height, width varies accordingly
- Navigation Text (h5): Open Sans Bold, 19pt, #003f72
- Background Color: #ededed
Information Links (4)
- Icon Size: 70x70px
- Title Text (h3): Open Sans Bold, 30pt, #282828
- Link Copy (Body Copy): Open Sans Semibold, 17pt, #003f72
Services (5)
- Section Title Text (h2): Open Sans Bold, 40pt, #003f72
- Body Copy: Open Sans Regular, 17pt, #282828
- Image Size: 269x269px
- Tile Copy (h5): Open Sans Bold, 19pt, #003f7
- Tile Background: 70x70px, Tile Color #ecf5fd, Picture 10% opacity
- Hover Tile: #ffffff, Tile Color #003f72, Picture – 10% opacity
- Background Color: #ededed
Tabs (6)
- Section Title Text (h2): Open Sans Bold, 40pt, #003f72
- Tab Text (h5): Open Sans Bold, 19pt, #003f72
- Caption Title (h5): Open Sans Bold, 19pt, #ffffff
- Caption Body Copy: Open Sans Regular, 17pt, #ffffff
- Caption Box Color: #003f72
- Image Size: 269x269px
News, Classes & Events (7)
- Section Title Text (h2): Open Sans Bold, 30pt, #003f72
- Title Text (h5): Open Sans Bold, 19pt, #003f72
- Body Copy: Open Sans Regular, 17pt, #282828
- Picture: 100x100px, circle or square
Subscription Bar (8)
- Copy (h4): Open Sans Bold, 26pt, #282828
- Social Icons: 50x50px
- Background Bar: 1920x125px, #ededed
Footer (9)
- Logo: 175x45px
- Link Copy (Body Copy): Open Sans Regular, 17pt, #003f72
- Fine Print: Open Sans Regular, 13pt, #282828
Main Services Page
Header (1)
- See Homepage tab for specifications
Hero Image (2)
- Image Size: 1375x298px
- Title Text (h1): Open Sans Extrabold, 80pt, #ffffff
- Subtitle Text (h2): Open Sans, 40pt, #ffffff
Introduction Copy (3)
- Title (h2): Open Sans Bold, 40pt, #003f72
- Body Copy: Open Sans Regular, 17pt, #282828
Right Rail Navigation (4)
- Section Title Text: Open Sans Extra Bold, 15pt, #282828
- Link Copy: Open Sans Semibold, 15px #003f72
Right Rail Call-out (5)
- Background Picture: 314×310 px
- Caption Title (h5): Open Sans Bold, 19pt, #ffffff
- Caption Body Copy: Open Sans Regular, 17pt, #ffffff
- Caption Box Color: #003f72
Patient Stories (6)
- Section Title Text (h2): Open Sans Bold, 40pt, #003f72
- Patient Picture: 269 x 269px
- Title Title (h4): Open Sans Bold, 26pt, #003f72
- Title Body Copy: Open Sans Regular, 17pt, #282828
- Text Link: Open Sans Bold, 16pt, #003f72, Underlined, Arrow – 15x15px
- Title Background Color: #ffffff
- Section Background Color: #ededed
Tabs (7)
- Section Title Text (h3): Open Sans Bold, 30pt, #003f72
- Title Copy (h3): Open Sans Bold, 19pt, #003f72
- Body Copy: Open Sans Bold, 17pt, #282828
- Picture: 690×402 px
News, Classes & Events (8)
- Section Title Text (h3): Open Sans Bold, 30pt, #003f72
- Title Copy (h5): Open Sans Bold, 19pt, #003f72
- Body Copy: Open Sans Bold, 17pt, #282828
- Picture: 100×100 px, circle or square
Subscription Bar (9)
- See Homepage tab for specifications
Footer (10)
- See Homepage tab for specifications
Specific Services Page
Header (1)
- See Homepage tab for specifications
Hero Image (2)
- See Main Services tab for specifications
Introduction Copy (3)
- See Main Services tab for specifications
Right Rail Navigation (4)
- See Main Services tab for specifications
Search Box (5)
- Tab Text (h5): Open Sans Bold, 19pt, #003f72
- Search Title (h3): Open Sans Bold, 30pt, #ffffff
- Background: 1000×250 px, #6aade4
Location Search Results Listing (6)
- Picture: 690 x 402px
- Location Name (h5): Open Sans Bold, 19pt, #003f72
- Phone Number (Body Copy): Open Sans Bold, 17pt, #003f72
- Address (Body Copy): Open Sans Regular, 17pt, #282828
- Distance: Open Sans Bold, 15pt, #003f72, Icon 20x28px
- Hours: Open Sans bold, 15pt, #003f72, Icon 25x25px
- Text Link: Open Sans Regular, 14pt, #003f72
Doctor Search Results Listing (6 – not shown)
- Picture: 160 x 200px
- Doctor Name (h5): Open Sans Bold, 19pt, #003f72
- Doctor Tile (Body Copy): Open Sans Bold, 17pt, #282828
- Star Rating: 20x20px
- Accepting New Patients (Body Copy): Open Sans Bold, 17pt, #003f72, Icon 17x17px
- Phone Number (Body Copy): Open Sans Bold, 17pt, #003f72
- Location Name (h5): Open Sans Bold, 19pt, #003f72
- Address (Body Copy): Open Sans Regular, 17pt, #282828
- Distance: Open Sans Bold, 15pt, #003f72, Icon 20x28px
- Text Link: Open Sans Regular, 14pt, #003f72
Suggested Services (not shown)
- Section Title Text (h2): Open Sans Bold, 40pt, #003f72
- Picture: 690 x 402px
- Tile Title (h4): Open Sans Bold, 26pt, #003f72
- Tile Body Copy: Open Sans Regular, 17pt, #282828
- Text Link: Open Sans Bold, 16pt, #003f72, Underlined,
- Arrow: 15x15px
- Tile Background Color: #ffffff
- Background Color: #ededed
Tabs (7)
- See Main Services tab for specifications
News, Classes & Events (8)
- See Main Services tab for specifications
Subscription Bar (9)
- See Main Services tab for specifications
Footer (10)
- See Main Services tab for specifications
Detail Page (Location, Doctor)
Header (1)
- See Homepage tab for specifications
Hero Image (2)
- See Main Services tab for specifications
Breadcrumbs (3)
- Copy: Open Sans Regular, Bold (Current Page), 14pt, #003f72
- Links: Open Sans Regular, 14pt, 003f72, Icon 20x20px
Introduction Copy (4)
- See Main Services tab for specifications
Information Links (5)
- See Homepage tab for specifications
Right Rail Navigation (6)
- Map: 315x315px
- Section Name: Open Sans Extra Bold, 15pt, #003f72
- Expand/Collapse Icon: 12x12px, #6aade4
- Copy: Open Sans Regular, 17pt, #282828
- Distance/Wait Time: Open Sans Bold, 15pt, #003f72, Icon 25x25px
Doctors (7)
- Section Title (h2): Open Sans Bold, 40pt, #003f72
- Body Copy: Open Sans Regular, 14pt, #282828
- Sort By (h5): Open Sans Bold, 19pt, #003f72
- Dropdown Copy: Open San Regular, 16pt, #282828
- Picture: 160 x 200 px
- Doctor Name (h5): Open Sans Bold, 19pt, #003f72
- Doctor Tile (Body Copy): Open Sans Bold, 17pt, #282828
- Star Rating: 20x20px
- Right & Left Arrows: 55x55px
- Background Color: #ededed
Tabs (8)
- See Main Services tab for specifications
Media Gallery (9)
- Picture/Video: 698x400px
- Caption Title (h5): Open Sans Bold, 19pt, #003f72
- Body Copy: Open San Regular, 17pt, #282828
- Right & Left Arrows: 55x55px
Subscription Bar (10)
- See Homepage tab for specifications
Footer (11)
- See Homepage tab for specifications