7onic: Keeping Design Tokens and React UI in Sync

7onic is a build-time tool that keeps design tokens and React UI components in sync by generating TypeScript constants and CSS custom properties from a single JSON source of truth. You define your design system once, and 7onic produces the exact values your React components and stylesheets use, eliminating the drift that happens when tokens are copied by hand. This article explains the problem 7onic solves, how it works, and why it is a practical choice for teams tired of mismatched colors, spacing, and typography.

The Problem: Token Drift in Modern Frontends

Design tokens are the named values—colors, spacing, radii, typography scales—that encode a design system. In a React app, these tokens end up in at least two places: the JavaScript/TypeScript code that sets inline styles or passes props to UI libraries, and the CSS (or Sass/Less) files that style components. Without automation, keeping these two copies identical is manual work.

The result is token drift: a designer updates primary from #0066cc to #0052a3 in the design file, a developer updates the CSS variable, but the TypeScript constant still holds the old hex. The UI renders inconsistently across pages, or worse, the mismatch is subtle enough to go unnoticed until a stakeholder spots it. 7onic removes that failure mode by making the CSS and the TypeScript derive from the same source.

How 7onic Works

7onic reads a single JSON file that defines your tokens in a structured format. For example:

{
  "color": {
    "primary": "#0066cc",
    "background": "#f5f5f5"
  },
  "spacing": {
    "sm": "8px",
    "md": "16px"
  }
}

From that file, 7onic generates two artifacts:

• TypeScript constants (e.g., export const colorPrimary = '#0066cc') that you import into React components.
• CSS custom properties (e.g., :root { --color-primary: #0066cc; }) that you reference in stylesheets.

The tool runs as a build step, so every time the JSON changes, both artifacts regenerate. There is no point where a developer can edit one without the other updating.

Why Not Just CSS Variables or a JS Object?

A common question is: why not pick one source—either CSS variables or a JavaScript object—and use it everywhere? The answer is that neither alone covers all React use cases.

CSS variables are great for theming and runtime switching (e.g., dark mode), but they are strings at runtime. You cannot do arithmetic on them in JavaScript without parsing, and TypeScript cannot give you autocomplete for a CSS variable name. On the other hand, a JavaScript object gives you type safety and autocomplete, but it does not automatically apply to CSS. You still have to wire it into your styles, often via inline styles or a CSS-in-JS library, which can be verbose and harder to maintain than plain CSS.

7onic bridges that gap by generating both from one source. You get the ergonomics of TypeScript constants and the power of CSS variables, with no duplication.

Common Pain Points 7onic Addresses

Teams that adopt 7onic typically report these before-and-after scenarios:

• Renaming a token: In a hand-maintained system, renaming primary to brand-primary means finding every usage in JS and CSS. With 7onic, you rename it once in the JSON, regenerate, and both artifacts update. Missed usages become compile errors in TypeScript.
• Adding a new token: Adding a new color or spacing value requires updating the JSON, then manually adding the CSS variable and the JS constant. 7onic does it in one step.
• Consistency across packages: In a monorepo, design tokens often need to be shared across multiple packages. 7onic can output files that each package imports, ensuring they all use the same values.
• Design handoff: When designers export tokens from tools like Figma, they often produce a JSON file. 7onic can consume that JSON directly, so the handoff is almost automatic.

How to Choose Between 7onic and Alternatives

7onic is not the only tool in this space. Style Dictionary (now part of Amazon’s open-source ecosystem) is a popular alternative that transforms token files into multiple formats. The key differences are:

• Format support: Style Dictionary outputs to many formats (CSS, Sass, Swift, Kotlin, etc.). 7onic focuses on TypeScript and CSS, which covers most React projects.
• Simplicity: 7onic has a smaller feature set, which means a simpler config and a faster learning curve. If you only need React + CSS, 7onic is lighter.
• Integration: 7onic is designed to plug into a React build pipeline with minimal setup, whereas Style Dictionary might require more configuration to get the exact output you want.

If your project uses multiple platforms (iOS, Android, web), Style Dictionary is a better fit. If you are React-only, 7onic is a pragmatic choice.

Costs and Tradeoffs

Adopting 7onic has a few costs:

• Initial migration: You must move your existing tokens into the JSON format and update your components to import the generated constants. This is a one-time effort, but it can be tedious if you have many tokens.
• Build step: 7onic adds a small step to your build process. The overhead is negligible (it is just file generation), but it is another tool to install and configure.
• Learning curve: Developers need to learn the JSON schema and the generation workflow. For a team unfamiliar with token pipelines, this is a small but real cost.

The benefit—eliminating drift—usually outweighs these costs, especially as the design system grows.

Safety and Best Practices

7onic is a build-time tool, so it has no runtime security implications. However, there are best practices to follow:

• Commit generated files: Some teams prefer to generate artifacts on the fly and not commit them. For reproducibility, it is safer to commit the generated TypeScript and CSS files, so the build does not depend on a specific 7onic version.
• Validate tokens: Use a schema validator (like JSON Schema) to catch typos in the token file before generation.
• Version control: Keep the token JSON in version control and review changes like any other code change.

Frequently Asked Questions

Does 7onic support dark mode or theming?

7onic generates static CSS variables. For dark mode, you would typically define a separate set of tokens (or use a data-theme attribute) and generate a second CSS file. The TypeScript constants remain the same, but you may need a runtime mechanism to switch themes.

Can I use 7onic with CSS-in-JS libraries like styled-components?

Yes. You can import the generated TypeScript constants and use them directly in your styled-components or Emotion styles. That gives you type safety and autocomplete, and the values stay in sync with your CSS variables if you also use them.

What if I need a token that is not a simple value, like a shadow or gradient?

7onic can handle any value that can be represented as a string, including complex ones like 0 1px 3px rgba(0,0,0,0.12). The JSON schema is flexible enough to store these as strings, and the generated CSS variable will contain the full value.

How does 7onic compare to using a design token plugin for Tailwind CSS?

Tailwind’s configuration is a form of token system, but it is Tailwind-specific. 7onic is framework-agnostic on the CSS side; you can use it with Tailwind by mapping your tokens to Tailwind’s config, but that requires extra work. If you are already using Tailwind, its built-in theme system might be sufficient.

Is 7onic open source?

7onic is an open-source project, available on GitHub. You can inspect the source, contribute, or fork it if needed.

Related

• WhatsApp Web Not Downloading Files? Fix It
• Milk Pasteurization: How It Works & Pathogens Controlled
• Ocarina of Time Dungeon Order & How to Reach Each