Skip to McMaster Navigation Skip to Site Navigation Skip to main content

Visual Elements

When designing web pages, McMaster’s master brand guidelines should be followed. Review these guidelines for detailed information on logos, colours, photography, visual elements and more.

Expandable List

Spacing

Working from a defined spacing system means faster and more consistent designs.

Scale

McMaster websites must be responsive across all devices, from standard desktops to smartphones. The default grid system has four columns for small to medium screens. It expands to 12 columns for larger screens with a maximum container width of 1,280px.

container padding mobile 16px, container padding desktop 32px, container max width desktop 1280px

max width desktop 1440px, min width desktop 1024px, tablet 768px, mobile 375px

Primary buttons

Primary buttons highlight the most important actions for users to take. Consistent treatment of the buttons is important for the user experience.

Poppins SemiBold – 20/24 Padding: 24px 12px
Gap: 8px
Border radius: 4px

A diagram showing what buttons look like. font: poppins semibold - 20/24, border radius 4px

 

Secondary buttons

Secondary buttons are used for actions available to the user, but with less prominence than the primary buttons.

Poppins SemiBold – 20/24 Padding: 24px 12px
Gap: 8px
Border radius: 4px

 

Tertiary buttons

Used in cards and stories, tertiary buttons are used when a call to action is provided, but is not the main calling point of the asset. These buttons are not inside a box, and will always be accompanied by an icon.

Poppins SemiBold – 20/24
Gap: 8px

 

Tables are a great way to display a large amount of structured information in a clean and organized way. Choose the right style of table to best suit your content.

Tables with column headers

Column head

Column Title: H5 SemiBold
Padding: 15px
Colour: #FFFFFF
Background: #7A003C
Bottom border: 2px solid #FDBF57

Column body

Title: H5 Regular
Body copy: Arial 16/20
Padding: 15px
Colour: #495965

 

Tables with column and row headers

Column head

Column title: H5 SemiBold
Padding: 15px
Colour: #FFFFFF
Background: #7A003C

Bottom border: 1px solid #FDBF57

Column body

Title: Body Regular
Body copy: Arial 16/20
Padding: 15px
Colour: #495965

 

Tables with no headers

Padding: 15px
Colour: #495965
Title: H5 Regular
Body copy: Arial 16/20

 

Tabs can be used to organize large amounts of related content. This helps to reduce page scroll, and breaks information into smaller pieces that are easier to consume.

Selected state

Font: H6 SemiBold
BG: #7A003C | Text: #FFF
Border top: 2px # FDBF57
Border bottom: 2px #DBDBDD

Hover state

Font: H6 Poppins SemiBold
BG: #FDBF57 | Text: #000000

Default state

Font: H6 Poppins SemiBold
BG: #FFF | Text: # 000000

Tab body

Title: H5 SemiBold #000000 (#FFF on dark mode)
Body: Arial 16/24 #495965 (#FFF on dark mode)
Padding: 32px
Gap: 16px

 

Tabs turn into an adaptive accordion on mobile.

A diagram showing how tabs look in light and dark mode on mobile. mobile tabs: 32px of spacing between tab title and content of tab, 16px of space between content header and content body, 32px between content body and edge of screen, 16px left and right margins

Clearly labelled form fields make it faster and easier for users to complete forms. Follow the guidelines when creating form fields, and keep the text labels within each field.

Label

Font: Poppins Regular 16px
Colour: #495965
(Opacity 50%)

Default

Padding: 14px 8px
Outline: 1px #DBDBDD
Border radius: 4px

Text

Font: Poppins Regular 16px
Colour: #000000

Active

Drop shadow: #DBDBDD
Angle: 0 | Opacity: 30% |
Distance: 0 | Size: 0
Spread: 30px

Text

Font: Poppins Regular 16px
Colour: #7A003C

Error message

Outline: 1px #7A003C
Drop shadow: #7A003C
Angle: 0 | Opacity: 25% |
Distance: 0 | Size: 0
Spread: 30px

Icon

Height: 16px
Colour: #7A003C

 

 

 

Clearly labelled form fields make it faster and easier for users to complete forms. Follow the guidelines when creating form fields, and keep the text labels.

Dropdown item

Colour: 495965
Padding: 14px 8px
Hover: #DBDBDD

 

Below are examples of radio buttons and checkboxes to be used, in their default, selected and focused states. These can be used in forms or selection boxes.

default: outline: 1px #495965 fill: #FFFFFF W: 20px H:20px gap: 8px selected: outer fill: 7A003C inner fill: #FFFFFF padding: 6px focused drop shadow: spread: 3 #7A003C (opacity 30%) disabled fill: #DBDBDD

default checkboxes outline: 1px #495965 fill: #FFFFFF W: 20px H:20px border radius: 6pm gap: 8px selected outer fill: #7A003C inner fill: #FFFFFF padding: 6px focused drop shadow: spread: 3 ##7A003C (opacity 30%) disabled fill: #DBDBDD

Follow these guidelines to create search bars in both light and dark modes.

The ask button takes the same styling and hover states as standard primary buttons.

 

Image hero banners

Hero banners are a great way to add visual interest to a page and give a sense of the content the viewer is about to see.

Hero banners follow the responsive grid system. To ensure users can view as much of the hero banner photo as possible, hero copy should only take up 50% (6 columns) of the entire banner on larger screen sizes. Sub-copy and button(s) on hero banners are optional.

It is important to consider the image used carefully, as there needs to be sufficient contrast between the copy and the image to ensure the copy remains legible and is accessible. General visual guidelines should be followed when selecting images for web banners.

