UCLA starter kit
This is starter kit to build sites based on the UCLA design system. This kit is simple by design. It includes color swatches, typography, icons and a spacing system and components. The CSS presentation layer can, and should be, ported to various content creation systems popular at UCLA.
Design Principles
- This starter kit is HTML and CSS. It is platform agnostic.
- Creating a design system is a process that could span years
- To be successful, it should involve lots of teams and users across campus.
- Very rarely does a single standards, designer, developer or “overlord” succeed in creating a system that is usable and widely adopted. We cannot anticipate every use case and scenario to inform good design choices.
- A variety of expertise and talent are needed including people with experience in project and product management, accessibility, usability, content strategy, UX and UI patterns, front-end code, performance, governance, distribution, etc.
- We are a very large institution, and outside users need help navigating our offerings, our services, and understanding our value to the community beyond higher education alone.
Foundations
Components
Building blocks
- Links
- Buttons
- Lists
- Stat Blocks
- Stat Bars
- Factoids
- Rankings
Cards
- Story Cards
- Event Cards
- People Cards