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 Typography
Module types
Iconography
5
Fonts
26
2 column module
46
Icons
6
Large viewport font styles
27
2 column module
47
Icons
7
Medium viewport font styles
28
3 column module
48
Icon sizes
8
Small viewport font styles
29
3 column module
49
Icon states
9
Font style examples
30
4 column module
50
Product tree
31
4 column module
32
Icon module
33
Icon module
Colour palette
34
Small viewport modules
52
Key buttons
Colour usage
35
Small viewport modules
53
Other buttons or links
54
Mobile specific buttons
Colour 11 12
Buttons & links
Module hierarchy
Imagery 37
Forms & dropdown menus
Module hierarchy
14
Hero product image
15
Header image 1
16
Header image 2
17
Article image option 1
18
Article image option 2
39
Homepage
19
Story carousel image
40
Product landing page
20
Case study image
41
Primary product page
21
Product carousel image
42
Secondary product page
43
Product support page
44
Article page modules
Page templates
56
Forms
57
Dropdown menus
Typography 23
Large viewport header
24
Medium and small viewport header
Resmed Digital Brand Guidelines
3
01. Typography
Fonts Univers 230 Basic Thin
Univers 230 Basic Thin
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*
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.
Univers 45 Light
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&* Univers 55 Roman
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*
Univers 45 Light 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 Univers 55 Roman is used for breadcrumb navigation links only.
Univers 65 Bold Univers 65 Bold is used for breadcrumb navigation links only.
Univers 65 Bold
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&* Resmed Digital Brand Guidelines
5
Large viewport font styles
Page heading
Page title
Module Heading
Module heading
Sub heading
Univers 230 Basic Thin 74px; Line height: 90px; #000000
Univers 230 Basic Thin 63px; Line height: 77px; #000000
Sub heading Univers 230 Basic Thin 31px; Line height: 38px; #000000
Content link title
Content link title Univers 230 Basic Thin 24px; Line height: 29px; #000000
Intro copy dolor sit amet consectetur adipiscing elit. Mauris ut rhoncus lectus. Nam consectetur sem ac iaculis nunc quam.
Intro
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
Body
Product description copy dolor sit amet, consectetur elit. Mauris ut rhoncus lectus
Product description (product grid)
Link copy lorem ipsum
Link and button CTA
Univers 230 Basic Thin 21px; Line height: 27px; #000000
Univers 45 Light 17px; Line height: 24px; #000000
Univers 45 Light 15px; Line height: 20px; #000000
Univers 45 Light 15px; Line height: 20px; #df2726 ResMed > Diagnosis & Treatment > Diagnosis
Breadcrumb trail Univers 55 Roman & Univers 65 Bold 12px; #000000 Resmed Digital Brand Guidelines
6
g
Medium viewport font styles - Retina display specification
Page heading
Page title Univers 230 Basic Thin 120px; Line height: 130px; #000000 Kerning -20
Module Heading
Module heading
Sub heading
Sub heading
Univers 230 Basic Thin 86px; Line height: 92px; #000000 Kerning -20
Univers 230 Basic Thin 56px; Line height: 64px; #000000 Kerning -20
Content piece title
Content link title Univers 230 Basic Thin 36px; Line height: 44px; #000000
Intro copy dolor sit amet consectetur
Intro Univers 230 Basic Thin 34px; Line height: 42px; #000000
Body copy dolor sit amet, consectetur adipiscing elit. Mauris ut rhoncus lectus.
Body
Product description copy dolor sit amet, consectetur elit. Mauris ut
Product description (product grid)
Link copy lorem ipsum
Link and button CTA
Univers 45 Light 28px; Line height: 38px; #000000
Univers 45 Light 28px; Line height: 38px; #000000
Univers 45 Light 28px; Line height: 38px; #df2726 ResMed > Diagnosis & Treatment > Diagnosis
Breadcrumb Univers 55 Roman & Univers 65 Bold 20px; #000000 Resmed Digital Brand Guidelines
7
Small viewport font styles - Retina display specification
Page heading
Page title Univers 230 Basic Thin 64px; Line height: 75px; #000000
Module Heading
Module heading Univers 230 Basic Thin 58px; Line height: 64px; #000000
Sub heading
Sub heading Univers 230 Basic Thin 42px; Line height: 50px; #000000
Content link title
Content link title Univers 230 Basic Thin 42px; Line height: 50px; #000000
Intro copy dolor sit amet consectetur
Intro Univers 45 Light 30px; Line height: 40px; #000000
Body copy dolor sit amet, consectetur adipiscing elit. Mauris ut rhoncus lectus. Nam consectetur
Body
Product description copy dolor sit amet, consectetur elit. Mauris ut rhoncus lectus nam consectetur sem
Product description (product grid)
Link copy lorem ipsum
Link and button CTA
Univers 45 Light 30px; Line height: 40px; #000000
Univers 45 Light 30px; Line height: 40px; #000000
Univers 45 Light 32px; Line height: 41px; #df2726
Resmed Digital Brand Guidelines
8
Font style examples Breadcrumb Page heading Intro copy
Page heading
Body copy Body copy Sub heading Link copy Expanding panel text (as content link title) Intro copy updated artwork to follow
updated artwork to follow
Body copy
Content link title Pull quote text (special case)
Body copy Expanding panel text (as content link title)
Content link title Body copy Module heading Content link title Body copy
Resmed Digital Brand Guidelines
9
02. Colour
Colour palette ResMed’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).
ResMed Red
ResMed Blue
Black
ResMed Dark Grey
R:236 G:65 B:52 #df2726
R:0 G:153 B:205 #1788c3
R:0 G:0 B:0 #000000
R:34 G:34 B:34 #222222
ResMed Charcoal
ResMed Light Grey
White
R:93 G:93 B:93 #5d5d5d
R:239 G:239 B:239 #EBEBEB
R:255 G:255 B:255 #FFFFFF
Resmed Digital Brand Guidelines
11
Colour usage
White (#FFFFFF) 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.
ResMed Light Grey (#EBEBEB) Overview of subsection or secondary intro.
ResMed Black (#000000)
updated artwork to follow
ResMed Black video, media content or link to key functionality.
ResMed Blue (#1788c3) Primary colour to be used for key supporting sections i.e. associated products, product support and related
ResMed Dark Grey (#222222) 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 Red (#df2726) Use of ResMed Red is restricted to buttons and text links. Resmed Digital Brand Guidelines
12
03. Imagery
Hero product image Product 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.
941 pixels
712 pixels
Product page
Product carousel
Product grid
Product comparison tool
The product page uses full aspect product images on a white background
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 Resmed Digital Brand Guidelines
14
Header image 1 These 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
125 pixels - Area of image behind opaque nav bar
550 pixels
Key image content area A thumbnail image will be automatically generated by the CMS for the carousel Homepage
Primary product page
updated artwork to follow
Resmed Digital Brand Guidelines
15
Header image 2 These 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.
2200 pixels
125 pixels - Area of image behind opaque nav bar updated artwork to follow
350 pixels
Key image content area
Product landing page
updated artwork to follow
Product section Filter Page
updated artwork to follow
Resmed Digital Brand Guidelines
16
Article image option 1 This 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
Resmed Digital Brand Guidelines
17
Article image option 2 This 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.
1600 pixels
542 pixels
Article
Resmed Digital Brand Guidelines
18
Story carousel image All 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.
800 pixels
artwork to follow Content TBCupdated - Waiting for dev feedback
Story carousel
305 pixels
Story Index Page
Resmed Digital Brand Guidelines
19
Case study image Case 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. 636 pixels
515 pixels
Homepage
Resmed Digital Brand Guidelines
20
Product carousel image All 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.
200 pixels
274 pixels
Homepage
Resmed Digital Brand Guidelines
21
04. Header
Large viewport header
Primary nav elements Univers 45 Light 26px; #000000
Secondary nav elements Univers 45 Light 26px; #000000
Nav bar #FFFFFF 90% opacity
Images will be visible through the header which is set to 90% opacity. Images are to be kept light and clutter free. Resmed Digital Brand Guidelines
23
Medium and small viewport headers
Primary nav elements On medium viewpoint devices, the primary nav is replaced with a slide out menu
Secondary nav elements Univers 45 Light 26px; #000000
Audience selector On small viewpoint devices, the audience selector is replaced with a slide out menu
Nav bar #FFFFFF 90% opacity
Country / language selector On small viewpoint devices, the country / language selector is moved into the slide out menu
Nav bar #FFFFFF 90% opacity
Images will be visible through the header which is set to 90% opacity. Images are to be kept light and clutter free. ResMed Digital Brand Guidelines
24
05. Module Types
2 column module
Resmed Digital Brand Guidelines
26
2 column module
Resmed Digital Brand Guidelines
27
3 column module
Resmed Digital Brand Guidelines
28
3 column module
Resmed Digital Brand Guidelines
29
4 column module
Resmed Digital Brand Guidelines
30
4 column module
Resmed Digital Brand Guidelines
31
Icon module
No more than 5 columns of content to be used in this module. Resmed Digital Brand Guidelines
32
Icon module
No more than 5 columns of content to be used in this module. Resmed Digital Brand Guidelines
33
Small viewport modules - Retina display
Resmed Digital Brand Guidelines
34
Small viewport modules - Retina display
Resmed Digital Brand Guidelines
35
06. Module Hierarchy
Module hierarchy
updated artwork to follow
Resmed Digital Brand Guidelines
37
07. Page Templates
Homepage Large screen
Medium screen
Small screen
updated artwork to follow
updated artwork to follow
updated artwork to follow
Resmed Digital Brand Guidelines
39
Product landing page
Large screen
Small screen
updated artwork to follow
updated artwork to follow
Resmed Digital Brand Guidelines
40
Primary product page Large screen
Large screen
Small screen
updated artwork to follow updated artwork to follow
updated artwork to follow
Resmed Digital Brand Guidelines
41
Secondary product page
Large screen
Small screen
updated artwork to follow
updated artwork to follow
Resmed Digital Brand Guidelines
42
Product support page
Large screen
Small screen
updated artwork to follow updated artwork to follow
Resmed Digital Brand Guidelines
43
Article page modules Video article
Article 2
Light table 1
Light table 2
Article 1
Article 3
Dark table 1
References Dark table 2 Bulleted list
Resmed Digital Brand Guidelines
44
08. Iconography
Icons This 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.
Product icons
Devices
Masks
Humidifiers
Accessories
Data
Dental
Glucose levels
More energy
Reduced anxiety
Blood pressure
Symptoms and treatment icons
Overall health
Lower symptoms
The full list of icons is subject to change. Resmed Digital Brand Guidelines
46
Icons
Support icons
Our community
Take a sleep test
Find a distributor
Document
Miscellaneous icons
Download
External link
Numbers
Contact
The full list of icons is subject to change. Resmed Digital Brand Guidelines
47
Icon sizes Button icons
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
96px
TBC
Medium viewport button
Medium viewport icon
Retina display specification
Retina display specification
XXXpx
120px
Large viewport icon
TBC
Small viewport button
Small viewport icon
Retina display specification
Retina display specification
TBC
Resmed Digital Brand Guidelines
48
Icon states Button icons
Non interactive icons
Default state
Hover state
Click state
#000000
#1788c3
##0c5073
##0c5073
#000000
#1788c3
#0c5073
#0c5073
#000000
#1788c3
#B6D4FD
#B6D4FD
#FFFFFF
#00D0FF
#FFFFFF
#FFFFFF
Resmed Digital Brand Guidelines
49
Product tree The 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.
Small viewport
Large viewport
Icon sizes are defined on page 48. Resmed Digital Brand Guidelines
50
09. Buttons & Links
Key buttons Primary
Secondary
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.
Default
Rollover
Default
Rollover
Linear gradient, 90째
Linear gradient, 90째
Linear gradient, 90째
Linear gradient, 90째
Top: Colour: #df2726 R:223 G:39 B:38
Top: Colour: #df2726 R:223 G:39 B:38
Top: Colour: #393939 R:57 G:57 B:57
Top: Colour: #6b6b6b R:107 G:107 B:107
Bottom: Colour: #b71918 R:183 G:25 B:24
Bottom: Colour: #b71918 R:183 G:25 B:24
Bottom: Colour: #0f0f0f R:15 G:15 B:15
Bottom: Colour: #4c4c4c R:76 G:76 B:76
Resmed Digital Brand Guidelines
52
Other buttons & links Load more button
Primary link
External link
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.
Default
Default
Rollover
Rollover
Dark background
Dark background
The colour palette for these buttons is the same as the secondary buttons on page 23.
Default
Rollover
Expanded state
Resmed Digital Brand Guidelines
53
Mobile specific buttons Support module buttons
Expanding panel button
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.
Expanding panels feature on mobile devices only. They are used when there is additional content to reveal within a page.
Default
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.
Default Linear gradient, 90째 Top: Colour: #1f7eb1 R:31 G:126 B:177 Bottom: Colour: #186188 R:24 G:97 B:136
Expanded state
How the same module appears on a large and small viewports
Resmed Digital Brand Guidelines
54
10. Forms & Dropdown Menus
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.
Form field title Univers 45 Light 17px; #000000
Form field Prompt message
Corner radius: 8px # f4f4f4
Univers 45 Light 15px; Line height: 18px; #000000
Error / warning field Error / warning field message
1px stroke #c72220
Univers 45 Light 11px; #c72220
Resmed Digital Brand Guidelines
56
Dropdown menus This is the secondary article image. Scaled versions of this image appear across the site within various modules.
Default Stroke
Default Gradient
1px; 2b2b2b
Linear gradient, 90째
Expanded Selected state 14px; #FFFFFF
Selected state 14px; #000000
Univers 45 Light
Univers 45 Light
14px; #afafaf
14px; #646464
Rollover
14px; #FFFFFF
Top: Colour: #FFFFFF R:255 G:255 B:255 Bottom: Colour: #ebebeb R:235 G:235 B:235
Univers 45 Light
Non selected state
Univers 45 Light
Linear gradient, 90째
Expanded
Non selected state
Hover state
Gradient
1px; FFFFFF
Top: Colour: #272727 R:39 G:39 B:39 Bottom: Colour: #1b1b1b R:27 G:27 B:27
Univers 45 Light
Stroke
Rollover
Hover background #323232
Hover state Univers 45 Light 14px; #000000
Hover background #d6d6d6
Resmed Digital Brand Guidelines
57