Astryx: Meta's Open-Source Agent-Ready Design System

Meta released Astryx on June 28, 2026, as a public beta under the MIT license. The system spent eight years inside Meta's monorepo, where it grew to power over 13,000 internal applications including Facebook, Instagram, and Threads. Now it's available to everyone as a set of npm packages built on React and StyleX, with over 150 accessible components, ten built-in themes, dark mode, production-ready templates, and a CLI designed as much for AI coding agents as for human developers.

This article covers what makes Astryx different from other design systems, how its theming engine works, and how to use it for custom branding at both the broad token level and the granular component level.

The design system dilemma Astryx addresses

Two approaches dominate the current design system landscape, and both have well-known tradeoffs.

The first is adopting a comprehensive component library like Material UI. You get a complete, consistent set of components immediately, but your application inherits the library's visual identity. Customization means fighting the library's own styles through CSS overrides, which tends to accumulate technical debt quickly.

The second is the copy-paste approach popularized by Shadcn/UI. You own the component code completely and can modify anything, but every project effectively forks the library. Upstream bug fixes, accessibility improvements, and new features don't flow back automatically. Maintenance falls on your team.

Astryx separates these concerns. Components come from a versioned central package (@astryxdesign/core), so upstream improvements reach you through a dependency update rather than a manual copy. Visual identity is controlled through a separate theming layer of design tokens: colors, typography, spacing, radii, and motion. You change the brand without touching component internals.

Component library and templates

The library ships with 150+ accessible React components. The official docs at astryx.atmeta.com include production-ready templates that demonstrate the components at scale: an issues tracker similar to Jira with grouped rows and dropdown menus, a complete e-commerce checkout form with validation states, a Kanban sprint board with drag-and-drop cards, a VS Code-like IDE interface with file tree and tabbed editor, and an AI chat interface with a Markdown renderer for formatted model output.

These templates aren't toy examples. They're representative of the kind of complex application the system was built to handle inside Meta.

Theming with defineTheme

The theming engine is where Astryx's design shows most clearly. Everything flows from a single defineTheme call imported from @astryxdesign/core/theme.

import { defineTheme } from '@astryxdesign/core/theme';

export const customTheme = defineTheme({
  name: 'my-theme',
  // theme definitions go here
});

The function is fully type-safe. Your editor will autocomplete available options and flag invalid values.

Generating a full palette from a single accent color

Provide one accent color and Astryx derives a complete accessible palette from it, including light and dark mode variants for backgrounds, surfaces, borders, and text.

export const customTheme = defineTheme({
  name: 'my-theme',
  color: { accent: '#04FF00' },
});

One value gives you a complete, coherent color system without manually picking shades.

Typography scale

The typography object sets the font family and establishes a modular scale where all sizes relate mathematically to each other.

export const customTheme = defineTheme({
  name: 'my-theme',
  color: { accent: '#04FF00' },
  typography: {
    scale: { base: 14, ratio: 1.2 },
    body: { family: 'Inter', fallbacks: '-apple-system, sans-serif' },
  },
});

base sets the paragraph font size in pixels. ratio is the multiplier applied at each step up the type hierarchy, so heading sizes stay proportional to body text across any screen size.

Radius and motion

export const customTheme = defineTheme({
  name: 'my-theme',
  color: { accent: '#04FF00' },
  typography: {
    scale: { base: 14, ratio: 1.2 },
    body: { family: 'Inter', fallbacks: '-apple-system, sans-serif' },
  },
  radius: { base: 8, multiplier: 1 },
  motion: { fast: 175, medium: 410, ratio: 0.75 },
});

radius sets the base border-radius with a multiplier to generate different sizes per component. motion controls transition durations in milliseconds for hover states, focus rings, and other animations.

Granular overrides

The helper options above handle the majority of cases, but Astryx also provides precise control when you need it.

Overriding specific tokens

The tokens object lets you directly set individual CSS variables. Each token takes an array of two values: light mode and dark mode.

export const customTheme = defineTheme({
  name: 'my-theme',
  // ...
  tokens: {
    '--color-neutral': ['#90e38f', '#90e38f'],
  },
});

Because defineTheme is type-safe, your editor shows every available token as an autocomplete option. This change applies globally to every component that uses --color-neutral.

Overriding a single component variant

For changes scoped to one component without touching anything else, the components object gives you targeted access.

export const customTheme = defineTheme({
  name: 'my-theme',
  // ...
  components: {
    button: {
      variant: {
        secondary: {
          color: 'black',
        },
      },
    },
  },
});

This changes the text color of secondary buttons only. Primary buttons and all other text are unaffected.

Creating custom variants

You can define entirely new variants beyond the built-in set. The new variant name becomes a valid value for the variant prop in TypeScript autocomplete.

components: {
  button: {
    variant: {
      secondary: { color: 'black' },
      myButton: {
        color: 'black',
        backgroundColor: 'red',
      },
    },
  },
},

<Button label="Subscribe" variant="myButton" />

Styling flexibility

Astryx is built on StyleX but doesn't require you to use it. Components ship with pre-built CSS, so there's no PostCSS or Babel configuration required.

For one-off style overrides, the xstyle prop accepts StyleX style objects:

import * as stylex from '@stylexjs/stylex';
import { Button } from '@astryxdesign/core/Button';

const overrides = stylex.create({
  primaryButton: {
    backgroundColor: 'red',
    color: 'white',
  },
});

function MyComponent() {
  return (
    <Button
      xstyle={overrides.primaryButton}
      label="Primary"
      variant="primary"
    />
  );
}

For teams using Tailwind, Astryx provides a bridge that maps your Astryx theme tokens to Tailwind's configuration. Utility classes like text-primary and bg-surface pull their values from your active Astryx theme, so you keep the Tailwind developer experience while the brand values stay centralized in the theme file.

The agent-ready layer

One of the more forward-looking aspects of Astryx is how it handles AI coding agents.

Astryx ships with an MCP (Model Context Protocol) server that gives AI agents a structured API to discover components, query templates, and check available tokens without scraping documentation. The CLI uses a --dense flag that strips human-readable filler from component docs and produces token-efficient payloads optimized for LLM context windows. An agent can run npx astryx docs styling --dense to get a machine-readable summary of all styling options without consuming unnecessary context.

This treats AI coding assistants as first-class consumers of the design system rather than an afterthought. The assumption baked into the architecture is that a meaningful percentage of the code written against Astryx in 2026 will be written by a model, and the tooling is built accordingly.

Getting started

Astryx requires React 19 or newer. The core package is @astryxdesign/core. The GitHub repository is at github.com/facebook/astryx and the documentation is at astryx.atmeta.com.

The system ships ten built-in themes (default, neutral, daily, butter, chocolate, matcha, stone, gothic, brutalist, and y2k), so there's a starting point for a range of aesthetics before any custom theming work.

Astryx is currently in public beta. The foundation is mature after eight years of internal use, but the public API is still evolving. It's well-suited for new projects where you control the full stack; teams migrating from established systems should weigh the beta status against stability requirements.

Got an article suggestion? Let us know

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.