basic element style guide · basic element style guide page 5 using the basic element style guide...
TRANSCRIPT
August 2016
Basic ElementStyle Guide
Dignity Health Basic Element Style Guide
Table of Contents
Introduction
4 Understanding our brand5 Style guide usage
The Visual System
7 Colors9 Typography10 Icons11 CTAs & Buttons
Photography
13 Cropping14 Choosing stock
Main Navigation Overview
16 Overview17 Top main navigation19 Footer
Template Styles
21 Index template22 Enterprise style modules23 Grid template24 Classes & events template25 Body copy with right navigation
Module Types Usage
27 One module up with photo28 Two modules up with photo29 Three modules up with photo
Right Navigation & Column Usage
31 Right navigation33 Right column with cross links34 Contact information35 Contact information with single feature item
Text Content Templates Usage
37 Text Content & bulleted lists38 Lists with copy blurbs39 Lists with images & blurbs40 Lists with images – captions only41 Accordions
Marquee & Top Banner Styles
43 Homepage – carousel or static44 Service landing45 Index style46 Text template with image
Other components
48 Video overlays49 Image grid
Introduction
Dignity Health Basic Element Style Guide
Page 4
Dignity Health was founded on the belief that all people deserve quality medicalcare, regardless of their background or circumstances. Today our family of carecenters has a strengthened commitment to keeping the human person at theforefront of modern medicine. We believe human connection is the catalystfor healing—body, mind, and spirit.
The word “dignity” perfectly defines what our organization stands for: respectingall people by providing excellent care. That means utilizing the most advancedmedical technology. It means offering clinical expertise by way of the nation’stop doctors and nurses. It means working closely with our patients so they canlead healthy, meaningful lives. And, of course, it means doing all of this withcompassion—the type of compassion that constantly seeks ways to deliverhigh-quality care at the lowest possible cost, so it’s accessible to all.
WelcomeOur brand purpose is to unleash the healing power of humanity. This powerful goal guides everything we do and gets to the heart of our unique place within the larger context of the health care field.
We aim to inspire and empower everyone our organization touches, sparking innovation and creating momentum in how we approach health care.
We want to foster the ability in all of us to heal, nourish, protect, and support our mind, body, and spirit.
We’re committed to encouraging and promoting universal human needs in everything we do. This is how we believe we can unleash the healing power of humanity.
The strength of compassion and humanity is rooted in every level of how we understand and communicate the Dignity Health brand.
Understanding Our Brand
Dignity Health Basic Element Style Guide
Page 5
Using the Basic Element Style Guide
Style Guide Usage
These guidelines establish and explain how the Dignity Health brand is to be understood and expressed.
Dignity Health focuses on the human connection at the heart of medicine by providing caring, inclusive health care services.
Use this basic element style guide to help make the right choices when creating web communications — what to do and what not to do with our visual elements, type, colors and templates.
Consistency in how the Dignity Health brand is visually represented allows us to differentiate in the health care field and reflect our unique approach to quality care.
The Visual System
Dignity Health Basic Element Style Guide
Page 7
Our ColorsOur color palette is contemporary, vibrant, and works universally across our design system. Dignity Health Orange is our primary color. It should be dominant on every piece of web communication. The other colors in the core palette have been chosen to stand in contrast to the orange.
The secondary palette consists of 4 additional accent colors which can be used on longer and content-heavy pages of web communications (for example, the Facilities Landing and the Services Cardiology page) to help provide visual interest.
Colors
Primary Colors
Secondary–Accent Colors
RGB237/116/32 #EB7A24
RGB0/188/231 #59B8E8
ORANGE BLUE
RGB72/75/77 #575C65
RGB154/153/158 #9A9C9E
GRAY 1or TEXT 1when it is used?
GRAY 2or TEXT 2 when it is used?
RGB135/189/64#87BD40
GREEN
RGB152/32/100 #982064
PURPLE
RGB30/69/144 #1E4590
DARK BLUE
RGB66/211/187 #42D3BB
TEAL
Dignity Health Basic Element Style Guide
Page 8
Color Usage Samples
Classes & Events page Homepage Facilities Landing page
Dignity Health Basic Element Style Guide
Page 9
Our TypographyTrade Gothic LT Std is the primary typeface for Dignity Health.
Trade Gothic LT Std is sans serif, which makes it more approachable, democratic, modern, and free of the classic associations of a serif typeface.
Its boldness makes it appear confident, clear, legible, and able to deliver strong hits of color, especially when used in larger headline sizes.
For consistency, follow these guidelines for treatment of headlines and body copy across layouts.
Typography
H1 Page Title
H1 Page Title
H1 Page Title
Desktop
Mobile
Tablet
H2 Subhead Headlines
H2 Subhead Headlines
H2 Subhead Headlines
H3 Subhead Headlines
H3 Subhead Headlines
H3 Subhead Headlines
Body Copy Content
Body Copy Content
Body Copy Content
Module Copy Content
Trade Gothic LT Std Light : 42pt / 46Page Main Headlines
Trade Gothic LT Std Light : 32pt / 36Page Main Headlines
Trade Gothic LT Std Light : 26pt / 28Page Main Headlines
Trade Gothic LT Std Light : 32pt / 36Subhead Headlines
Trade Gothic LT Std Light : 26pt / 28Subhead Headlines
Trade Gothic LT Std Light : 22pt / 26Subhead Headlines
Trade Gothic LT Std Regular : 26pt / 28Subhead Headlines
Trade Gothic LT Std Regular : 24pt / 26Subhead Headlines
Trade Gothic LT Std Regular : 20pt / 24Subhead Headlines
Trade Gothic LT Std Regular : 18pt / 24Body copy
Trade Gothic LT Std Regular : 16pt / 22Body copy
Trade Gothic LT Std Regular : 16pt / 22Body copy
Trade Gothic LT Std Regular : 16pt / 22Module copy
Dignity Health Basic Element Style Guide
Page 10
Our IconsA set of icons has been developed for use on web communications. The intent of the icons is to help users navigate seemslessly throughout the site and have an immediate visual recognition of the functionality.
Icons should not be altered.
Icons
Navigational Icons
Ui Icons
For Physcians
Download Email External Link
Play Video
Zoom out Zoom in
Close
Anchor Link
Find a Doctor Location Pin Document? Search Contact Us Patient Center
phone
Dignity Health Basic Element Style Guide
Page 11
Our CTAs & BUttonsThe call to action & buttons directs users to a page with additional related content.
Any link (link opens in new window) or button (link opens in new window) style deemed appropriate based on context may be used.
Calls to action & buttons direct users to new pages containing more detailed content related to the content field they accompany.
Multiple calls to action may be used together if necessary; however, only one primary button should be employed per page.
CTAs & Buttons
Solid vs. Outlined
Text Links vs. Button and Link Lists
Embedded Text Links
Text Links
Learn MoreLearn More
Link List & Download Icons
Photography
Dignity Health Basic Element Style Guide
Page 13
Our ImageryOur photography style is editorial and documentary in nature. It’s authentic and captures the human spirit and its connections.
Images should not feel posed or staged and should capture engaging moments that are honest, compassionate, and inviting.
The images should have natural light and be simple compositions that are free from clutter. Avoid medical images that are technical in nature or feel cold or sterile.
Whether medical or lifestyle, people should appear engaged and natural. Photos should be of the highest quality and ideally professionally shot.
Photography
Cropping
• Don’t remove the subject from the subject matter• Don’t crop out seemingly insignificant details that make the image more real
Welcome to Dignity Health in Sacramento
Dignity Health is known for excellence in patient care with nationally ranked hospitals and programs throughout the greater Sacramento area. We are dedicated to providing compassionate, high-quality and affordable patient-centered care.
Learn More
CAREERS WAYS TO GIVE
Search Contact UsLOCATIONSABOUT US PATIENTS & VISITORSFIND A DOCTOR SERVICES CLASSES & EVENTSSacramento
Welcome to Dignity Health in Sacramento
Dignity Health is known for excellence in patient care with nationally ranked hospitals and programs throughout the greater Sacramento area. We are dedicated to providing compassionate, high-quality and affordable patient-centered care.
Learn More
CAREERS WAYS TO GIVE
Search Contact UsLOCATIONSABOUT US PATIENTS & VISITORSFIND A DOCTORS ERVICES CLASSES & EVENTSSacramento
Do Don’t
Cardiology
Emergency Services
Neurology
Oncology
Orthopedics
Women’s Health
Dignity Health is made up of more than 60,000
caregivers and staff who deliver excellent care to
diverse communities. Through teamwork and
innovation, faith and compassion, advocacy and
action, we endeavor every day to keep you happy,
healthy, and whole. Learn More
Greater Sacramento Services Cardiology
Emergency Services
Neurology
Oncology
Orthopedics
Women’s Health
Dignity Health is made up of more than 60,000
caregivers and staff who deliver excellent care to
diverse communities. Through teamwork and
innovation, faith and compassion, advocacy and
action, we endeavor every day to keep you happy,
healthy, and whole. Learn More
Greater Sacramento Services
Do
Do
Don’t
Don’t
Do
Don’t
A direct line to help for patients andfamily members
Notice a medical change in your loved one? Something just doesn’t feel right? Need immediate attention? Dial 0 from any hospital phone
A direct line to help for patients andfamily members
Notice a medical change in your loved one? Something just doesn’t feel right? Need immediate attention? Dial 0 from any hospital phone
Woodland
New Mommy Mixer
Woodland
New Mommy Mixer
Dignity Health Basic Element Style Guide
Page 14
Our ImageryOur photography style is editorial and documentary in nature. It’s authentic and captures the human spirit and its connections.
Images should not feel posed or staged and should capture engaging moments that are honest, compassionate, and inviting.
The images should have natural light and be simple compositions that are free from clutter. Avoid medical images that are technical in nature or feel cold or sterile.
Whether medical or lifestyle, people should appear engaged and natural. Photos should be of the highest quality and ideally professionally shot.
Photography
Choosing Stock
• Don’t repeat selection of images• Don’t use stock photography that looks stagedchoose images that are relevant to the content
Do Don’t
Do
Don’t
Community Grants ProgramNam sed elit ornare, scelerisque lorem vitae, fringilla leo. Morbi at felis sit amet justo placerat mollis. In eu mi et eros tincidunt cursus non et tortor vulputate ornare lacus.
Learn More
Community Grants ProgramNam sed elit ornare, scelerisque lorem vitae, fringilla leo. Morbi at felis sit amet justo placerat mollis. In eu mi et eros tincidunt cursus non et tortor vulputate ornare lacus.
Learn More
Classes & Events
Cancer Thriving & SurvivingAre you a patient in treatment or a cancer survivor? This
six-week workshop provides education and support while
complementing your medical treatment. Learn More
Classes & Events
Cancer Thriving & SurvivingAre you a patient in treatment or a cancer survivor? This
six-week workshop provides education and support while
complementing your medical treatment. Learn More
Main NavigationOverview
Dignity Health Basic Element Style Guide
Page 16
Top Navigation Sections
Main Navigation Overview
• Find A Doctor – FaD tool & Online Waiting Room
• Locations – Map to show all facilities in the region and landing pages for all the facilities and their subpages
• Services – Information on conditions what they are, how they are treated and how your region approaches them
• Classes & Events – All classes, events, support groups, screening information should live here. If its something a person can attend it goes here, we can link to these from throughout the site but this should be where everything is listed comprehensively
• Patients & Visitors – This should be focused on the user. Its what they want to know, not what we want to tell them – it should be informational and supportive what they need before, during and after a visitation
• About Us – Any information about the region that you want to share with users, what’s going on, how you support the community, what your unique facilities are – this is for all content where you tell your story
Dignity Health Basic Element Style Guide
Page 17
Main Navigation
Top Main Navigation
Desktop
Tablet Mobile
This treatment is a more simple and clean graphic design approach. It is diiferent from the DH.org so it would be clear that the user is on a different site. This top main navigation design holds more buckets for a more efficient content experience.
Dignity Health Basic Element Style Guide
Page 18
Main Navigation
Footer
Desktop
The footer closes most pages with a reiteration of select important links from the header, links to legal or compliance information, social media information, and any required disclaimers or filing numbers for the page. Important links reiterate key pages from the header and associated mega menu.
Dignity Health Basic Element Style Guide
Page 19
Main Navigation
Footer
The footer closes most pages with a reiteration of select important links from the header, links to legal or compliance information, social media information, and any required disclaimers or filing numbers for the page. Important links reiterate key pages from the header and associated mega menu.
Tablet Mobile
Template Styles
Dignity Health Basic Element Style Guide
Page 21
Template Styles
Facilities Dense_Content Template Patients & Visitors TemplateIndex Template-Short description of the page
-List of pages that follow template
-When to use this template
Dignity Health Basic Element Style Guide
Page 22
Template Styles
About Us TemplateEnterprise Style Modules-Short description of the page
-List of pages that follow template
-When to use this template
Dignity Health Basic Element Style Guide
Page 23
Template Styles
Locations Template Service Lines TemplateGrid Template-Short description of the page
-List of pages that follow template
-When to use this template
Dignity Health Basic Element Style Guide
Page 24
Template Styles
Classes & Events TemplateClasses & Events Template-Short description of the page
-List of pages that follow template
-When to use this template
Dignity Health Basic Element Style Guide
Page 25
Template Styles
Body Copy with Right Navigation TemplateBody Copy with Right Navigation Template-Short description of the page
-List of pages that follow template
-When to use this template
Module TypesUsage
Dignity Health Basic Element Style Guide
Page 27
Module Types
One module Up with PhotoOne Module Up with PhotoCopy related here.
Could be: The one module up with photo and content block rendering, incorporates all in one a relevant photo with minimal and specific content.
This module type, as well as the two and three modules up with photo, stacks with the content and CTA/button required below on mobile usage.
Dignity Health Basic Element Style Guide
Page 28
Module Types
Two modules Up with PhotoTwo Modules Up with PhotoCopy related here.
Dignity Health Basic Element Style Guide
Page 29
Module Types
Three modules Up with PhotoThree Modules Up with PhotoCopy related here.
Right Navigation& Column Usage
Dignity Health Basic Element Style Guide
Page 31
Right Navigation & Column Usage
Right Navigation UsageRight NavigationThe right navigation is used when there are pages with a parent & child relationship.
Right Navigation with no Sub-navigation
Right Navigation with Multi-Tier Sub-navigation
Dignity Health Basic Element Style Guide
Page 32
Right Navigation & Column Usage
Right Navigation Usage for TabletRight Navigation for TabletThe right navigation is used when there are pages with a parent & child relationship.
Right Navigation collapsed
Right Navigationexpanded
Dignity Health Basic Element Style Guide
Page 33
Right Column Usage with Cross Links
Right Column Cross LinksRight Column with Cross LinksThe right column with cross links is used when there are featured items to display.
Right Column with Cross Links
Desktop Tablet Mobile
Right Column with Cross Links
Right Column with Cross Links
Dignity Health Basic Element Style Guide
Page 34
Contact Information
Contact Information BlockContact Information BlockCopy related here.
Contact Information Block
TabletDesktop Mobile
Contact Information Block
Contact Information Block
Dignity Health Basic Element Style Guide
Page 35
Single Feature
Single Feature ItemSingle Feature ItemCopy related here.
Contact Information Block with Single Feature Item
TabletDesktop Mobile
Contact Information Block with Single Feature Item
Contact Information Block with Single Feature Item
Text ContentTemplates Usage
Dignity Health Basic Element Style Guide
Page 37
Text Content Templates Usage
Text Content and Bulleted ListsText Content and Bulleted ListsCopy related here.
Dignity Health Basic Element Style Guide
Page 38
Text Content Templates Usage
Lists with Copy BlurbsLists with Copy BlurbsCopy related here.
TabletDesktop Mobile
Dignity Health Basic Element Style Guide
Page 39
Text Content Templates Usage
Lists with Images and BlurbsLists with Images and BlurbsCopy related here.
TabletDesktop Mobile
Dignity Health Basic Element Style Guide
Page 40
Text Content Templates Usage
Lists with Images – Captions OnlyLists with Images – Captions OnlyCopy related here.
TabletDesktop Mobile
Dignity Health Basic Element Style Guide
Page 41
Text Content Templates Usage
AccordionsAccordionsCopy related here.
Marquee and TopBanner Styles
Dignity Health Basic Element Style Guide
Page 43
Marquee and Top Banner Styles
MarqueeMarquee and Top BannerThe Marquee or hero rendering allows for large-scale photography on high-level pages.
These images resonate with users and they serve as a great graphic opportunity to evoke the brand promise and primary content message.
Dignity Health Basic Element Style Guide
Page 44
Marquee and Top Banner Styles
Top Banner with OverlayTop Banner with OverlayCopy related here.
Dignity Health Basic Element Style Guide
Page 45
Marquee and Top Banner Styles
Index StyleIndex StyleCopy related here.
Dignity Health Basic Element Style Guide
Page 46
Marquee and Top Banner Styles
Text Template with ImageText Template with ImageCopy related here.
Other Components
Dignity Health Basic Element Style Guide
Page 48
Video Overlays
Video OverlaysVideo OverlaysCopy related here.
Video Overlay
Dignity Health Basic Element Style Guide
Page 49
Image Grid
Image GridImage GridCopy related here.
Use this image grid template sparingly and only when it is unique related content. Stock imagery should never be used.