Mosaic Design System—uniting ICPSR designs.
The Mosaic design system has been designed by the ICPSR UX team to store components that can be used for different products owned and created by ICPSR. Our Design System is a set of standardized guidelines and components for designing and building digital products. The intention is to provide a consistent, efficient, and scalable foundation for teams to build upon, ensuring that our products have a cohesive and harmonious visual language. Our Design System is more than just a collection of pretty pictures. It’s a living document that evolves with our products, teams, and users. It helps us work smarter, faster, and more collaboratively by providing a common language and toolkit for designers and developers. Using our Design System not only makes our products more visually appealing, but it also helps improve usability, accessibility, and overall user satisfaction. We invite you to explore our Design System and see how it can help your team create beautiful and functional digital products. This design system also serves as a base for non-ICPSR products. Alternate themes can be applied to the code here to stylize them according to the product brand style.
What would you like to do today?
Explore components & layouts
Explore the growing library of UI components that you can use for your product.
Use in your project
For development and production, here are some helpful links and change logs.
See it in action.
Currently, products designed by ICPSR are using the code library and the design system components. Check out a few use cases to see the application and how the products came together.
View case studiesWho is this for?
UX Designers
Designers can reference the library for components they can use in layouts for new products, features and experiences.
UX Engineers & Developers
When the developers or UX Engineers are building pages and views, they use the code from our static resources pages. The styles are added to the page from a link we provide. We build in accessibility to the components and pages.
Client-facing teams (BCDs and PUMUS)
The code library serves as a display of efficiency and product cohesion when communicating with clients and funders about their needs.
Mosaic Values
Responsive
Designers can reference the library for components they can use in layouts for new products, features and experiences.
Accessible
When the developers or UX Engineers are building pages and views, they use the code from our static resources pages.
Themable
The code library serves as a display of efficiency and product cohesion when communicating with clients and funders about their needs.