The UCLA Design System provides campus communications and IT teams with styles and components to create on-brand, consistent, accessible digital experiences on websites and digital products or platforms.

Why use a design system?

A design system serves as a single source of truth for design and development teams, providing them with a common language and a shared set of tools. This provides benefits to teams as outlined in “Design Systems 101” by Therese Fessenden, Nielsen Norman Group.

  • Design and development can be created quickly and at scale.
  • It frees design resources to focus on larger, more complex problems.
  • It creates a unified language within and between crossfunctional teams.
  • It creates visual consistency across products, channels and siloed departments.
  • It can help educate junior designers and content contributors.

designsystem.brand.ucla.edu

Roadmap

UpcomingRelease
UCLA WordPress Theme & Plugin
The UCLA WordPress theme and plugins will include styles, components, and assets with the default WP page templates along with documentation.
Coming Fall 2023
Page Layouts
Add additional common page layouts in Figma and provide accompanying code.
future TBD

Past Milestones
Design Page Layouts
Styles and components are combined to create web page design layouts in Figma. Layouts are offered for use as a starting point for designers to help web pages across various screen sizes and can be used with all design kit components.
October 2023
Design System Website 2.0
This is the website you’re looking at now. It contains the inventory, code and documentation for design system elements.
June 2023
Design Kit 2.0
The source of truth for design system elements and what subsequent code is based on, this Figma design file can be used as a library by designers for website mock-ups
February 2023

Timing can change due to department priorities. For more visibility into project planning, see the UCLA Design System Roadmap on GitHub. See contact info below for GitHub access information.

Workshops

There are currently no workshops scheduled.


Past Workshops

Design System Overview

Tuesday, September 19, 2023

1:00 PM – 1:45 PM

Virtual

In this overview, the Strategic Communications Digital Team will give an overview of what a design system is, who it’s for, and how to get the most out of it. We will also walk through this year’s overhaul of the UCLA Design System which includes a rebuild Design Kit in Figma, rebuilt front-end components, added documentation, and a new WordPress Theme. We’ll also be on hand for questions and feedback.

Design System for Designers

Thursday, October 19, 2023

3:00 PM – 3:45 PM

Virtual

In this workshop, we will delve into the Figma supplement of our UCLA Design System, exploring its structure, components, and best practices for seamless collaboration and design efficiency. Whether you’re a seasoned designer or just starting your design journey, this workshop offers valuable insights and hands-on practice.

Design System for Developers

Thursday, November 2, 2023

3:00 PM – 3:45 PM

Virtual

The developer workshop will cover the practical use of the UCLA Design System by reviewing its documentation, exploring component code, discussing browser testing best practices, and showcasing real-world implementations. Participants will gain knowledge to use the Design System, understand component functionality, and learn how to contribute. The workshop focuses on using the Design System independently, not with WordPress themes or plugins.

Contributing

We are looking into ways to leverage the work and ideas of the campus community for the design system. In the meantime, please see the contact info and bug reporting channels below.

Contact

For further information on releases or to get involved in design, development, maintenance, or support of the Design System, use the communication channels below.

For requests, issues, and/or support, please use the following UCLA Campus Community Slack channel #support-design-system

Email the Design System team at
DesignSystem@stratcomm.ucla.edu

To report bugs or issues with usage, use the GitHub project tracker. You must have a GitHub account to view. You may need access to the UCLA organization page and project repositories with 2-factor authentication. Contact the design system team with your GitHub handle for access information.