Design System

Styles, components, patterns and standards.

Overview

The Design System is a guide to how user interfaces should look, feel, and behave at UQ. The system provides styles, layouts, components, patterns, and examples of common user interfaces at UQ. It aims to help designers and developers build projects more easily and supports the application of the UQ Brand Guidelines to ensure user interfaces across UQ are consistent.

Follow our Get started guide to see how you can use the Design System in your project. If your project has unique needs, you may need to adapt and extend what is provided in the system. If you want to share your work, contact us to become a contributor.

Build using the Design System

These libraries a collection of reusable UI elements and guidelines that product teams use to build and maintain consistent experiences across digital products.

HTML, CSS, JS component library

Styles, components, patterns and standards.

REACT component library

React is a JavaScript library primarily used for building user interfaces (UIs) for web applications and mobile apps

FIGMA component library

Design and prototyping tool used primarily for user interface (UI) and user experience (UX) design.

Community

The Design System is managed and supported by the User Interface Design and Development team in ITS Application Development and Support (ADS-UI for short). Join the Design System community on UQ Yammer for updates and discussion or email the ADS UI team webservices@uq.edu.au with questions and feedback.

We'd love to come talk to your team about the design system and answer any questions you have.

Community updates

Join the Design System community on UQ Yammer for updates.

View recent changes

Review potential changes with collaborators or view recently pushed commits.

View open issues

Build awareness of feature requests and bugs.

Contribute

If UQ development teams work together, we can save time and build better.

Our GitHub repository contains all the code and content which make up the design system.

Contact ADS-UI if you'd like to contribute to the design system.

Why have a design system?

Efficiency

Stop reinventing the wheel and create once, share for re-use with better upfront requirements.

Quality

Accessibility, browser and device compatibility, usability.

Consistency

Better customer experience and brand compliance whilst being easier to learn and maintain.

What are the main parts

UI style guide

Website where you can view examples, code and documentation.

Core styles

Foundations of "look and feel": typography, colour, spacing, imagery.

Code

A full set of code for user interfaces (HTML, CSS, javascript).

Assets

Supporting assets (icons, logo, font files).

Components

The pieces that make up a page in a website or web application: header, footer, form, table, menu, alert, tabs, accordions.

Patterns

How you combine and layout components and content in the interface.

Standards

Meet quality standards: accessibility, mobile optimisation, browser compatibility.

Usage advice

Include advice for when and how to use the component.

Best Practice

Best practice for a recurring task or process: enter an address, take a payment, display errors on a form, step users through a complex process, page not found error.

Code repository

Access a shared online code repository, e.g. github or similar (access controls).

Package registry

Published packages of html, CSS, javascript and images.

Community

BA community that uses and contributes to the design system, used by the teams who design and implement user interfaces.

Feedback

Ways to give feedback.

Expectations

It's a starting point

It's impossible for the design system to cover every use case or requirement across UQ. Our goal is to be a good starting point, covering 80% of use cases and requirements. Each project will need to address any requirements unique to the project. If your project will need a lot of additional components or support, contact us to plan for that.

It's not a straitjacket

It's important to have consistent user interfaces across UQ, but it's not meant to stop innovation. Adapt and tweak if there's a justifiable reason to deviate from standard designs for a specific use case or scenario. Consult before moving too far from the standard designs.

It's a shoestring operation

There's a very small operational team to manage and support the design system. We'll do our best to prioritise our work to meet your needs. If you plan to use the design system, allocate some time to contribute back so that the design system becomes more valuable to everyone.