We needed a system that could scale across web platforms, support complex data interactions, and remain simple enough to onboard new designers and developers quickly. Our design system helped teams move faster, reduced redundant decisions, and improved cross-functional communication.

Our legacy design patterns were fragile, undocumented, and siloed. As Holmz scaled into multiple tools — including an Admin Portal, Analytics Dashboard, and Wearable Management — we needed a stronger foundation to maintain quality and coherence across features.

Across all of PNNL's Serberus projects, the Blueprint Design System by Palantir is the backbone of all visual systems. However, designers used Figma and Adobe XD, while developers lacked access to these tools, causing fragmented workflows, lowering design consistency, and hindering inter-team communication.The goal was to create a central Figma component library that was built using HTML language to improve standardization.As a early-stage start-up, their primary focus is on quick ideation and testing. The team needed a design system that is easy to use, aligned with code, and flexible enough to handle creating new features quickly. Since JSCSR also works with external developers and contractors, the handoff from design teams to development teams was also. The library should enable a seamless creation of mockups and wireframes that can be translated into functional tools.I developed a comprehensive design system that improved design consistency and cross platform efficiency across multiple projects with 200+ users.

I looked into what we components we were using across our iOS app and website to a establish a design system that could support a web app, website and an iOS app. Building an admin web-app also gave us an opportunity to reestablish JSCSR as a modern brand and overhaul the current UI. This meant auditing all existing components that were being used across the iPad app and website, and design fresh new components to support the brand across different platforms.

I introduced semantic tokens (e.g., color.surface.default, spacing.md) tied to our 13-point grayscale ramp and responsive spacing scale. These tokens became the single source of truth for theming, enabling flexible theming and dark mode support down the line.

We built our system from the ground up using atomic design principles. This made components more composable and reusable across different products and use cases. For instance, a Card used in user stats was also leveraged in inventory modals — no need to reinvent the wheel.

Beyond just components, we focused on documentation — usage guidelines, UX do’s/don’ts, and coded examples. This allowed engineering to pick up and implement components without needing design QA every time, freeing up the design team to focus on new problems.