Theo
A tool for transforming and formatting design tokens into platform-specific code.
What is Theo?
Theo is a Node.js library that transforms and formats design tokens—centralized design values like colors and spacing—into platform-specific code. It solves the problem of maintaining consistent design implementation across different platforms (web, iOS, Android) by providing a single source of truth for design properties. Developers define tokens once in JSON or YAML, then use Theo to generate appropriate outputs for each target environment.
Design system engineers, frontend developers, and cross-platform development teams who need to maintain consistent design implementation across multiple platforms and frameworks.
Developers choose Theo for its extensive built-in format support, extensible transformation pipeline, and adherence to a clear design token specification. Its ability to handle complex value transforms and generate documentation makes it particularly valuable for mature design systems.
Overview
Theo is a an abstraction for transforming and formatting Design Tokens
Use Cases
Best For
- Generating platform-specific style code from a single design token source
- Building design systems that need outputs for web, iOS, and Android
- Creating living style guides with automatically generated documentation
- Converting design tokens into CSS custom properties or preprocessor variables
- Managing complex design token aliases and imports across projects
- Extending design token pipelines with custom transforms and formats
Not Ideal For
- Projects needing real-time design token updates without a build step, such as live style guides or dynamic theming in SPAs
- Teams already using alternative design token tools like Style Dictionary with native W3C spec support
- Small-scale applications targeting only one platform where CSS custom properties or env variables would suffice
Pros & Cons
Pros
Predefined transforms for web, iOS, and Android automatically handle value conversions like color to RGB or pixel adjustments, ensuring cross-platform consistency with minimal configuration.
Ships with over 15 output formats including SCSS, CSS custom properties, JSON variants, and HTML documentation, reducing the need for custom formatters in most use cases.
Allows registration of custom value transforms and formats using JavaScript functions or Handlebars templates, enabling tailored outputs for unique project requirements.
Supports token aliases and imports in YAML/JSON files, facilitating modular and reusable token definitions across large design systems, with automatic resolution.
Cons
Requires understanding of the design token spec and configuration of transforms/formats, which can be daunting for teams new to token-based workflows, as evidenced by the detailed API and spec documentation.
Primarily designed for build-time token generation; lacks built-in support for dynamic updates or real-time integrations, limiting use in live design tool environments.
Key integrations like the gulp plugin are separate packages since v6, indicating potential breaking changes and added maintenance overhead for existing users.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.