Skip to content

Design System

This page gives an overview of the Design System, describing its current status, where and how it's developed and deployed, and who is responsible for maintaining it.


The Design System (name unconfirmed) is one strand of the DPP (Digital Presence Programme). It is a collection of resources enabling developers and content editors to more easily create web publications, web apps, and websites that are consistent with the university's branding and style guidelines.

It consists of:

  • A ReactJS component library.
  • An API and example documentation website.

Expected future extensions:

  • A website for content editors, with guidelines on content style.
  • An assets download section, containing images and other content.
  • A Gatsby website template.


The Design System is currently pre alpha.

There is not, currently, a fixed timeline for releases as the development of the Design System is being done alongside the Undergraduate Admissions and University Card System projects. However it is hoped that an alpha release will be available around Autumn 2021.

The Design System is likely to factor into future changes to the internal SharePoint and external facing Drupal websites.

Various documents and websites are used to track the progress of the Design System and DPP as a whole, these are available via the DPP Sharepoint Site.

Some other documents are also used:

Document Description
Working Document Goals, Scope, Progress on the Design System
Miro Board Used for the weekly team meetings


Issues discovered in the Design System or new feature requests should be opened as GitLab issues

Urgent technical queries and support should be directed to and will be picked up by a member of the team working on the service. To ensure that you receive a response, always direct requests to rather than reaching out to team members directly.


The Design System is currently deployed to the following environments:

Name URL Supporting VMs
NPM Package @ucam/design-system
Developer Docs Not yet deployed GitLab Pages

Source code

Projects relating to the Design System are in a GitLab Group.

Repository Description
Design System A mono-repo containing the Design System and its Documentation Website

Technologies used

The following gives an overview of the technologies Design System is built on.

Category Language Framework(s)
Design System Typescript Material-UI
API Documentation Typescript Gatsby

Operational documentation

The following gives an overview of how the Design System is deployed and maintained

How and where the Design System is deployed

The Design System is published to NPM, by the ucam-devops-bot (Credentials in 1Password Team Vault).

GitLab pipelines attempt to publish a release whenever there is a change on the master branch. This only succeed if the package.json version has been updated. Upon successful publish, the commit is tagged with the version number.

Deploying a new release

To publish a new release, merge a commit to master with a new package.json version number.


Debugging and general development instructions are available in the README.


The project leads for the Digital Presence Programme are Kate Livingstone and Barney Brown

The work-stream lead for the Design System is Chris Mitchell.

The tech lead for the Design System is Richard Peach.

The following engineers have experience with the Design System and are able to respond to support requests or incidents: