timeline
Nov 2025 - June 2026
project type
Design Systems
project overview
Our team works on Meta’s most widely used design system, powering thousands of internal products and tools with hundreds of components. With 7 years of successes, learnings, and feedback, we set out to take what we know works and build a more adaptive open source design system optimized for seamless AI interaction. Our goal was to empower any builder at any level to create a quality product faster than ever.
contribution summary
This work was a cross-functional team effort. A high-level summary of my contributions include:
Visual design direction and execution
Addition and refinement of system components
Customizable theme designs and in-prod builds
Template designs and in-prod builds
Collaboration on doc site usability and content
Internal team documentation for efficiency
Team brainstorm and creative sessions facilitation
problem space
Design systems are valuable for creating consistency, scalability, and efficiency across products and teams. However, as products continue to scale or gain complexity, ensuring quality can become a challenge.
1/ How might we evolve design systems to be smarter, more adaptive, and more powerful than ever?
2/ How might we make designing and building a product efficient and autonomous to a wide range of skill levels?
approach
Our approach to this challenge was to create a system that integrates with AI seamlessly while still focusing on human-driven product experiences a.k.a. allow AI to handle the time-consuming and technical parts, so people can focus on the vision and experience parts.
supporting a wide range of components and frameworks
providing thoughtful, optional starting points for users
designing with AI-first workflows in mind
1/ foundational layers of the system
To ensure a long-term, scalable system, we added and improved on primitives, components, and patterns; organized tokens; refined CLI and code mods; and drove component hardening checks. We made sure the system supported multiple frameworks and a wide range of scalable components.
2/ vibe testing the system
First we vibe tested against tokens, components, and patterns. Then we built the system with context documentation and rules to help reduce hallucinations, increase better decision making, and improve the overall AI-interaction experience. We also used typed component APIs to help catch errors early.
3/ the system doc site
In order for users to easily access the system library, we designed and built both the internal and public doc site. The doc site contains components, themes, templates, code, and guidance.
4/ design templates
We created a collection of commonly-used section and page templates to lower the barrier of entry by giving users a starting point while still allowing flexibility and customization.
5/ product themes
To pair with the templates, we created fully customizable themes with available dark mode that users can implement into their products. We also included a fully functional theme editor and color editor for users to experiment with foundational changes in real time.
Fun fact: the design team designed, built and refined all the templates and themes in production against our system grading rubric as well as contributed significantly to building the doc site in-prod. Overall the team contributed to thousands of significant GitHub commits over the course of the project.
6/ brand and marketing
We shaped the system’s brand and marketing experiences as a team by facilitating brainstorming and creative sessions. During our sessions, we focused on our target audience, values, moodboards, and vision before moving forward.
the project outcome
Introducing Astryx from Meta, an open source design system that is AI fluent and fully customizable without dependencies. Astryx includes 150+ accessible components, customizable theming, dark mode, ready-to-ship templates, and a CLI.
Github: github.com/facebook/astryx
⭐️
10.3K stars and 758 forks on GitHub
📈
224K visitors and 1.79M page views
💻
190k core downloads
126K CLI downloads
✨
480K theme downloads across 7 themes
future enhancements
Looking ahead, we plan on expanding the system’s flexibility, efficiency, and scalability. Future iterations will include more components, themes and templates, all prioritizing AI-first workflows; new features where AI can be utilized more in real-time; and refining the system’s mobile experiences.
learnings
Working on a design system in and of itself is challenging. Now throw in balancing an internal vs. external audience, add the task of providing a respectable variety of themes and templates, and then let's throw AI into the mix of things for funsies. Whew.
Unsurprisingly, the AI portion was one of my biggest learnings. It felt like it made everything feel more accessible by closing workflow gaps across teams, yet simultaneously introduced a layer of challenges around quality and refinement. Although this project pushed me more than most, I'm also entirely grateful to the experience and to my team working on this. I learned that I (and we) are capable of a lot, even in the most complex and unfamiliar territories.
