Why use it?

  • Design with accessibility in mind – Work with WCAG-compliant colour pairings, typography and components so we create inclusive experiences.
  • Design faster – Use ready-made UI elements and design tokens to speed up workflows and focus on solving user problems.
  • Maintain UI consistency – Make new products visually cohesive with the rest of UCL's digital estate.
  • Align with development – Design with components that have coded counterparts to reduce inconsistencies.

How to get started

  1. Understand the design principles – Get familiar with the core values that guide how we design and build.
  2. Explore the foundations and components – Learn about the design system, its components, and best practices.
  3. Design with the Figma UI kit – Access all design components, styles, and tokens for hi-fi prototyping.
  4. Prototype with the Figma wireframe kit – Use the wireframe kit for rapid prototyping.

Can't find what you need?

Don't worry, there's more on the way. See the roadmap to find out about upcoming releases on this site and in Figma.