Astryx Design Studio

Meta's AI-ready design system, open-sourced: tune the tokens, preview components, ship it faster.

Astryx Design Studio — Meta's AI-ready design system, open-sourced: tune the tokens, preview components, ship it faster.

How to use Astryx Design Studio

  1. Pick one of the 7 shipped themes and switch between light and dark mode
  2. Tune the radius, spacing and accent tokens and watch the preview restyle instantly
  3. Search the component catalogue and click a component for its import and real props
  4. Copy the install and init commands to add Astryx to a React 19 project
  5. Copy or download the generated defineTheme code for your tuned theme
  6. Read the live token table to see every CSS custom property driving the preview

Features

  • The repo's 7 shipped themes with real fonts, palette seeds and literal token values from the theme sources
  • Live theme preview: the same UI restyles through the CSS-variable cascade the system uses
  • Token tuners for the real radius defaults and 4px spacing scale, plus an accent override
  • Searchable catalogue of 45 verified components from packages/core/src with real props
  • Copy-ready install, init, docs and swizzle CLI commands from the repo's own docs
  • Generated defineTheme code for your tuned theme, downloadable as a .ts file

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.