Welcome to the Learning Lab Style Guide page!
At our library, we celebrate diversity - both in our collections and in the way we communicate.
We understand that each staff member brings their unique voice and perspective, and that’s what makes our library thrive.
But sometimes, like a well-organized bookshelf, a little structure can go a long way.
Our style guide isn’t about stifling creativity; it’s about harmonising our voices into a symphony of clarity and accessibility.
Why a Style Guide?
In the past, our pages have resembled a delightful medley of fonts, colours, and layouts spread across over fifty pages.
Feedback from the wider CS team told us that whilst having a certain charm and visual appeal, this variety presented a challenge much akin to navigating a labyrinth when trying to absorb the information - exciting but complex.
Now, with our style guide, we're hoping to provide a map - guiding you and our readers clearly and smoothly through the rich content, ensuring a seamless and accessible experience for all visitors old and new.
Style Guide Colours, Layout & Fonts
Colours
The Learning Lab banner uses a mixture of reds, blues and beiges roughly in line with the official University branding colours.
Of course your page is your own to design, but we do aim to encourage a semblance between the pages to form a coherent Learning Lab style.
The codes for the colours in the Learning Lab banner as as follows:
example Dark blue: #002c5f
example Mid blue: #00a8e1
example Light blue: #a3dae8
example Bright red: #d61919
example Beige: #ece4db
example Light grey: #e8e8e4
example Background: #f8edeb
Many online platforms (including Springshare and Canva) will allow you to pick specific colours using what's called a 'hex code'.
A hex code is a string of numbers and letters which will provide a specific mix of red, green and blue to provide an exact shade of colour.
Below is an example of the window for entering the hex code for fonts in Springshare when clicking 'More colours':
You'll find the official University visual design colour guide below in a Gallery Box..
Tabbed & Gallery boxes
-
Tabbed boxes
Tabbed boxed allow content to be 'nested' under one larger heading with pages or tabs to choose from.
The main advantage of this style of box is that it keeps like information together and reduces vertical scrolling. It also means the user can see all of the headline information in one screen shot, which might help with assessing how much information is available on a certain topic. This is an example of a tabbed box. All information relating to style tips is nested with specific tabs given to specific style areas.
-
Gallery boxes
Gallery boxes group information in a horizontal carousel. The user scrolls through content which moves from left to right. The gallery box lends itself to a group of images particularly well, however, it could also be used group small pieces of text to mimic turning pages of a book.
In your Learning Lab pages, we advise using tabbed and gallery boxes to group information and help to reduce vertical scrolling.
This does not mean other types of box are not permitted.
Fonts
Office:
The University official font is 'Derailed' - this is on the website and is used in Newcastle University branded materials.
We have purchased 'Derailed' for MS Office, so please use this in Word, Publisher, Powerpoint etc. for public facing materials.
Springshare and Canva:
Springshare does not have this font, and the closest alternative to use is 'Tahoma' - use this on the Learning Lab and other libguides.
Canva does not have this font either, so please use 'Tahoma'.
Learning Lab Banners:
When using Canva to make a banner image use - 'Add a heading' - Font = 'Intro Rust G Base2line'
Official University Visual Design Colours Gallery
