Moon Design System

Snapshot

Moon Design System is Yolo’s open-source design system, created to unify product experiences and empower teams to design and build consistent, high-quality interfaces. It serves as a central hub for design tokens, reusable components and usage guidelines that scale across Yolo's ecosystem.

Role & timeline

Lead/Senior Product Designer | April 2024 - Present

Success criteria

  • Establish a unified, scalable system for design and development teams.
  • Automate design token management and workflow processes.
  • Increase adoption and consistency across Yolo’s digital products.

Deliverables

  • Design tokens for color, typography, elevation, spacing and contextual modes.
  • Automated workflows for syncing tokens across platforms.
  • Documentation design system for designers and developers.
  • Advocacy and onboarding resources for product teams.

Highlights

  • Built a robust design system architecture to ensure consistency and cross-platform (CSS, React, LiveView) scalability.
  • Created clear and accessible documentation built with Next.js, documentation demonstrates real components created with CSS classes and variables from ui.moon.io.
  • Collaborated with developers and designers of different product teams within Yolo to align the system.
  • Contributed to Moon's open-source community: We created a plugin to manage variable libraries, we published all our design system libraries to Figma's community.

Constraints

  • Limited resources for large-scale adoption and maintenance.
  • Balancing legacy component migration with new system rollout.

Outcome

  • Improved design–development process through shared tokens, unified libraries and guidelines.
  • Streamlined workflows expected to reduce design inconsistencies and developer overhead.
  • Growing adoption of the Moon Design System across Yolo’s product suite.

Links & evidence