Resmed Digital Style Guidelines
description
Transcript of 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
5Resmed digital BRand guidelines
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*
Univers 230 Basic Thin
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*
Univers 45 Light
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*
Univers 55 Roman
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*
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
6Resmed digital BRand guidelines
Univers 230 Basic Thin63px; Line height: 77px; #000000
Module heading
Univers 230 Basic Thin74px; Line height: 90px; #000000
Page title
Univers 230 Basic Thin31px; Line height: 38px; #000000
Sub heading
Univers 230 Basic Thin24px; Line height: 29px; #000000
Content link title
Univers 230 Basic Thin21px; Line height: 27px; #000000
Intro
Univers 45 Light17px; Line height: 24px; #000000
Body
Univers 45 Light15px; Line height: 20px; #000000
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
7Resmed digital BRand guidelines
Medium viewport font styles - Retina display specification
Univers 230 Basic Thin86px; Line height: 92px; #000000 Kerning -20
Module heading
Univers 230 Basic Thin120px; Line height: 130px; #000000 Kerning -20
Page title
Univers 230 Basic Thin56px; Line height: 64px; #000000 Kerning -20
Sub heading
Univers 230 Basic Thin36px; Line height: 44px; #000000
Content link title
Univers 230 Basic Thin34px; Line height: 42px; #000000
Intro
Univers 45 Light28px; Line height: 38px; #000000
Body
Univers 45 Light28px; Line height: 38px; #000000
Product description (product grid)
Univers 45 Light28px; Line height: 38px; #DF2726
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
Link copy lorem ipsum
ResMed > Diagnosis & Treatment > Diagnosis
8Resmed digital BRand guidelines
Small viewport font styles - Retina display specification
Univers 230 Basic Thin58px; Line height: 64px; #000000
Module heading
Univers 230 Basic Thin64px; Line height: 75px; #000000
Page title
Univers 230 Basic Thin42px; Line height: 50px; #000000
Sub heading
Univers 230 Basic Thin42px; Line height: 50px; #000000
Content link title
Univers 45 Light30px; Line height: 40px; #000000
Intro
Univers 45 Light30px; Line height: 40px; #000000
Body
Univers 45 Light30px; Line height: 40px; #000000
Product description (product grid)
Univers 45 Light32px; Line height: 41px; #DF2726
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
Link copy lorem ipsum
Font style examples
9Resmed digital BRand guidelines
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).
11Resmed digital BRand guidelines
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
12Resmed digital BRand guidelines
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
14Resmed digital BRand guidelines
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.
15Resmed digital BRand guidelines
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
uPDaTeD aRTwORk TO FOLLOw
16Resmed 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.
uPDaTeD aRTwORk TO FOLLOw
uPDaTeD aRTwORk TO FOLLOw
uPDaTeD aRTwORk TO FOLLOw
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.
17Resmed digital BRand guidelines
860 pixels
470 pixels
Article Copy / image module 1 Copy / image module 2
18Resmed digital BRand guidelines
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.
19Resmed digital BRand guidelines
305 pixels
800 pixels
Story carousel Story Index Page
Content TBC - Waiting for dev feedbackuPDaTeD aRTwORk TO FOLLOw
20Resmed digital BRand guidelines
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.
21Resmed digital BRand guidelines
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
23Resmed digital BRand guidelines
Large viewport header
Secondary nav elements
Univers 45 Light 26px; #000000
Nav bar
#FFFFFF 90% opacity
Primary nav elements
Univers 45 Light 26px; #000000
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
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
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
26Resmed digital BRand guidelines
2 column module
27Resmed digital BRand guidelines
2 column module
28Resmed digital BRand guidelines
3 column module
29Resmed digital BRand guidelines
3 column module
30Resmed digital BRand guidelines
4 column module
31Resmed digital BRand guidelines
4 column module
32Resmed digital BRand guidelines
Icon module
No more than 5 columns of content to be used in this module.
33Resmed digital BRand guidelines
Icon module
No more than 5 columns of content to be used in this module.
34Resmed digital BRand guidelines
Small viewport modules - Retina display
35Resmed digital BRand guidelines
Small viewport modules - Retina display
06. Module Hierarchy
37Resmed digital BRand guidelines
Module hierarchy
This is the secondary article image. Scaled versions of this image appear across the site within various modules.
uPDaTeD aRTwORk TO FOLLOw
07. Page Templates
39Resmed digital BRand guidelines
Large screen Medium screen Small screen
Homepage
uPDaTeD aRTwORk TO FOLLOw
uPDaTeD aRTwORk TO FOLLOw
uPDaTeD aRTwORk TO
FOLLOw
40Resmed digital BRand guidelines
Product landing pageLarge screen Small screen
uPDaTeD aRTwORk TO FOLLOw
uPDaTeD aRTwORk TO
FOLLOw
41Resmed digital BRand guidelines
Primary product pageSmall screenLarge screen Large screen
uPDaTeD aRTwORk TO FOLLOwuPDaTeD aRTwORk TO FOLLOw
uPDaTeD aRTwORk TO
FOLLOw
42Resmed digital BRand guidelines
Secondary product pageLarge screen Small screen
uPDaTeD aRTwORk TO FOLLOw
uPDaTeD aRTwORk TO
FOLLOw
43Resmed digital BRand guidelines
Product support pageLarge screen Small screen
uPDaTeD aRTwORk TO FOLLOw
uPDaTeD aRTwORk TO
FOLLOw
44Resmed digital BRand guidelines
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
46Resmed digital BRand guidelines
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
47Resmed digital BRand guidelines
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
48Resmed digital BRand guidelines
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
Retina display specification
Small viewport button
Retina display specification
Small viewport icon
Retina display specification
XXXpx
120px
96px TBC
Icon sizes
TBC
TBC
Icons
49Resmed digital BRand guidelines
#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
50Resmed digital BRand guidelines
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
52Resmed digital BRand guidelines
Linear gradient, 90°
Top: Colour: #DF2726 R:223 G:39 B:38
Bottom: Colour: #B71918 R:183 G:25 B:24
Linear gradient, 90°
Top: Colour: #393939 R:57 G:57 B:57
Bottom: Colour: #0F0F0F R:15 G:15 B:15
Linear gradient, 90°
Top: Colour: #DF2726 R:223 G:39 B:38
Bottom: Colour: #B71918 R:183 G:25 B:24
Linear gradient, 90°
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
53Resmed digital BRand guidelines
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
54Resmed digital BRand guidelines
Mobile specific buttons
Linear gradient, 90°
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
56Resmed digital BRand guidelines
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
57Resmed digital BRand guidelines
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
Linear gradient, 90°
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
Linear gradient, 90°
Top: Colour: #FFFFFF R:255 G:255 B:255
Bottom: Colour: #EBEBEB R:235 G:235 B:235
#D6D6D6
Gradient
Hover background