What is Recontent.app?
Recontent stores design decisions in a typed, multi‑layered structure, ensuring that design tokens are enforced by tools rather than relying on team conventions. Situated at the foundation of the design system, it provides consistent design token support across the entire tech stack. By defining reference tokens (raw values), system tokens (semantic meanings), and component tokens (component‑specific decisions), Recontent builds a complete mapping chain—from original color values (e.g., #2563eb) → semantic aliases (e.g., system.color.accent) → component properties (e.g., button.background)—which remains intact in CSS variables after generation, guaranteeing that changes made in one place take effect globally. Its diff feature accurately identifies various change types such as renamings, deletions, and value modifications, distinguishing destructive changes; theme customization is flexible—dark mode requires redefining only a few system colors, while brand overhauls allow replacing the entire reference palette, with all aliases automatically updated and no need to modify component code. A plugin mechanism enables output to CSS variables, Tailwind v4, StyleX, DTCG (Figma), documentation sites, Swift, React Native, and many other targets—all driven by a single configuration.
Key features
It supports three‑level type‑safe token definitions: the reference layer (ref) stores raw values (e.g., ref.color.blue[9] #2563eb); the system layer (system) assigns semantic meanings (e.g., system.color.accent → ref.color.blue[9]); and the component layer (components) binds specific usages (e.g., button.background → system.color.accent), maintaining alias relationships across the entire pipeline.
Recontent provides a `recontent diff` command that compares any Git versions, precisely identifying and categorizing change types—for example, reporting “system.color.bg renamed to system.color.background” or “system.color.legacyBlue removed”—and flags destructive changes to trigger CI failures.
Use cases and audience
Frontend engineers, design system engineers, and UI architects
- Unified management of design tokens like colors and spacing within the design system ensures consistent styling across frontend components.
- Supports automatic updates of all relevant style variables across multiple themes (such as dark mode and brand redesigns)
- Prevents misuse of design tokens through type checking, for example by accessing a non-existent system.color.accent property
The `recontent.config.ts` configuration file includes definitions for `defineReferenceTokens`, `defineSystemTokens`, `defineComponentTokens`, as well as a list of plugins.
CSS variable files (`tokens.css`), Tailwind utility classes, StyleX themes, Figma‑compatible JSON, documentation site HTML/Markdown, Swift/iOS native code, and more are all generated according to the configured plugins.
Frequently asked questions
How does Recontent ensure that changes to design tokens do not cause unintended style breaks?
By using the recontent diff command to compare Git history versions, you can clearly distinguish between renames, deletions, value changes, and breaking changes, and it also supports --fail-on-breaking for automatic interception.
Can design tokens be synchronized to Figma or native mobile code?
You can: use the dtcg() plugin to generate JSON for Tokens Studio to import into Figma; use the swift() plugin to generate iOS Swift code; and use the typescriptNative() plugin to generate React Native theme files.
How to use
- 01
Run npm install -D recontent to install the tool
- 02
Execute recontent init neutral to generate the base configuration file recontent.config.ts
- 03
Define a three-tier token structure—reference, system, and component—in your configuration
- 04
Add plugins such as css(), tailwind(), or docs() and run recontent build to produce the target output
Official website & sources
Sources
Updated on 2026-10-31
