Docs
Recursica stores colors, type, spacing, and component styles as design tokens. The adapters apply those tokens to React and Angular components, the Figma Kit applies them to Figma files, and the Recursica agents follow the design rules in the knowledge repo.
The system
- Architecture: A Recursica theme lives in three JSON files. The tokens file holds the actual values, such as the hex code for each color. The brand file assigns those values to roles, such as the color for links. The UI kit file assigns roles to components, such as the color of a button’s label.
- Variables: Global variables set system-wide values, like palettes and the type scale. Component variables set values for one component, like a button’s corner radius. Theme Forge exports global and component variables, and Figma imports them as native Figma variables.
- Colors: A Recursica theme is built from color palettes and core colors, and Theme Forge can customize all of them. Each color has a tone, and an on-tone for anything that sits on top of that tone, such as the label on a solid button.
- Layers: Recursica has four depth levels: page, surface, nested content, and overlay. One HTML attribute sets the level, and components change their colors to stay readable at each one.