Meta's Astryx Design System Overview

Architecture and Theming

Astryx functions as a centralized design system that separates component logic from visual styling. Unlike component-copying libraries that force developers to maintain local forks, Astryx keeps the component source code external, allowing for upstream updates while delegating visual customization to a type-safe token system. The theming engine uses a defineTheme function to generate scales for colors, typography, spacing, and motion. Developers can define a base brand color, and the system automatically calculates secondary and accent variants. Typography scales are calculated based on a base size and a ratio, such as a 14px base with a 1.2 ratio, ensuring consistent sizing across the application.

Customization and Integration

Customization occurs at three levels: global tokens, component-specific variants, and one-off overrides. Because the theme configuration is written in TypeScript, developers receive autocompletion and type safety when modifying tokens. For component-specific changes, developers can target specific variants (e.g., secondary buttons) to apply unique CSS variables without affecting the global design. For one-off styling, the system supports the xstyle prop, which leverages the underlying StyleX engine. Additionally, Astryx includes a Tailwind bridge that maps theme tokens to Tailwind utility classes, allowing teams to maintain brand consistency while using familiar utility-first syntax.

AI-First Tooling

Astryx includes a CLI specifically optimized for AI agents rather than human developers. The CLI provides commands to fetch component documentation and inject it into an agent's context window. This allows LLMs to understand the API surface, props, and best practices for each component, reducing hallucination when generating UI code. The documentation itself includes explicit best-practice sections designed to guide AI models in implementing accessible, production-ready components.