In August 2020, the initial release of the new design system for asu.edu, a result of the community-driven Web Standards 2.0 project, was shared with the ASU web community.
ASU's Unity Design System (UDS) is a platform-agnostic design system that delivers a library of accessible components for the ASU community. It better integrates, aligns and scales the activities needed to update and improve ASU web standards. UDS drives and accelerates web standards adoption across all ASU, resulting in better brand alignment, increased precision of standards’ execution. It also minimizes duplication of work and lessens the workload for ASU’s designers, developers and product teams.
UDS has been developed using Bootstrap 4 as a framework for elements that live under our UI Kit. The more interactive components have been developed using Preact.js and React.js and they are bundled individually and published at unity.web.asu.edu.
UDS applies to all asu.edu pages and subdomains, regardless of the backend development system. The system will continue to evolve overtime through community feedback and contributions. Enterprise Technology is responsible for maintaining all code, components and technology solutions for the system.
Getting Started
Please note that some UDS content is intended for ASU content designers and website developers only. As a result, ASURITE login is required to access certain elements related to implementation.
For others in the ASU web community wishing to use the web standards components to build a website, we recommend you use Webspark, to do so. If you have any questions about access or need assistance, please contact your department website administrator.
For designers:
- Access the shared Adobe XD cloud library for UDS.
- Request access to the UDS Adobe XD template.
- Learn how to add assets to your Adobe XD file.
- See the gallery of page mock-ups using various components in the UDS library.
For developers:
- Visit unity.web.asu.edu to get familiar with the UI Kit and other components in the system. The code and assets can also be obtained by visiting this link.
- Browse the Bootstrap 4 library of components powered by Storybook.
- Request access to the GitHub repository to have access to the read.me files, download the theme packages, etc. Request access — please include the GitHub username and ASURITE ID for each user.