Brand

Plymouth University logos, themes and colours.

Plymouth University colours

The primary Plymouth colours are used throughout the site. Pages are defined with a primary colour and, optionally, modules within the page can use the light, medium or dark alternative. The default is Bondi blue.

Colour definitions

All colours are defined as variables in variables.css.scss which is located in /app/assets/stylesheets.

Color palette

Website themes

Every page uses a single colour theme with Bondi blue as the default. To change theme, a single class is applied to the page body, for example,

Apply raspberry red theme

<body class="raspberry-red">
  ...
</body>

Technical implementation

Themes are defined in themes.css.scss which is located in /app/assets/stylesheets/modules.

It comprises one large apply-theme mixin which overrides colours with the appropriate light, medium or dark theme colour. For this reason, it should be the last stylesheet loaded and may require maintenance as additonal modules are created.

Photography

Before using photographic or illustrative imagery, consider the context of your communication. Bold words and flat colours may distinguish your message in an environment flooded with photographic imagery.

Ideally, all photographs should adhere with one of the following ratios.

16:9

1:1

Image resizing

Images may be automatically resized and cropped by the web CMS to ensure they are appropriate for use on the website. For best results, content editors should not upload images with a width exceeding 1,280 pixels.

4:3

3:4