Meta Open-Sources Astryx Design System for Humans and AI Agents

Meta released Astryx, an open-source React design system, in beta this week. Developed internally over the past eight years, Astryx has become Meta's most utilized and extensive design system, refined by its engineers, designers, and product teams. The system offers more than 150 accessible components, brand-level theming capabilities, dark mode support, ready-to-use templates, and a command-line interface (CLI) as a unified package. It is built upon React and StyleX, allowing users to import pre-built CSS and employ typed React components without the need for build plugin configuration or adopting a separate styling library.

Astryx aims to resolve the common trade-off in design systems where adopting a large company's system can lead to a generic product appearance, or using copy-paste components results in project fragmentation and a lack of shared coherence. The system separates concerns by controlling behavior, accessibility, and quality through the system itself, while themes dictate the visual appearance. Customization occurs at the token level, including color, typography, radius, and motion, enabling distinct application branding without requiring component source rewrites. A theme is essentially a set of CSS custom property overrides, allowing designers to retheme Astryx without forking or wrapping component source code.

The stated design principles of Astryx emphasize guidance over enforcement, strong documented conventions, a unified system for both humans and AI agents, and a commitment to measurement-based conventions. The architecture of Astryx is organized into three layers: Foundations, Components, and Patterns. Foundations provide the essential primitives for creating cohesive and accessible interfaces, including typography, color, layout, and accessibility standards. Components consist of over 150 reusable building blocks, all equipped with full TypeScript support. Patterns are designed as battle-tested solutions for common workflow challenges.