Resmed Digital Style Guidelines

Digital Style Guidelines

Our digital presence is a visual expression of ResMed’s core values. It also characterises the spirit of a business aligned through a clear purpose and customer cause.

Contents

3Resmed digital BRand guidelines

Typography

Fonts

Large viewport font styles

Medium viewport font styles

Small viewport font styles

Font style examples

5

6

7

8

9

Typography

Large viewport header

Medium and small viewport header

23

24

Page templates

Homepage

Product landing page

Primary product page

Secondary product page

Product support page

Article page modules

39

40

41

42

43

44

Colour

Colour palette

Colour usage

11

12

Iconography

Icons

Icons

Icon sizes

Icon states

Product tree

46

47

48

49

50

Buttons & links

Key buttons

Other buttons or links

Mobile specific buttons

52

53

54

Forms & dropdown menus

Forms

Dropdown menus

56

57

Imagery

Hero product image

Header image 1

Header image 2

Article image option 1

Article image option 2

Story carousel image

Case study image

Product carousel image

14

15

16

17

18

19

20

21

Module types

2 column module

2 column module

3 column module

3 column module

4 column module

4 column module

Icon module

Icon module

Small viewport modules

Small viewport modules

26

27

28

29

30

31

32

33

34

35

Module hierarchy

Module hierarchy 37

01. Typography

Fonts


abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*

Univers 230 Basic Thin


Univers 45 Light


Univers 55 Roman


Univers 65 Bold

Univers 45 Light

Univers 55 Roman

Univers 65 Bold

Univers LT Pro 45 Light is used primarily for body copy and text links. Refer to the font styles on pages 7, 8 and 9 for specific details.

Univers 55 Roman is used for breadcrumb navigation links only.

Univers 65 Bold is used for breadcrumb navigation links only.

Univers 230 Basic Thin

Univers 230 Basic Thin is used primarily for key headings including page titles and module headings. Refer to the font styles on pages 7, 8 and 9 for specific details.

Large viewport font styles


Univers 230 Basic Thin63px; Line height: 77px; #000000

Module heading


Page title


Sub heading


Content link title


Intro

Univers 45 Light17px; Line height: 24px; #000000

Body


Product description (product grid)

Univers 45 Light15px; Line height: 20px; #DF2726

Link and button CTA

Univers 55 Roman & Univers 65 Bold12px; #000000

Breadcrumb trail

Module Heading

Page heading

Sub heading

Intro copy dolor sit amet consectetur adipiscing elit. Mauris ut rhoncus lectus. Nam consectetur sem ac iaculis nunc quam.

Body copy dolor sit amet, consectetur adipiscing elit. Mauris ut rhoncus lectus. Nam consectetur sem ac cursus iaculis. Nulla suscipit nunc quam, venenatis tempus tellus lacinia tincidunt. Ut risus massa feugiat non

Product description copy dolor sit amet, consectetur elit. Mauris ut rhoncus lectus

Content link title

Link copy lorem ipsum

ResMed > Diagnosis & Treatment > Diagnosis


Medium viewport font styles - Retina display specification

Univers 230 Basic Thin86px; Line height: 92px; #000000 Kerning -20

Module heading


Page title


Sub heading


Content link title


Intro


Body




Link and button CTA

Univers 55 Roman & Univers 65 Bold20px; #000000

Breadcrumb

Module Heading

Page headingPage heading

Sub heading

Intro copy dolor sit amet consectetur

Body copy dolor sit amet, consectetur adipiscing elit. Mauris ut rhoncus lectus.

Product description copy dolor sit amet, consectetur elit. Mauris ut

Content piece title


ResMed > Diagnosis & Treatment > Diagnosis


Small viewport font styles - Retina display specification


Module heading


Page title


Sub heading


Content link title


Intro


Body




Link and button CTA

Module Heading

Page heading

Sub heading

Intro copy dolor sit amet consectetur

