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 design PRs deployed
Design-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 were fragmented across iOS, Android, and web. UI2 unifies them into one type system with four style groups: heading, body, label, and content heading. 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
Viewport L
Heading
Body
Label
Viewport S
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 like dropdowns, member lists, feed cards, and dialogs are now consistent across platforms and easier to extend.
Shifting the source of truth
What happens when the source of truth moves to code
Traditionally a design system lives in Figma, and keeping design and code in sync is constant manual work. As AI entered the workflow, we faced a choice: keep Figma as the source of truth and keep reconciling it with code, or let code define the foundations and treat Figma as downstream.
We chose code first. Designers now work directly in the codebase, checking foundation styles against the design, and we generate styleguides from code itself. Figma still earns its place as a strong tool for documentation, just no longer as the source of truth. In practice I spend less time in Figma and more time maintaining the system in code, merging PRs for global changes rather than tweaking UI one spot at a time. As the system matures, both designers and engineers move faster, because the source of truth has shifted from Figma to code.
Curious about the full story?
There's a lot more where this came from. Reach out for the full story.