RetroGlitch Design System
A design system built to bring consistency, efficiency, and accessibility across all TestMu AI products. Collaborated with 3 other designers to create RetroGlitch, transforming a fragmented design ecosystem into a cohesive and scalable design system.
We defined reusable components, established design tokens, and embedded accessibility standards to ensure a unified design language across all products.
Industry: SaaS (B2C)
Team: 3 Designers + PM + Engineering
Problem
Every product looked different (no shared patterns)
Designers recreated components repeatedly
Developers implemented UI inconsistently
Accessibility wasn’t built into the workflow
Goal
Create a unified visual language across all products
Improve design → development efficiency
Embed accessibility (WCAG) into components
Enable scalability for new features & products
My Role(How I Solved it)
Audited existing products to identify UI inconsistencies, duplicated components, and accessibility gaps.
Established system foundations by defining design tokens, typography scales, and light/dark theming rules.
Built a reusable component library with clear variants, states, and responsive behavior.
Documented usage guidelines to ensure consistent adoption across designers and PMs.
Partnered with engineering to implement components in Storybook for design–code parity and faster handoff.
Key System Modules
Reusable Components
Standardized foundational UI components such as buttons, inputs, tables, navigation, and layout patterns to eliminate duplication and maintain consistency across products.
Design Tokens
Defined a centralized token system for colors, typography, spacing, and elevation, enabling consistent theming and easier updates across light and dark modes.
Guidelines & Best Practices
Established clear usage guidelines, do’s and don’ts, and best practices to ensure consistent and correct component usage across teams.
Storybook Integration
Aligned Figma components with Storybook to create a shared source of truth, improving design–development parity and accelerating implementation.
Iconography System
Created a unified icon library with consistent sizing, stroke weight, and semantic usage to maintain visual harmony across all interfaces.
Responsive Design Principles
Established clear grid systems and breakpoint rules to ensure layouts adapt smoothly across screen sizes and device types.
Outcome
Standardized components reduced UI rework and brought design and development time down from hours to minutes.
Designers and engineers worked from a shared system, which removed ambiguity and reduced back-and-forth during handoff.
PMs and other contributors could assemble flows on their own, easing dependency on designers for every change.
New features shipped consistently with accessibility, theming, and responsiveness built into the system from the start.
