From Mood Boards to Web Components: Our Journey Building a Design System for Research

Research institutions often face a unique challenge when building software platforms and scientific tools: users expect polished, intuitive interfaces, but organizations rarely have dedicated UX teams, front-end specialists, or centralized branding resources. At the same time, developers value flexibility and autonomy, making consistency difficult to achieve. In our organization, these challenges led to fragmented user experiences, duplicated front-end efforts, and a growing need for a cohesive visual and technical foundation. In the age of AI-development, this fragmentation threatened to compound without a human developed framework to guide it. This talk shares our journey designing and implementing a custom design system tailored to the needs of our scientific organization. Rather than adopting an off-the-shelf framework, we wanted full ownership and control over both the visual identity and the developer experience. The co-design process began by working with organizational leadership to define core themes and values and translated those concepts into mood boards and interface mockups. Through iterative reviews with designers, communications staff, developers, and executive leadership, we refined typography, visual language, and accessibility considerations until consensus emerged around a unified visual direction everyone was on board with. From there, we developed a scalable design system that included a shared color palette, reusable UI components, and implementation patterns designed with research software environments in mind. Due to immediate project needs, our initial component library was built in React, but the system later expanded to include framework-agnostic web components and a lightweight CSS-only implementation to support a broader range of applications and developer preferences. Currently, Packets is open source on GitHub and available to install via npm. We will briefly cover how others can integrate Packets into their own projects. Attendees will learn how a small team with limited front-end resources created an organizational design system that reduced duplication, improved consistency, and balanced the competing needs of branding, usability, and developer autonomy in a research computing environment.