{"id":65517,"date":"2026-07-06T11:00:00","date_gmt":"2026-07-06T02:00:00","guid":{"rendered":"https:\/\/designcompass.org\/?p=65517"},"modified":"2026-07-06T07:45:26","modified_gmt":"2026-07-05T22:45:26","slug":"meta-open-sources-astryx-design-system","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2026\/07\/06\/meta-open-sources-astryx-design-system\/","title":{"rendered":"Meta AI Design System 'Astryx' Released as Open Source"},"content":{"rendered":"

The design system that Meta has been using internally Astryx<\/strong>We have released Astryx as open source. Astryx has been developed internally at Meta for the past eight years and is currently used in over 13,000 in-house applications. This release is a beta version and is available to everyone.<\/p>\n\n\n\n

Astryx is built on React and StyleX. It provides over 150 accessibility-supported UI components, along with dark mode, design tokens, brand themes, page templates, and a CLI. Unlike traditional design systems that enforce specific brand styles, it is designed to allow users to customize their own brand by simply changing tokens such as colors, typography, motion, and corner radius.<\/p>\n\n\n\n

The most significant feature is that it was designed with AI in mind. Meta explained that while existing design systems were built around humans, Astryx was structured from the ground up to be understandable and usable by AI agents. By providing a CLI and an MCP (Model Context Protocol) server, AI coding tools can directly read component structures and options to create or modify UIs. The goal is for AI to utilize the design system as is, without the need for humans to search through documentation.<\/p>\n\n\n\n

This release has the potential to influence the direction of design systems in the AI era. While many companies have recently added MCP or AI integration features to their design systems, most have done so by extending existing systems. In contrast, Astryx differs in that it was designed from the outset with the utilization of AI in mind. Moving forward, it appears that in the process of creating AI-driven products, there will be an increasing number of instances where design systems go beyond simple UI libraries to take on the role of product rules understood by AI.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

More and Sources<\/strong><\/p>\n\n\n\n