How to Share Design Tokens Across Web Frameworks

Design tokens provide a unified vocabulary for UI styling, yet sharing them across multi-framework environments—such as stacks combining React, Angular, Vue, and legacy applications—often introduces synchronization friction. This article outlines key architectural strategies for defining, transforming, and consuming design tokens in a framework-agnostic way. By decoupling design specifications from component code and standardizing distribution pipelines, engineering teams can maintain a robust single source of truth across diverse development ecosystems.

1. Establish a Platform-Agnostic Source of Truth

To prevent framework lock-in, define design tokens in structured, human-readable data formats such as JSON or YAML. Adopting standard specifications, such as the W3C Design Tokens Community Group (DTCG) format, ensures that tokens remain neutral to the underlying implementation.

Store these raw token definitions in a centralized repository separate from application code. This repository functions as the authoritative single source of truth, storing base attributes such as color palettes, typography scales, spacing, border radii, and motion curves without referencing specific frontend frameworks.

2. Automate Token Transformation with Build Tools

Raw JSON or YAML tokens cannot be consumed directly by most web runtimes without translation. Use automated build tools such as Amazon's Style Dictionary or Theo to compile source tokens into platform-specific deliverables.

Configure the transformation pipeline to generate formats tailored to each consumer:

  • CSS Custom Properties (--token-name): Universally readable by any browser-based framework without runtime overhead.
  • SCSS/Sass Variables ($token-name): For teams relying on preprocessed stylesheets.
  • JavaScript and TypeScript Modules: Useful for CSS-in-JS libraries (like Emotion or Styled Components) and runtime token introspection.
  • Tailwind Presets: Theme configuration files that allow teams to consume tokens natively through utility classes.

3. Use CSS Custom Properties as the Universal Bridge

Standard CSS variables (Custom Properties) represent the most resilient runtime layer for cross-framework token consumption. Because CSS operates natively in the browser cascade, any framework—from React and Svelte to vanilla HTML—can read the same variable definitions.

Inject compiled CSS files containing the :root variables at the global application shell level. This enables isolated component libraries to reference --color-primary or --spacing-md without requiring direct JavaScript dependencies or framework-specific styling contexts.

4. Distribute Artifacts via a Versioned Package Manager

Distribute compiled tokens as a private or public NPM package. Avoid publishing raw source files directly; instead, export pre-built artifacts organized by format:

@org/design-tokens/
├── dist/
│   ├── css/
│   │   └── variables.css
│   ├── scss/
│   │   └── _tokens.scss
│   ├── js/
│   │   ├── index.js
│   │   └── index.d.ts
│   └── tailwind/
│       └── preset.js

Apply strict Semantic Versioning (SemVer) to the package. Breaking visual changes—such as removing a token or fundamentally altering a color ratio—should trigger major version bumps, enabling consuming teams to upgrade dependencies at their own pace.

5. Automate the Design-to-Code Pipeline with CI/CD

Eliminate manual handoffs by integrating token updates directly into your Continuous Integration (CI) workflow. Design teams can author tokens using tools like Tokens Studio in Figma, syncing updates directly to the tokens repository via Git.

Once a pull request merges into the main branch, configure continuous delivery pipelines (such as GitHub Actions or GitLab CI) to:

  1. Validate token schema against DTCG guidelines.
  2. Run build transformations for all target formats.
  3. Execute automated visual regression tests.
  4. Publish the updated version to your package registry.

6. Combine Tokens with Web Components for Deep Consistency

For organizations looking to share both styles and functional components across different frontend stacks, implement Web Components (Custom Elements) alongside your tokens. Web Components utilize the Shadow DOM to encapsulate functionality, while CSS Custom Properties can still pierce the shadow boundary. This allows teams to ship framework-agnostic UI primitives that automatically inherit the design system's shared design tokens.