Style Guide

Kaiser Permanente’s My HR

Table of ContentsTypographyFont FamilySample PlacementsHeadingsBody Text and Asides

ComponentsGrid PatternsButtonsLinksHelper ClassesFormsBreadcrumbsGlobal Action IconsTablesListsAsidesModalsFlyouts

ImagesIconsRoadsignsAction Icons

4567

9-1011-12131415-1819192021222324

2931

Typography

Typography: Font Family

For consistency within My HR, we use only one font family, with two weights.

• Twovariations:Gotham4r(reg-ular),Gotham7r(bold)

• HeadingsarealwaysDarkGray, #706259

• BodyTextisalways#555555• Ifonadarkbackground,default

coloriswhite,#FFFFFFandpreferablybold(7r)forlegibility

Gotham 7r - 28pxGotham 7r - 24pxGotham 7r - 20pxGotham 7r - 18pxGotham 7r - 15pxGotham 7r - 14pxGotham 7r - 13px

GOTHAM 7R - CAPS TREATMENT

Gotham 4r - 28pxGotham 4r - 24pxGotham 4r - 20pxGotham 4r - 18pxGotham 4r - 15pxGotham 4r - 14pxGotham 4r - 13px

GOTHAM 4R - CAPS TREATMENT

1

2

3

6

4 5

Typography: Sample Placements

Belowaresomeofthecommontypographicaltreatmentsincontext.Onthefollowingpages,lookforthecorrespondingnumberstoseedetails.

1.PageHeading2.PageSubheading3.Subheading

4.BodyTest5.AsideHeading6.AsideSubheading

Typography: Headings

For consistency within My HR, we use only one font, with two weights.

• Twofonts:Gotham4r(regular),Go-tham7r(bold)

