University of Nottingham Design System
To support a more consistent and accessible digital experience across the University’s vast ecosystem, we refreshed and expanded the existing design system. With multiple teams contributing to various platforms, it was essential to establish a unified, scalable foundation that reinforced brand consistency and usability, while enabling cohesive, on-brand user experiences across all digital services.
Colour & Shading
Typography
Spacing & Grids
Content Area
Breakpoints
Components
Buttons
Tabs
Text Inputs
Boolean
Dropdown
Search
Tiles
Checkbox Tiles
How to Use - Use in Prospectus questionnaire to select Subject and Hobbies
Course Tile
Module Tile
How to Use - Information icon button should show additional information in a tray. The tray should hold information that sits outside of the module grids.
For example some courses explain the weighting of core modules and optional ones, the explanation of how you pick credited modules can be placed here.
The number of module tiles shown is dependent on breakpoint of the page (Desktop = 12 modules/Tablet = 6 modules/Mobile = 3 modules)
After this the load more button should appear. When load more is selected, the more modules are added to the grid. If there are no more modules to add then hide the button.
Image Tile
How to Use - For large blocks of tiles, us the 6 tiles component which has a load more button to reveal additional rows.
Cards
Banners
How to Use - The ‘light’ mode can be used for page headers to introduce contents of the page contents. Text is aligned at the top for Desktop and Tablet. The ‘dark’ mode can be used as a promotional banner in the middle of a page. Text is aligned in the middle for Desktop and Tablet.
Promo Card
How to Use - Just above the footer. There should be no space between the Promo Card and the Footer
Tagged Card
How to Use - High level summary for Research Groups, Institutes, Centres. Each card is clickable and will take user through to the Research page.
Tags are also clickable.
Instagram Card
Where to Use - Promote Instagram pages of the university.
Blocks
Alerts
Where to Use - Notify users of an important message. Component can be used with or without breakpoint margins. On mobile the text truncates after 4 lines and can be expanded with the ‘Learn more’ button. The ‘i’ icon is not clickable.
Should the component be implemented as an overlay then it should always be closable. On instances that the component is an overlay should the user not close within 5 seconds the alert will disappear. If there is a interaction expected of the user, for example there is a CTA or a Learn more, then suspend the timer closing the alert after 5 seconds
Checklist
Accordions
Not Boxed
How to Use - Chose 1, 2 or 3 placeholders to show dependant on your content. For most cases you will only need one placeholder.
Replace the placeholder with one of the recommended components
Text block with no margin
Text block x3
Table
Remove the Button and Title from the text block if these are not required.
When using the block, select individual accordions to choose State, Open or Dark mode.
Only use two titles to highlight key information. Two titles can clutter the UI if used incorrectly.
Accordion Not Boxed - Single
Accordion Not Boxed - Block
Course Page Example
Course Page Tray Example
Course Tray Page (Open) Example
Boxed
How to Use - Chose 1, 2 or 3 placeholders to show dependant on your content. For most cases you will only need one placeholder.
Replace the placeholder with one of the recommended components
Text block with no margin
Text block x3
Table
Remove the Button and Title from the text block if these are not required.
When using the block, select individual accordions to choose State, Open
Accordion Boxed - Single
Accordion Boxed - Block
Accordion Boxed - Example
Navigation, Headers & Footers
Navigation
Headers
Course Header Examples
Department Header Examples
Prospectus Header Examples
Footers