Plymouth University style guide

This guide provides website design principles information for use by Plymouth University. It is a living document and receives frequent updates as requirements and features evolve. Sections include:

  1. Style Guide An overview of the website principles.
  2. Brand Plymouth University logos, themes and colours.
  3. Typography Text fonts, sizing, spacing, weight, line lengths etc.
  4. Layout Page modules, widths, positioning etc.
  5. Interface Forms, tables, widgets etc.
  6. Components A list of components used to build to website.

Tone of voice and style guide documents

Progressive enhancement

The Plymouth University website uses best-practice progressive enhancement techniques.

Of all the web technologies, HTML is the only one which will not fail. An individual browser may not support a specific tag, but the content will remain readable. HTML provides a baseline experience which can be viewed by all users regardless of device.

Progressive enhancement then applies additional technology layers when possible. For example:

  1. images, charts and diagrams are embedded within the document
  2. CSS is applied to style the page, for example, add fonts, spacing, colours, layout etc.
  3. JavaScript is used elevate functionality. Object detection can be used, for example, if the browser supports localStorage, the user's data can be saved in the browser when connectivity drops.

If any layer fails for any reason (browser support, network failure, timeout etc), the baseline content and functionality remain operable.

Mobile-first responsive web design

The Plymouth University website uses a mobile-first methodology. This is a progressive enhancement technique which starts with the basic presumtion that basic single-column mobile-like websites will work on all devices. As the available screen resolution increases, modern browsers can apply CSS media queries which modify the styles, for example,

  • a single column may expand into two or more columns
  • there is space to show the full main navigation menu rather than hiding it behind an icon
  • text sizes can be adjusted to improve readability

It is important to note that the content does not change; it simply flows differently to look better on larger screens.


The Plymouth University website must be usable regardless of individual or browsing device. There is no 'accessible' version; the primary website should be viewable by all.