Body copy dolor sit amet, consectetur adipiscing elit. Mauris ut rhoncus lectus. Nam consectetur

Product description copy dolor sit amet, consectetur elit. Mauris ut rhoncus lectus nam consectetur sem

Content link title


Font style examples


uPDaTeD aRTwORk TO FOLLOwuPDaTeD

aRTwORk TOFOLLOw

Content link title

Body copy

Sub heading

Body copy

Page headingBreadcrumb

Module heading

Intro copy

Intro copy

Pull quote text (special case)

Body copy

Expanding panel text (as content link title)

Link copy

Content link title

Body copy

Expanding panel text (as content link title)

Content link title

Body copy

Page heading

Body copy

02. Colour

Colour paletteResMed’s website colours are used to communicate ResMed’s core values and brand feel, as well as defining different content modules across the site (see page 12).


R:236 G:65 B:52 #DF2726

ResMed Red

R:0 G:153 B:205

#1788C3

ResMed Blue

R:239 G:239 B:239#EBEBEB

ResMed Light Grey

R:93 G:93 B:93#5D5D5D

ResMed Charcoal

R:255 G:255 B:255#FFFFFF

White

R:0 G:0 B:0 #000000

Black

R:34 G:34 B:34#222222

ResMed Dark Grey


uPDaTeD aRTwORk TO FOLLOw

Primary intro section or content area (as in article page). Note: White section with blue social media icons is also used at bottom of page. It can also be used as for a secondary video section.

Overview of subsection or secondary intro.

Use of ResMed Red is restricted to buttons and text links.

ResMed Black video, media content or link to key functionality.

