UCLA Design System

Changelog

v2.1.0 Release

April 03, 2024

Accessibility

Global

  • Improve visibility of all focus states

Alert

  • Add alt text and aria labels

Callouts

  • Ranking cite color to comply with WCAG 2.1 Contrast

Form elements

  • Add aria labels for validation states

Navigation

  • Improve arrow key navigation for primary nav

Pagination

  • Add aria label for current page

Tables

  • Add default value for aria-sort

Typography

  • Add default heading font size

Features

Global

Alert

  • Add dismiss function

Grid

  • Add responsive classes for CSS Grid
  • Add column offsets

Images & Media

  • Add class for responsive embeds

Navigation

  • Change box logo link to be a single link
    • Removed gateway link

Typography

  • Change heading font-size to use clamp()

Fixes

Accordion

  • Fix caret size

Banners

  • Fix Box Banner text box responsive width

Buttons

  • Fix active state for Tertiary Button

Footer

  • Fix department footer icon states

Header

  • Remove all underlines from links
  • Fix hamburger button from wrapping in mobile

Navigation

  • Reset navigation on widnow resize

Radio & Checkbox

  • Implement fieldsets, vertical layouts, and icons
  • Fix spacing nuances

Typography

  • Fix list spacing issues

Previous Releases

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."