Digital pattern library – version 1.11.0

We have launched version 1.11.0 of the digital pattern library. This release of the DPL features new patterns and changes that will be used on the redesigned research section of the University website. We have also updated the documentation for a number of other patterns.

The following post is to provide additional context to notable updates in both versions 1.11.0 and 1.10.0 of the digital pattern library. Please see our DPL changelog for a full list of updates.


Updated web colours

We have updated our web colours based on changes to the University of St Andrews corporate identity documentation. Our new selection of colours are more lively and vibrant while still applying to web accessibility standards. The following colours have been subtly or significantly altered:

  • Light blue has been muted slightly to improve accessibility.
  • Red has been enhanced.
  • Yellow is now identical to our corporate yellow colour. It is AAA compliant with our dark text colour.
  • Cyan has been muted slightly to improve accessibility. It is now very similar to our light blue. This colour will likely become deprecated in a future release due to these similarities.
  • Orange is now AA compliant.
  • Green has seen the biggest change. It is now more vibrant and is identical to our corporate mid-green colour.
  • Dark green is now more vibrant and is identical to our corporate dark-green colour.
  • Purple is now more vibrant and is identical to our corporate purple colour.
  • Burgundy is now more vibrant and is identical to our corporate burgundy colour.
University of St Andrews colour palette. Not to be confused with Elmer the Elephant.

Featured people

The featured people pattern is a feature we are including for the re-designed research website. This pattern prominently features up to three University academics, staff or students on a web page or related case study. Links to researcher profiles or other sources are the main call to action of this pattern as they allow the user to navigate directly to further information about the featured person.


Showcase banner

The showcase banner is for displaying informative headlines, statistics and other positive content and will be used to demonstrate impact from University research. A vector icon is included to provide additional visual context for the headline. Navboxes are also included to provide a click-through reference for the headline.


Hero banners

We have significantly updated our hero banners. Due to accessibility issues, we have rendered the two existing options without transparent colour overlays as deprecated. New developments must not use these old options as they will be unsupported in a future release. We have also removed the necessity of using a photoshop template to produce suitable hero banner images.

To replace these options, we have developed new options supporting gradient overlays using our updated colour palette.


Other notable updates

    • A new option has been added to the news updates pattern. This option is designed to prominently feature case studies for the new research showcase homepage.
    • A new option has been added to the contact card pattern. This option is designed for use on the experts directory section of the news and media centre website.
    • The Lazysizes library has been added to the DPL to provide the option of deferred loading of images. This is part of a continual effort to optimise load times of the University website.
    • The code for patterns ‘more news‘, ‘featured news‘, and ‘news updates‘ have been reworked to improve stability.

Future updates

The digital communications team will continue to support and develop the digital pattern library in response to the requirements of the user.

We actively and enthusiastically work with colleagues across the University. If you would like to use the digital pattern library for your own web project, or you require consultation, please contact the digital communications team by email via itservicedesk@st-andrews.ac.uk.

Leave a Reply

Your email address will not be published. Required fields are marked *