White (#FFFFFF)

ResMed Light Grey (#EBEBEB)

ResMed Red (#DF2726)

ResMed Black (#000000)

Colour usage

ResMed Dark Grey is used for the product tree.

Secondary colour to be used for key supporting sections i.e. associated products, product support and related content.

ResMed Dark Grey (#222222)

Primary colour to be used for key supporting sections i.e. associated

products, product support and related

ResMed Blue (#1788C3)

03. Imagery


712 pixels

941 pixels

Product page Product carousel Product grid Product comparison tool

Hero product imageProduct images appear across the site in multiple placements and sizes. Product images are to be uploaded at the size stated here and will than be automatically scaled and resized by the CMS.

The product carousel uses a mix of product, product detail and lifestyle imagery.

The product grid uses full aspect product images on a white background

The product comparison tool uses full aspect product images on a white background

The product page uses full aspect product images on a white background

Header image 1These images appear on site homepages and on primary product pages. On homepages, the main content of the image is to be aligned on the left hand half of the key image content area so that the text content can sit on the right.

All header images are to be uploaded to the CMS at the size listed below. Imagery is to be kept light and in keeping with the style laid out in the ResMed Brand Toolkit.


2200 pixels

Key image content area

550 pixels

A thumbnail image will be automatically generated by the CMS for the carousel

Homepage Primary product page

125 pixels - Area of image behind opaque nav bar

15RESMED DIGITAL BRAND GUIDELINES



2200 pixels

Key image content area

350 pixels

125 pixels - Area of image behind opaque nav bar

Product landing page Product section Filter Page

Header image 2These images appear on the product landing page and on the 5 product section filter pages - Masks, devices, humidification, accessories and dental.

All header images are to be uploaded to the CMS at the size listed below. Imagery is to be kept light and in keeping with the style laid out in the ResMed Brand Toolkit.




article image option 1This is the primary article image size. All primary article images are to be uploaded to the CMS at the size listed below. Once uploaded, scaled versions of the image will then appear across the site within various module placements.


860 pixels

470 pixels

Article Copy / image module 1 Copy / image module 2


1600 pixels

542 pixels

Article

article image option 2This is the secondary article image size. These images are only to be used full width across article pieces.

All secondary article images are to be uploaded to the CMS at the size listed below. Once uploaded, scaled versions of the image will then appear across the site within various module placements.

Story carousel imageAll story carousel images are to be uploaded to the CMS at the size listed below. Once uploaded, scaled versions of the image will then appear across the site within various module placements.


305 pixels

800 pixels

Story carousel Story Index Page

Content TBC - Waiting for dev feedbackuPDaTeD aRTwORk TO FOLLOw


515 pixels

636 pixels

Homepage

Case study imageCase study images are used within a 2 column module to highlight a site feature or story.

All case study images are to be uploaded to the CMS at the size listed below. Images must be cut out and saved as a PNG file on a transparent background. The background colour of this module is defined through the CMS.


Homepage

200 pixels

274 pixels

Product carousel imageAll product carousel images are to be uploaded to the CMS at the size listed below. The product carousel images must be cut out and saved as a PNG file on a transparent background. The background colour of this module is defined through the CMS.

04. Header


Large viewport header

Secondary nav elements

Univers 45 Light 26px; #000000

Nav bar

#FFFFFF 90% opacity

Primary nav elements


Images will be visible through the header which is set to 90% opacity. Images are to be kept light and clutter free.

24RESMED DIGITAL BRAND GUIDELINES

Medium and small viewport headers

Secondary nav elements


Audience selector

On small viewpoint devices, the audience selector is replaced

with a slide out menu

Nav bar

#FFFFFF 90% opacity

Nav bar

#FFFFFF 90% opacity

Primary nav elements

On medium viewpoint devices, the primary nav is replaced with

a slide out menu

Images will be visible through the header which is set to 90% opacity. Images are to be kept light and clutter free.

Country / language selector

On small viewpoint devices, the country / language selector is moved into the slide out menu

05. Module Types


2 column module


2 column module


3 column module


3 column module


4 column module


4 column module


Icon module

No more than 5 columns of content to be used in this module.


Icon module

No more than 5 columns of content to be used in this module.


Small viewport modules - Retina display


Small viewport modules - Retina display

06. Module Hierarchy


Module hierarchy

This is the secondary article image. Scaled versions of this image appear across the site within various modules.


07. Page Templates


Large screen Medium screen Small screen

Homepage



uPDaTeD aRTwORk TO

FOLLOw


Product landing pageLarge screen Small screen


uPDaTeD aRTwORk TO

FOLLOw


Primary product pageSmall screenLarge screen Large screen

uPDaTeD aRTwORk TO FOLLOwuPDaTeD aRTwORk TO FOLLOw

uPDaTeD aRTwORk TO

FOLLOw


Secondary product pageLarge screen Small screen


uPDaTeD aRTwORk TO

FOLLOw


Product support pageLarge screen Small screen


uPDaTeD aRTwORk TO

FOLLOw


Bulleted list

References

Dark table 2

Dark table 1

Light table 2

Light table 1Article 2

Article 3

Article 1

Video article

article page modules

08. Iconography


Overall health Lower symptoms Glucose levels More energy Reduced anxiety Blood pressure

Symptoms and treatment icons

IconsThis custom icon set has been created exclusively for ResMed. Iconography is a key component of the digital brand, and contributes to the premium visual feel of ResMed.com.

The full list of icons is subject to change.

Devices Masks Humidifiers Accessories Data Dental

Product icons


The full list of icons is subject to change.

Icons

Contact

Download Print Document External link Numbers Contact

Miscellaneous icons

Our community Take a sleep test Find a distributor

Support icons


Button icons

This are the standard sizes for button icons across all viewport devices. Icons are used less frequently on small viewports in order to limit page length. Buttons are defined by a circular stroke around the icon element.

Large viewport button Large viewport icon

Medium viewport button

Retina display specification

Medium viewport icon


Small viewport button


Small viewport icon


XXXpx

120px

96px TBC

Icon sizes

TBC

TBC

Icons


#000000

#000000

#000000

#FFFFFF

#1788c3

#1788c3

#1788c3

#00D0FF

#0c5073

##0c5073

Click stateHover stateDefault state

#B6D4FD

#FFFFFF

#0c5073

##0c5073

#B6D4FD

#FFFFFF

Icon states

Button icons Non interactive icons


Product treeThe product tree provides users with an easy and engaging way of accessing products that are directly associated with the product they are currently viewing. This device creates a fluid user experience that links all products together on the site.

Icon sizes are defined on page 48.

Small viewport Large viewport

09. Buttons & Links


Linear gradient, 90°

Top: Colour: #DF2726 R:223 G:39 B:38

Bottom: Colour: #B71918 R:183 G:25 B:24


Top: Colour: #393939 R:57 G:57 B:57

Bottom: Colour: #0F0F0F R:15 G:15 B:15


Top: Colour: #DF2726 R:223 G:39 B:38

Bottom: Colour: #B71918 R:183 G:25 B:24


Top: Colour: #6B6B6B R:107 G:107 B:107

Bottom: Colour: #4C4C4C R:76 G:76 B:76

Default DefaultRollover Rollover

Primary

Primary buttons are used throughout the site to highlight key links. They are the only element on the site (along with some text links) that use the ResMed Red and have been designed to stand out from the rest of the site.

Secondary buttons are used in instances where two buttons are placed side by side. The primary CTA is highlighted with a red button and the secondary CTA is displayed with a grey button.

Secondary

key buttons


Default

Rollover

Expanded state

Load more button

Load more buttons are used when there is additional content to reveal within a page. The arrow icon is replaced with a + icon in the default state, and a - icon once the button has been clicked.

The colour palette for these buttons is the same as the secondary buttons on page 23.

Other buttons & links

Dark background Dark background

Rollover

DefaultDefault

Rollover

Primary link external link


Mobile specific buttons


Top: Colour: #1F7EB1 R:31 G:126 B:177

Bottom: Colour: #186188 R:24 G:97 B:136

How the same module appears on a large and small viewports

Default

Support module buttons are only used on mobile devices. They are used in blue related content modules where elements on large viewport devices (such as icons and copy) are simplified on mobile devices and replaced with buttons.

Support module buttons

Default

expanding panel button

Expanding panels feature on mobile devices only. They are used when there is additional content to reveal within a page.

The + icon is shown in the default state and the - icon once the button has been clicked to reveal more content.

The colour of these buttons is the same as the background colour of the module on a large viewpoint.

Expanded state

10. Forms & Dropdown Menus


Corner radius: 8px

# F4F4F4

Form field

1px stroke

#C72220

Error / warning field

Univers 45 Light

11px; #c72220

Error / warning field message

Forms Forms are not used in more than one column. They are stacked vertically in a row that is aligned with the center of the page.

Univers 45 Light

17px; #000000

Form field title

Univers 45 Light

15px; Line height: 18px; #000000

Prompt message


Dropdown menusThis is the secondary article image. Scaled versions of this image appear across the site within various modules.

DEFAULT

EXPANDED

ROLLOVER

Univers 45 Light

14px; #FFFFFF

1px; 2b2b2b

Selected state

Stroke

Univers 45 Light

14px; #AFAFAF

Non selected state

Univers 45 Light

14px; #FFFFFF

Hover state


Top: Colour: #272727 R:39 G:39 B:39

Bottom: Colour: #1B1B1B R:27 G:27 B:27

#323232

Gradient

Hover background

DEFAULT

EXPANDED

ROLLOVER

Univers 45 Light

14px; #000000

1px; FFFFFF

Selected state

Stroke

Univers 45 Light

14px; #646464

Non selected state

Univers 45 Light

14px; #000000

Hover state


Top: Colour: #FFFFFF R:255 G:255 B:255

Bottom: Colour: #EBEBEB R:235 G:235 B:235

#D6D6D6

Gradient

Hover background

Documents

Resmed Digital Style Guidelines