The UCLA Design System is a set of front-end user interface styles and components. It provides designers and developers with tools and support to create on-brand, accessible, and usable digital products.
By using the UCLA design system, your website will share design, navigation, ADA compliance, and structural elements with other UCLA branded websites. However, your content and messaging will always make your website distinct. By leveraging the UCLA design system, your organization can direct its efforts towards creating meaningful, valuable, and actionable content, rather than investing time and resources into the framework and implementation of the user experience.
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.
News & Contact
For up-to-date information on the Design System, please see the Design System section on the Brand Guidelines website.
brand.ucla.edu/application/web/design-system
Version 2 May 2023 with all elements rebuilt. Specific notes below.
- Documentation added for Figma library access and usage.
- Documentation added to specify how to use components. Note: This will eventually be moved to a website resource.
- All components completely redesigned for consistency and accessibility standards.
- Updated layout grid and breakpoints.
- Addition of section spacing guidelines.
- Introduced new type scale system.
- Removed "molecule" graphic from components.
- Updated image aspect ratios.
- Redesigned icon library and addition of guidelines for consistency.
- Added alternate header option with the UCLA box logo.
- Updated global footer to dark blue. "Report Misconduct" link added.
- Updated email banner.
- Updated person card to include pronouns.
- Updated button sizes to meet touch target standards.
- "Tags" renamed to "Chips" with new specs.
- Redesigned event card.
- Removed social cards.
Original set of components released January 2021 titled "Web Components."