UI2
Mighty Networks
·
2025 - Ongoing
A design system that couldn't keep up
Mighty Networks is a platform where creators, coaches, and event planners build branded communities across iOS, Android, and web. Each platform was meant to maintain its own design system, but a team our size could never keep all three in sync, or keep design and code aligned as the product grew. The system kept falling behind.
So instead of patching a half-built system, we started fresh with one goal: maintainability. As the design team's lead on the design system, I shaped the direction of the new one: shared foundations across all three platforms, tuned for screen size and for touch or cursor, so a change is made once instead of three times.
That is what UI2 is. Not just a new set of UI styles, but a design system, along with the philosophy and rules to keep it maintainable, accessible, extensible, and ready for modern, media-rich content.
Role
Lead Product Designer
Team
6 Product Designers, including our CPO
Timeline
Q2 2025 – Ongoing
🌐
Unifying iOS, Android, and web into one system
🎨
Foundations
Accessible color, unified typography, and standardized icons
🧩
Components
Rebuilt from shared building blocks
📐
Composition
Layouts fit every screen size, make room for media-rich content, and surface only what matters
🏛️
Maintainable
·
Accessible
·
Extensible
·
Modern
Impact so far
UI2 is a long-running program, rolling out in stages across the product. Results land as each area ships, and the picture below will keep filling in.
Design decisions resolved on the spot
Accessibility issues, UI bugs, and legacy UI updates that once took the design team more than a day to align on are now resolved directly from the system's rules.
28% more UI PRs deployed
UI-related pull requests deploy 28% more often than before the project began.
One color, adjusted automatically
Hosts can pick a single theme color and let the system lighten or darken it as needed to stay accessible across light and dark mode, or switch to advanced mode to define every detail themselves. Either way, the result stays on-brand without anyone having to reason about contrast.
Color pairings that stay accessible
Content sits against highly dynamic backgrounds: theme colors, images, and inverted surfaces. Colors are organized into four surface contexts, with foreground tokens scoped to the surface they belong to. The right pairing is easy to pick and verify at a glance.
One type system across platforms
Fonts and text styles used to differ on every platform. UI2 unifies them into one type system of four style groups. Each style adapts to the viewport rather than the platform, so screen size drives the choice. With that foundation in place, hosts can now choose from five fonts.
iOS
Body (L)
Android
Body
Web
Body Standard
Heading
Body
Label
Heading
Body
Label
iOS
·
Android
·
Web
Layouts that make room for media
User-generated content used to sit in a single narrow column, which left large areas of the screen unused as posts grew longer and more media-rich. UI2 opens the layout up in two ways: media can now extend to the full width of the screen, and on wider screens the comment section moves to the right of the content rather than sitting beneath it.
Less on screen, easier to read
Non-essential information was removed from surfaces to reduce cognitive load, so each one communicates what members need without competing for attention. The details are still accessible, just one step away on a detail page or on hover, rather than crowding the first glance.
Components rebuilt from the ground up
Every component was rebuilt on atomic design principles, composed from a small set of shared building blocks. Core patterns are now consistent across iOS, Android, and web, and easier to extend.
Shifting the source of truth
Most design systems treat Figma as the master copy, with code meant to match it. Tools can sync the two, but only if the code is perfectly organized and every Figma variant lines up exactly with its coded counterpart. For a small team like ours, keeping that alignment is not realistic. When AI tools let designers work directly in code, we had a choice: keep Figma in charge, or let code take over.
We put code in charge. Designers now check and adjust the foundations right in the codebase. Figma is still where we document the system, it just no longer sets the rules. For me that means less time in Figma and more time maintaining the system in code, where one pull request updates a style everywhere instead of fixing it screen by screen. The further the system matures, the faster designers and engineers move.
Want to talk design systems?
I'd love to walk you through the decisions behind UI2. Reach out and I'll share the full story.