• HeadingsarealwaysDarkGray (#706259)

• BodyTextisalways#555555• Linkscanvaryinappearance,butif

theyaretext,theyshouldbeMidBlue, with a hover state of Dark Blue

Page Heading

Page Subheading

Subheading

font color sizedesktop Gotham7r #706259 28px

mobile ““ ““ 24px

desktop Gotham4r #706259 18px

mobile ““ ““ ““

desktop Gotham4r #706259 24px

mobile ““ ““ 20px

1

2

3

Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aside Heading

Aside Body Content

Aside Subheading

font color sizedesktop Gotham4r #555555 15px

mobile ““““ ““ 13px

desktop Gotham7r #706259 18px

mobile ““ ““ ““

desktop Gotham7r N/A 13px

mobile ““ ““ ““

desktop Gotham4r #555555 13px

mobile ““ ““ ““

Typography: Body Text and Asides

• Sizesvariesslightlyforsometextele-mentsbetweenmobileanddesktop

• BodyTextisalways#555555• Linkscanvaryinappearance,butifthey

aretext,theyshouldbeMidBlue, with a hover state of Dark Blue 4

5

6

Colors

Colors

deepblue#003B71

midblue#006BA6

lightblue#90CEF1

deepviolet#472F91

midviolet#5F6DB3

light violet#97ADDA

deeprose#BB1654

midrose#F05674

light rose#FFA4B4

deeporange#E5661F

midorange#FF9E16

light orange#FFD200

deepgreen#4A7628

midgreen#5FA621

light green#AADE33

deepgray#706259

midgray#A79C94

light gray#D8D1CA

deepteal#00625C

midteal#00A19B

light teal#55DBD6

DEEP COLORS MID COLORS LIGHT COLORS

Canbeusedasabackgroundforwhite,14px+boldtextor astextoverawhitebackground

Canbeusedasabackgroundfordark,14px+boldtext

MyHRusestheKaiserPermanentebrandcolorswheneverpos-sible.Inoureffortstomakethesiteaccessibletoeveryone,weadheretoADAguidelinesforcontrast.Seeusagekeytotheright.

Components

Width:1024px

Gutter:30px

Grid Patterns and Dividing Lines

Weadheretoa12-columnlayoutforourpages,nestedinsidea1024pxbody

• Forlegibility,blocksoftextshouldnotspanmorethan8columns.

• Aside(sidebar)contentgoesontherightmost4columnsifpresent.

Note:Whilewetrytoseparatesectionswithwhitespace,occasionallyweneedtouseadividinglinetomaintainclar-ity.Ifthisbethecase,thelineshouldbe2pxwideandgray(#DDDDDD).

4 col8 col

12 col

4 col4 col

6 col2 col

4 col

4 col

Loremipsumdolorsitamet,consecteturadipiscingelit.Praesentvulputateodiorisus,etconguemagnaultriciesnec.Praesentnecantemolestie,interdumliberoeget,luctusmetus.Donecultriceseuismodtellus vitae vulputate.

Max width for block of text

Dividinglines

Grid Patterns: Examples

6 col

8 col

2 col 4 col4 col4 col4 col

4 col

Buttons

PRIMARY (ACTION) BUTTONS:

DEFAULT:COLOR:#006BA6

DEFAULT:#00A19B HOVER:#00625C DISABLED:#A69B93

LGDEFAULT:COLOR:#006BA6

LGDISABLED:COLOR:#A69B93

HOVER:COLOR:#003B71

LGHOVER:COLOR:#003B71

Clickthemtogosomewhereorstartatask.

SECONDARY (INPUT) BUTTONS:Clickthemtosubmitaformfieldorsearchquery.

MyHRusestwotypesofbuttonsfortwodifferentpurposes:doingthingsandsubmittingthings.Sizescanvarydepend-ingoncontext,butnotedarethemostcommonsizes.

• ForADAcompliance,thebuttonlabelfontmustbeatleast14px,bold,and#FFFFFF.

• Defaultbuttonsare32pxinheighttomatchthedefaultheightofBoot-strapformfields.

• Onhover,thebuttonsbecomethedarkerversionofthecolortheywerebefore.

• Largebuttonsaredesignedtofitacross4-columnsectionsofthelayout.

• OnMobile,thebuttonsexpandto100%oftheircontainer(assumingpaddingonthecontainer).

14pxGotham7r-#FFFFFF

32px

87px

310px

240px

140px

32px

Buttons: Mobile

MOBILE:Onmobile,buttonsstaythesame,exceptthattheyexpandtothewidthoftheir container.

MyHRusestwotypesofbuttonsfortwodifferentpurposes:doingthingsandsubmittingthings.Sizescanvarydepend-ingoncontext,butnotedarethemostcommonsizes.

• OnMobile,thebuttonsexpandto100%oftheircontainer(assumingpaddingonthecontainer).

14pxGotham7r#FFFFFF

Links

For the most part, My HR uses links to navigatefrompagetopage.Exceptionsaremadeforactionssuchasmarkinga page as “Helpful” or causing a list to expand.

• Unlessotherwisespecified,linksareindicatedtotheuserwithourMidBlue color,#006BA6.Onhover,theybecomeDark Blue,#003B71.

• Ifalinkwillopena.pdforsomeoth-ersortofnon-webpagedocument,we warn the user with a Dark Blue documenticon.

• Linksthatopenexapndablelistskeeptheirdefaulttextcolor.

Link

Link to Document

Hovered Link

Iconbottom-alignedtotext

Dropdown Link

Action Link

Dropdown Link

NORMAL (DEFAULT) LINKS:

SPECIAL LINKS:

#00BA6default,#003B71andunderlineonhover

Usedtoindicatespeciallinkbehavior

EXANDABLELISTLINK:Togglesdropdown

LINKTODOCUMENT:Opens.pdf,.doc,etc.

ACTIONLINK:Allowsusertotakeanaction,likewriting

FOOTERLINK:Allowsusertonavigatequicklytoimport-ant parts of the site.

#555555

Footer Link | Footer Link DarkGray(#555555)Gotham4rwithnohoverstate,14px,1pxseparator

Helper Classes

For special content in My HR, colors can helpindicateitsmeaningorpurpose,andthesecolorscantaketheformofabackgroundorbethecolorofthetextitself.

• These colors make use of Bootstrap’s “HelperClasses”

• Usecasesincludeform-validationfeedbackandexpandablehelporinfoboxes

Etiam porta sem malesuada magna mollis euismod.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

TEXT-DANGER: COLOR: #BB1654

TEXT-SUCCESS: COLOR: #4A7628

TEXT-MUTED: COLOR: #777777

BG-INFO: COLOR: # C7E6F7

BG-WARNING: COLOR: #FFD1D9

BG-SUCCESS: COLOR: #D4EE98

Forms: Comment Fields

MyHRusesBootstrapformsforitsCom-mentsandDiscussioncomponents.

• UsesBootstrap“form-control”class• Descriptiveplaceholdertext• Linksthatopenexapndablelistskeep

theirdefaulttextcolor.• Keepfieldsexapandabletoprevent

users from having to scroll when writinglongercomments

• Replyfieldshouldbeindented.• Replyfieldexpandstothreerowson

click• ReplyfieldSubmitbuttonlesswide

COMMENT FIELD:Usedtogatherinputfromusersandfacilitatediscussion

Expandablefield

SecondaryButton

DefaultBootstrapActiveState

rows=“2”

rows = “1”

Gotham4r-13px

Fineprint:Gotham4r-9px

Timestamp:Gotham4r-11px

Expandsto3rowson click

REPLY FIELD:Indented,shorterfieldforreplies,expandstothreerowsonclick.

Indent:30px

Buttonmovesbelow,bothelementstakeupfullcontainerwidth.

Forms: Search Fields

MyHRusesfieldsforCommentsandSearch.Thesearebasedlargelyonde-fault Bootstrap styles.

• Uses“form-control”Bootstrapclass• Searchbarsnotexpandable• Placeholdertextshouldguideusers

in what to search for• Icon persists even when user is typ-

inginfield.• Heightisauto-determinedbyBoot-

strapbyspecifyingnumberofrows(inthiscase,onerow)

• Widthismeanttofitinaneight-col-umncontainer.Canvaryifinadiffer-ent container.

SecondaryButton

DefaultBootstrapActiveState

Fieldtextbe-comesboldonmobile.(Gotham7r)

Searchicon

Border-radius:0px

486px,doesn’texpand

Gotham4r-13px

rows = “1”

DESKTOP SEARCH:

MOBILE SEARCH:

Buttontoright,fitsin8-columnsection

Forms: Search Fields

MyHRusesfieldsforCommentsandSearch.Thesearebasedlargelyonde-fault Bootstrap styles.

• FortheGlobalsearchbarthatap-pearsintheheader,wewantedaslightlydifferentstyle.

• Forthisfield,weutilizeBootstrap’s“input group” class, which allows for abuttontobeaddedattheendofthefield.

• Willhavetooverridedefaultstoachievesquarecorners.

Border-radius:0px

Placeholdertext:13pxGotham4r

IconColor#555555

Buttonbgcolor:#E6E6E6

?

14px8px 8px

DeepGray(#706259)13pxGotham4r

Color:MidGray#A79C94

Hover:DarkGray#706259

Aligntocenter

ICONS:Glyphicons:-thumbs-up,18px-share-alt,24px-print,24px-question,24px

Breadcrumbsareanessentialpartofthenaviga-tionforcomplexportalslikeMyHR.

• Thebreadcrumbsbeginwiththemegamenucategory the user is currently in. Because there is no category “home page,” these are unlinked.

• Therestofthecrumbsarelinked,includingthecurrentlocation.

• Onhover,linksbehavelikeotherlinks.• Pagereloadsonclick.

Theseiconsarepresentoneverypageandenableprinting,liking,sharing,andlookingforhelp.

• Numbernexttothumbs-upincreaseswithclicks on the “Helpful” part

• “Helpful”sectionbehaveslikealink(asonFacebook)

22px

LinkFontSize:15pxFont:Gotham4r

Breadcrumbs

Global Action Icons

Benefits & Wellness / Healthy Me / Gym Discounts

Link

Color:MidGray#A79C94

Hover:DarkGray#706259

Aligntocenter

Tables

TablesinMyHRareusefulindisplayingmore“structured”information(schedules,etc.)

• Uses“table-striped”Bootstrapclass• TableHeadingsareinGotham7r,Table

BodyisinGotham4r,bothat15px• Fontreducesto13pxonmobile• Embedin“table-responsive”Bootstrap

class(scrollableonmobile,makesuseof“overflow-y”)

• Defaultpadding• Expandstofullwidthofcontainer

Gotham4r*,15px

Gotham7r*,15px

*Gothamnotshowninthisexample,butshouldbeusedindevelopment

“table-responsive”allowsusertoscrollhorizontallyonmobile,alsoaddsbordersforclarity.

Fontsizereducesto13px

Lists

ListsinMyHRcomeinsimpleandcomplexforms.

• Simplelistsareusuallystyledwithnobulletsornumbers.Spacebetweenitemsandalignmentisusedtoindicatea list.

• Complexlistscontainexpandablemenusandaclearheirarchy. Nobulletsor

numbers

Formultiple-lineitemslikethese,doubletheirownlinespacingformarginbetweenthem.

Noliststyle,usewhitespaceforcleardivisionbetweenitems

Expandablelists,iconstoindicatenon-webresources,shareiconsatright

SIMPLE LIST:

COMPLEX LIST: Shareiconsatrightedgeofparentcontainer

Eachlevelofindentation

is27px

18pxGotham7rDeepGray(#706259)

Asides (Sidebars)

Asidesaresectionsofapagethatcontainrelatedorotherwiserelevantcontentoractions.TheseusuallytaketheformofrightsidebarsinMyHR.

• 4Bootstrapmdcolumnswide• Usuallyseparatedbyaline• Nature of content can vary -- can in-

cludetext,links,videos,images,etc.• OnMobile,Asidesinksbelowmain

content.

4-col Aside

12px

25px

10px

10pxindent

AsideSubheading

AsideSubheading

AsideBodyCopy

ActionLink15pxGotham4r

AsideBodyCopy

(AsideHeadingnotnecessaryifnatureofcontentisobvious.)

AsideHeading

Modals

UsedsparinglyinMyHR,modalsarestyledsimply as smaller pages.

• Minimumwidth:600px• Canexpandtofitlargercontent.• 2pxgray(#DDDDDD)bottomborder

afterheading• 1pxgray(#DDDDDD)topborderon

footer(iffooterispresent)• DefaultBootstrapdropshadowtoindi-

cate overlay.

Pageheadingtreatment

BodyText

PrimarybuttonDefaultbootstrapdropshadow

2pxsolidgray(#DDDDDD)bottomborderonheading

Flyouts

FlyoutsareusedwhenneededforHelpcontent in My HR.

• Tomimicbuttonbehavior,tabsaredarkerwhenactive,turningfrommid-greenbackgroundtodarkgreenbackground.

• Windowsthemselvesshouldhaveaminimumheightof350px,butcanexpandtofitcontent.

• Tabscanalsoexpandtofitlongerti-tles,buttitlesshouldbekeptminimal.

• Leftedgeofflyoutsshouldhavea5pxstripeofactivestate’scolortoprovidea“tab”effect.

• Flyoutwindowhasa1pxgray(#DDDDDD)bordertoseparatefromrest of page content

• Slightdropshadowontabsandwin-dowstoindicateoverlay.(box-shadow:1px1px2px#888888;)

• Interiortreatments(typography,etc.)shouldreflectotherstylesonMyHR.

• No“closeicon”--tabsshouldtoggleonclickofthetab.

Activetabdarkertofollowbuttonconvention,stripeofdarkonsideofwindow

Bothtabsgreen,orinactive.Stripenotvisible.

OPEN STATES CLOSED STATE

Min-width:94px

45px

5pxsolid#004A00

Tabscanexpandtofitlongertitles.Maintain minimum 25pxpadingonbothsides

Smalldropshadow:box-shadow:1px1px2px#888888;

1pxborder,gray(#DDDDDD)

Help Co

Bisnonsendasda ustectorrum aut optamusandebisquaepedio.Lsasa

10pxmarginbetweentabs

Images

Images: In-text

Images in My HR follow Kaiser Permanente corporateguidelines.ThereisaselectionofimagesintheKPbrandlibrary:http://brand-center.kp.org.Anyimagesoutsideofthelibraryneedtobeapproved.

• Imagesshouldbesizedtofitthepagegridinawaythatdoesnotsqueezethetextintonarrowcolumns.Thebestwayofdoingthisistoselecteitheranimagethatisthefullwidthorhalfwidthofitsgridsection.310pxand645pxarerec-ommendedwidths.

• Imagesshouldhaveatleast20pxofwhitespaceonallsides.

• Onmobile,imagesshouldbe100%oftheircontainer.Thiscanbeaccomplishedbyapplyingan“img-responsive”classnativetoBootstrap.

310px

645px

200px

200px

20px

Images: As Section Heads

• Imagescanalsobeusedasanillustrative“header”forasection

• Inthisusecase,thewidthoftheimageshouldbe100%ofitssection.

100%ofcontainer

Atleast10pxmargin

Icons

Icons: Roadsigns

SomeiconsinMyHRareusedasmnemonicdevicesor“roadsigns”thatindicatecontentaheadormarkitwithincontext.Mostofthesearecustom-madeforKP.

• Iconsshouldbesizedrelativetosur-roundingcontent,butshouldbetallerthananyaccompanyingtextandvertical-lycenter-aligned.

• Iconsshouldbereflectiveofindicatedcontent.

Icons taller than text(about2x)andcenteraligned.

Icons: Roadsigns

HereisalibraryofsampleRoadsignicons.Backgroundcolorscanvary.Ifnecessary,morecanbecustom-madeinthisstyle.

• PleasenotetheuseofKPbrandcolorsasbackground(seeColorssection).

• Iconsalwayshaveawhiteforground

Hastodowithemployeebenefits

Indicatespeopleorgroupsofpeople

Pointstoinformationresources

Indicatesanactiontobetaken

BENEFITS:

PEOPLE:

INFORMATION

ACTIONS

Icons: Actions: Sample Placements

12

3

6

10

8 9

11

7

4

5

Belowaresomeexamplesofactioniconsincontext.Onthefollowingpage,lookforthecorre-spondingnumberstoseetheicon’sname.Also,findinstructionsonhowtousethemincode.

12

Icons: Actions

Forclickableiconsandiconsthatareat-tachedtolinks,MyHRusestheGlyphiconlibrarythatcomeswithBootstrap.

• Colorsandbehaviorsoftheiconsvarywiththeircontext.

• Iconshouldreflectitspurposeaseffe-civelyaspossible

• Fulldirectionsforusearehere:http://getbootstrap.com/components/#glyphi-cons-how-to-use

-edit:startswritingaction-download:startsdownloadprocess

-search:indicatessearchaction

-bullhorn:indicateswarningor “alert” content

-book:indicatesalistoftopics

-thumbs-up:endorsescontent

-triangle-right:indicatesexpandablelist

-calendar:indicatescalendarcontent

-remove:closeswindows

-comment:indicatesdiscus-sion content

-file:warnsusersthatlinkistoanon-webresource

-share-alt:startssharingprocess

-triangle-bottom:indicatesexpandedlist

-education:indicatestrainingcontent

-ok:indicatesQuickLinks

Basicexample:

<span class=”glyphicon glyphicon-search” aria-hidden=”true”></span>

-question-sign:indicateshelpcontent

-print:startsprintingaction

1 2

3

6

10

8

9

11 12

7

4

5