Design System for Admin Tool Redesign

Building a scalable design system for an admin tool redesign

As part of our recent admin tool redesign at Intrepid Studios, I led the creation of a comprehensive design system in Figma that significantly improved our design-to-code workflow. This initiative laid the foundation for a unified, scalable, and maintainable interface across the product.

Key accomplishments:

Built intricate, responsive components that supported a wide range of use cases and screen sizes
Defined a robust color token library compatible with both dark and light mode
Established foundational design principles covering color, typography, spacing, and component behavior
Collaborated closely with front-end developers to ensure design system elements translated seamlessly into code
Positioned the design system as the single source of truth for both the design and development teams

The problem

We were preparing to redesign our internal admin tool, which had grown outdated and was no longer meeting the needs of our team. Intrepid Studios had never implemented a design system, which posed a major challenge: without a shared visual language or reusable components, the tool had become inconsistent, inefficient to maintain, and difficult to scale. As we approached the full UX overhaul, it was clear we needed to establish a strong design foundation to ensure consistency, speed up development, and support cross-team collaboration.

The solution

To address this gap I:

Built a library of responsive, reusable components to support scalability and speed up design and development
Defined a comprehensive color token system, including support for light and dark modes
Established core design foundations—typography, spacing, layout, and interaction patterns
Collaborated closely with developers to align on implementation, ensuring consistency between design and code

This system became the single source of truth for the admin tool and set a new standard for design consistency and efficiency across internal tools moving forward.

The process & execution

1. Research & component strategy

I began by researching widely-used admin tools to identify common UI patterns and essential components—like tables, filters, forms, and modals. This helped define what we’d need to support a complex internal system. I then compared these findings with the V1 of our existing admin tool to identify gaps and opportunities for improvement. From there, I built a responsive, reusable component library in Figma using variants and auto-layout, creating a scalable foundation for consistent design and faster implementation.

2. Color token library & theming

I designed a tokenized color system that could support both light and dark modes effortlessly. This structure allowed our team to make global updates with minimal effort while ensuring WCAG-compliant contrast ratios.

3. Establishing foundations (color, type, space)

To create a consistent visual language, I defined:

Color system: Primary, secondary, and neutral palettes, mapped to accessibility standards.
Typography hierarchy: Defined text styles for headings, body copy, and captions.
Spacing system: Scalable spacing values to maintain rhythm and structure across the UI.

4. Build component library

Using those foundations, I built a comprehensive set of reusable, responsive UI components in Figma using variants and auto-layout.

4. Design-to-Code implementation

I collaborated with front-end engineers to translate the Figma system into coded components using a shared naming convention. This ensured a smooth transition between design and development, reducing the chances of inconsistencies.

Impact & results

50% Faster Development Cycles: Engineers could now pull ready-made components instead of rebuilding them from scratch.
Increased Consistency: A single source of truth reduced design drift and inconsistencies across the product.
Scalability: The design system became a foundation for future product iterations, enabling rapid prototyping and UI scalability.

Key takeaways

This project reinforced the importance of cross-functional collaboration and design systems thinking. By establishing a strong foundation, we not only improved the user experience but also enhanced efficiency across teams. The success of this design system has since influenced other teams in our organization, proving its long-term value.

Next steps

With the core system in place, my next focus is on expanding the library with advanced interaction patterns, further optimizing accessibility, and continuously refining the system based on team feedback.