Domain Group needed a design system to align a suite of products spanning 4 brands, executed on web, iOS and Android platforms. I was hired to help make that happen.

As the design system lead, I aimed to create a maintainable and future-proof platform for us to craft our product design. In collaboration with a cross-functional team of designers and engineers we developed a semantic system for brand elements like color, typography, and geometry, structured through TypeScript interfaces.

Our system provided code generators for iOS and Android, an npm module for web products, and a JSON API for dynamic integrations.

One major integration was with Figma. We built a custom plugin to automatically update Figma designs with the latest design system values via the JSON API. The plugin also enabled instant-apply functions for properties like spacing and border radius, simplifying the application of design standards before Figma had supported these natively.

Our documentation website also auto-updated design token values and provided guidance on accessibility, copywriting, and design patterns, while component documentation was maintained in Storybook.

A key motivation for this design system was to streamline onboarding for teams working with diverse codebases. Many teams face challenges when using UI frameworks that aren't fully compatible with specific versions of our React component library. To ease the transition, we created lower-level integration points to our larger system. For example, a sub-brand's UI team could initially integrate only the color system without committing fully from day one.

This flexible approach proved crucial during a company-wide rebrand, allowing us to update existing designs to the new styles without requiring a complete rebuild.