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