There are a few ways hero banners can be created. The preferred strategy is to have a designer create the image for the banner, and include the circle element, if applicable, and crop or alter the image to create a solid area for the contrasting copy to sit. When creating the image, consider the grid below to ensure it will work for all screen sizes.

2000px X 2000px - safe area in the middle

Examples of banners using an image created by a designer, with the appropriate circle element and solid area for copy:

hero banner desktop - image with circle on right, text on left mobile - image with circle up top, text below

A secondary option for the banner is to have a solid colour box applied over the image to create the necessary contrasting space for the copy to sit. This box should be fully opaque (to avoid the look of an overlay that alters the appearance of people’s skin tone).

hero banner examples with text blocks on banner both in light mode and dark mode. text sits on top of either white or black box on an image banner

The last option is to use an overlay to darken or lighten an area of the photo where the copy will sit to ensure sufficient contrast. This is the least desirable option as it strays the farthest from the visual guidelines, however it is critical that accessibility is considered and copy is legible.

image hero banner with white or black background for the text that fades into the image

Hero banner copy

Follow these guidelines for copy that sits on hero banners.

hero banner title font: poppins bold 64/70 hero banner body copy font: arial regular 18/24 mobile hero banner header font: poppins bold 44/50 mobile hero banner body copy font: arial regular 18/24

text block border radius: 8px top margin for text block: 30px space under header: 20px space between body copy and button: 22px space between button and bottom of text box: 30px max text width: 568px 80px left margin text box 30px right margin text box

overlay: #FFFFFF (100%) to #FFFFFF at 90% 80px top margin 20px between heading and body copy 22px between body copy and button 80px bottom margin max text width: 568px

Text only hero banners

In the absence of a suitable photo to include on the hero banner, follow these guidelines for text only options.

black or white background with text only

hero banners with white or black backgrounds header on left, body copy on right

hero banners with white or black backgrounds, text, and partial circle on right

 

Follow these guidelines for copy that sits on text only hero banners.

 

 

Icon hero banners

If no suitable image is available, but there is still a desire to include a visual element in the banner, an icon can be used/added to a text only banner.

hero banners with white or black backgrounds with text and an icon

hero banner with white or black backgrounds, icon header and button on left, body copy text on right

icon banner icon: W: 100px H: 100px 24px space between icon and header 20px space between header and body copy 22px space between body copy and button max text width left aligned: 1280px max text width on right: 624px 32px top and bottom margins 80px left and right margins mobile icon size: W: 72px H:72px font: poppins bold 44/50 body copy: arial regular 18/24

Call to action (CTA) banners follow similar principles to hero banners.

CTA banners are an important element of a web page as they provide the reader with their next step. The copy and buttons on CTA banners should be as clear and legible as possible. This is the preferred layout for CTA banners.

CTA banners with image, text, and button with white or black backgrounds

 

Text only, or icon and text CTA banners

In the absence of a suitable photo to include on the CTA banner, either text only, or icon and text options can be used.

CTA banners with text and icons

 

Charts and infographics

To break up large amounts of copy and convey information in an easily consumable way, consider including charts and infographics throughout your web pages. Follow the brand guidelines for icons and accent colours where applicable.

Content areas

Content areas are an easy and flexible way to support up to two columns of text, responsive video, or responsive image content. Content areas follow the grid system, ensuring enough padding between columns for easy legibility.

image displaying examples of using a grid system to ensure padding for legibility

 

Page introductions

A page introduction is a sentence or two of text to introduce the page and its contents.

Title: H1 SemiBold #000000 (#FFF on dark mode)
Body: Arial Regular 16/24 #495965
(#FFF on dark mode)
Border bottom: 2px #7A003C
(#FDBF57 on Dark mode)

examples of page introductions on desktop and mobile in light and dark mode

 

Cards are components used throughout a web page that combine copy and images into a single block. Cards can either stand alone or be grouped with other cards.

image showing examples of different card treatments

 

If suitable photos or images are not available, cards can use icons or be text only.

examples of cards using an icon instead of photo

card max W: 736px min height: 170px 30px margins all around icon W: 125px H: 125px space between copy and button

Favicons are small icons that represent a website, usually displayed in the browser’s address bar, tabs, and bookmarks. Using favicons is a best practice in web design, and they are crucial for branding, usability and user experience.

Yellow background with maroon marauder from the McMaster crest to be used on websites and apps.   Example of gold and maroon favicon in a web browser tab.

Here’s why you should use them when building your McMaster webpage:

  • Branding: Favicons enhance your site’s professional appearance and reinforce brand identity.
  • Usability: These icons make it easier for users to locate and navigate to your site among multiple open tabs.
  • Visibility: Favicons help your site stand out in bookmarks, increasing the likelihood of return visits.

McMaster favicons can be found under Brand Resources > Files, Templates & Virtual Backgrounds / Website assets / Favicon.

Webpage thumbnails are small, standardized images that provide a visual preview of a webpage’s content when shared online or displayed in search results. The official McMaster logo, or Brighter World logo lockup, is used as the webpage thumbnail to ensure a consistent and professional representation of the institution across all platforms.

 

Using these official logos as a webpage thumbnail ensures:

  • Consistency: Maintaining a uniform look across all web pages strengthens McMaster’s brand identity.
  • Recognition: The logo is instantly recognizable, reinforcing McMaster’s reputation as a leading institution.
  • Professionalism: A standardized approach communicates reliability and cohesion in McMaster’s digital presence.

Where to find approved thumbnails

The approved webpage thumbnails, featuring McMaster University’s logo, under Brand Resources > Files, Templates & Virtual Backgrounds / Website Assets / Website Preview Thumbnail Images.

For further assistance or to get more tips on creating or updating your website profile image, please contact brandmrk@mcmaster.ca.