--- title: The UMD Design System date: 2025-02-19T11:37:00-05:00 author: Aedan Jenkins canonical_url: "https://omc.umd.edu/work/the-umd-design-system" section: Pages --- # The UMD Design System *Work* **The UMD Design System** - [Go to the site](https://designsystem.umd.edu) *Views of Terp magazine pages* *Front page of a website "The capital of quantum" — *The new* [*Terp*](https://terp.umd.edu) *magazine was a pilot design for UMD.edu.** The Design System was a sizable endeavor for the entire Web Services team. They started a 5-year plan to support the effort which included staffing, planning, design, implementation as well as educating and promoting the Design System across campus. The implementation of the first phase was completed in fall 2024. The system includes design that was optimized for users and takes into consideration the variety of sites in the university's web ecosystem. Design was woven with atomic principles in development. The resulting library of components numbers over 50, providing thousands of component combination possibilities and infinite flexibility for displaying content. - **Process: Interface Inventory** — The team reviewed the main sites at UMD to find patterns in the way information was displayed. This led to an interface inventory that would determine which components were needed, and what the requirements for each one would be. - **Process: Design** — The design process focused on flexibility. The team wanted to create components that could work across many different *types* of sites – marketing or information driven – while also being a true expression of the university's bold *Fearlessly Forward* brand. - **Process: Develop** — The development process made use of web components and atomic principles to build components that could be evolved easily. - **Process: Document** — Extensive documentation was created to provide a source of truth for usage instructions and best practices. *View of the documentation site pages* The Web Services team will continue to maintain the Design System depending on need and usage among campus partners. Partners are encouraged to have their vendors use the system to follow best practices for brand consistency, and to take advantage of the accessibility efforts baked in to the components. Questions may be directed to . - **400%** — Increase in design velocity after adoption - **50+** — total components, including variations - **12** — websites are using the design system, with a new one being released every month [Ds sizzle optimized](https://d2xiydvvjvzxk4.cloudfront.net/omc/production/videos/omc/ds-sizzle-optimized.mp4) ## Related - **The New UMD.edu** - **Terp**