Basic Element Style Guide · Basic Element Style Guide Page 5 Using the Basic Element Style Guide...

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


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


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


Color Usage Samples

Classes & Events page Homepage Facilities Landing page


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






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 / 36Subhead Headlines



Trade Gothic LT Std Regular : 26pt / 28Subhead Headlines



Trade Gothic LT Std Regular : 18pt / 24Body copy



Trade Gothic LT Std Regular : 16pt / 22Module copy


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

email


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


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


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


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


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.


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.


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


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


Template Styles

About Us TemplateEnterprise Style Modules-Short description of the page




Template Styles

Locations Template Service Lines TemplateGrid Template-Short description of the page




Template Styles

Classes & Events TemplateClasses & Events Template-Short description of the page




Template Styles

Body Copy with Right Navigation TemplateBody Copy with Right Navigation Template-Short description of the page



Module TypesUsage


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.


Module Types

Two modules Up with PhotoTwo Modules Up with PhotoCopy related here.


Module Types

Three modules Up with PhotoThree Modules Up with PhotoCopy related here.

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



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


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




Contact Information

Contact Information BlockContact Information BlockCopy related here.

Contact Information Block

TabletDesktop Mobile




Single Feature

Single Feature ItemSingle Feature ItemCopy related here.

Contact Information Block with Single Feature Item




Text ContentTemplates Usage



Text Content and Bulleted ListsText Content and Bulleted ListsCopy related here.



Lists with Copy BlurbsLists with Copy BlurbsCopy related here.




Lists with Images and BlurbsLists with Images and BlurbsCopy related here.




Lists with Images – Captions OnlyLists with Images – Captions OnlyCopy related here.




AccordionsAccordionsCopy related here.

Marquee and TopBanner Styles


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.



Top Banner with OverlayTop Banner with OverlayCopy related here.



Index StyleIndex StyleCopy related here.



Text Template with ImageText Template with ImageCopy related here.

Other Components


Video Overlays

Video OverlaysVideo OverlaysCopy related here.

Video Overlay


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.

Basic Element Style Guide · Basic Element Style Guide Page 5 Using the Basic Element Style Guide...

Documents

Transcript of Basic Element Style Guide · Basic Element Style Guide Page 5 Using the Basic Element Style Guide...