1. Home
2. Documentation
3. Design

BRGR for designers

Atomic design

The BRGR design system is based on atomic design principles. This approach helps us understand that the patterns we design are interconnected and hierarchical.

Atomic design helps us design a system of components by breaking down patterns like page templates and complex interactive components into simple forms. We design these simple forms first and then combine them to build more complex patterns.

This creates a consistent user experience by making sure users only have to learn how to use a pattern once, even for complex interactions.

Ions

Ions are a repository to manage the variety of properties that any component can have. Typically, they manifest as SCSS variables. Design tools like Sketch allow us to define ions like font sizes for heading, background colours, and shadows by using text styles and layer styles.

Atoms

Basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.

Molecules

Molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule. Modules ‘do one thing and do it well’.

Organisms

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface. For example, a search form molecule is placed into a header organism with a navigation molecule and a logo atom.

How to use BRGR

Sketch Library

We have created a Sketch Library for designers who are creating design concepts for the University of Dundee. This includes:

• Text styles (atoms)
• Layer styles (atoms)
• Components (molecules)
• Page templates (organisms)

Download the Sketch Library

Fonts

This library requires the Baxter Sans typeface. Please also refer to the typography guide.

Photography

Photography is a major part of our brand and how we communicate. To ensure high standards and consistency, use only approved photography that meets our photography requirements.

Approved photography is available in our image library.

Photo treatments

We use gradient maps by blending colours. This helps make our photography more recognisable and ownable.

These image treatments are not currently available as part of BRGR. If you require the ability to apply these treatments to multiple photos or a one-off application, please contact us

Accessibility

Our mission is to create the same consistent, harmonious experience for everyone. To do this, we need to design accessible patterns, pages, and experiences.

We have a legal requirement to ensure our digital experiences are accessible to everyone. Our aim is to meet WCAG 2.1 compliance.

The following steps are essential when designing for the University of Dundee:

Understand the BRGR accessibility guidance.
This covers important requirements like colour contrast and text legibility

Read the accessibility guidance for BRGR

Refer to the University’s accessibility policy and best practice document
This is a practical guide to navigating the details of creating accessible designs.

Download the Accessibility Policy

Refer to the University’s accessibility policy and best practice document
This is a practical guide to navigating the details of creating accessible designs.

Download the Accessibility Policy

Download the Stark Sketch plugin
This will help ensure your design meets colour contrast requirements.

Download Stark

Follow up with testing
Ensure your designs are tested once developed using tools like the SiteImprove Accessibility Checker or Google Lighthouse.

IMAGE OF FUNKIFY EXTENSION HERE

The University of Dundee brand

Designers should ensure they adhere to the University’s brand guidelines. This defines standards for:

• General visual identity principles
• Use of the Baxter Sans font
• Use of photography
• Use of logos

View the brand guidelines