Recontent.app

Recontent.app is a command-line tool that manages design tokens across layers to ensure consistency and type safety. It targets engineers, designers, and teams building design systems, providing a single source of truth for tokens that flow into code, docs, and design tools. The platform emphasizes typed layers and generated output to minimize drift and maintenance overhead.

Recontent works by organizing tokens into three layers—reference, system, and components—and exposing them through a TypeScript-configured workflow. Plugins convert the token registry into various outputs such as CSS variables, Tailwind themes, vanilla-extract or StyleX variables, TypeScript constants, DTCG files, or a documentation page. The config is TypeScript, enabling early validation and predictable builds.

The tool's main capabilities include token definition across layers, theme support for dark mode and brand changes, token aliasing that propagates through outputs, and change detection through a diff tool. It also ships tokens to multiple outputs and maintains a consistent output pipeline where plugins add outputs without changing token meanings.

Recontent.config.ts shows a wide range of plugins and outputs, including css, tailwind, typescript, dtcg, docs, swift, and more. It notes that outputs can go to styles, documentation, iOS tokens, or other custom destinations, and mentions compatibility with CSS variables, Tailwind, StyleX, DTCG, and TypeScript-based outputs.

Use cases

• Engineers who maintain a design system with a single source of truth.
• Designers who work with tokens and export formats their tools understand.