Engramma

Paid ExtensionWeb

What Engramma is

Engramma is a web-based editor and converter for design tokens used in design systems. Its editor previews colors, typography, spacing, and other token values, with support for colors, dimensions, durations, numbers, font families and weights, borders, shadows, typography, and gradients. Users can import DTCG JSON based on the 2025 specification, JSON from the 2022 draft, or CSS variables. Aliases connect abstract token values to semantic roles, support design variations, and avoid repeated values. Exports are available as DTCG-shaped JSON, CSS custom properties, or SCSS variables. Engramma can also generate a share URL containing current token data, and developers can embed it as a web component to edit CSS variables on a page in real time. The project is free and open source under the MIT License. Its maker, Bogdan Chadkin, started building it as a design token app and invites people working with design systems to try it and provide feedback. Synchronization with project code and integrations with graphics editors and website builders are described as future ideas; code sync is unavailable. The maker describes the app as using anonymous analytics.

Who it suits

Engramma suits people working with design systems who need to edit, preview, import, and export design tokens. Developers may also find it useful when embedding token editing on a page as a web component.

What it does well

Free and open source under the MIT License.
Imports DTCG JSON and CSS variables.
Exports JSON, CSS custom properties, and SCSS variables.
Share URLs can contain current token data.
Web component can edit CSS variables in real time.

What to know first

Code synchronization is unavailable.
Graphics editor and website builder integrations are future ideas.
The app uses anonymous analytics.

Getting started

Open https://engramma.dev/ on the web or use the extension.
Import DTCG 2025 JSON, DTCG 2022 draft JSON, or CSS custom properties.
Edit and preview token values, using aliases where useful.
Export tokens as DTCG-shaped JSON, CSS custom properties, or SCSS variables, or create a share URL.
Embed Engramma as a web component to edit CSS variables on a page in real time.

Verdict

Engramma covers token editing, conversion, sharing, and embedded CSS variable editing in a free, MIT-licensed project. Code sync and integrations with graphics editors and website builders are not available features today.

Questions

Is Engramma free?

Yes. Engramma is free and open source under the MIT License.

Which platforms are available?

Engramma is available on the web and as an extension.

What formats can I import and export?

It imports DTCG JSON from the 2025 specification, JSON from the 2022 draft, and CSS custom properties. It exports DTCG-shaped JSON, CSS custom properties, or SCSS variables.

Can I share token data?

Yes. Engramma can create a share URL containing the current token data.

Who makes Engramma?

Bogdan Chadkin says he started building Engramma as a design tokens app.

Does it sync code or integrate with graphics editors and website builders?

Code synchronization is unavailable. The maker describes synchronization and integrations with graphics editors and website builders as future ideas.

Facts from Engramma's own pages

Aliases: Token aliases can create semantic layers, support theme variations, reduce repeated values, and reference tokens inside composite tokens. · github.com, 8 Oct 2026
Data and analytics: The maker described Engramma as using anonymous analytics. · trysound.io, 8 Oct 2026
Exports: It exports tokens as JSON, CSS custom properties, and SCSS variables. · github.com, 8 Oct 2026
Import: It imports DTCG JSON from the 2025 specification, JSON from the 2022 draft, and CSS variables. · github.com, 4 Oct 2026
Imports: Users can import DTCG 2025 JSON, DTCG 2022 draft JSON, or CSS custom properties. · github.com, 8 Oct 2026
Integrations: The maker describes synchronizing tokens with project code and integrations with graphics editors and website builders as future ideas. · trysound.io, 8 Oct 2026
Intended audience: The maker invites people who work with design systems to try Engramma and provide feedback. · trysound.io, 8 Oct 2026
License: The project is licensed under the MIT License. · github.com, 4 Oct 2026
Maker: Bogdan Chadkin says he started building Engramma as a design tokens app. · trysound.io, 4 Oct 2026
Open source: The project is open source and licensed under the MIT License. · github.com, 8 Oct 2026
Purpose: Engramma is a web based editor and converter for creating, previewing, and exporting design tokens for design systems. · github.com, 8 Oct 2026
Share drafts: The app can create a share URL containing the current token data. · github.com, 8 Oct 2026
Sharing: The app can create a share URL containing the current token data. · github.com, 4 Oct 2026
Support: The app invites users to support ongoing development by sponsoring the project and lists [email protected] as its sponsor and contact email. · app.engramma.dev, 8 Oct 2026
Token previews: The editor previews colors, typography, spacing, and other design token values. · github.com, 4 Oct 2026
Token types: It supports color, dimension, duration, number, font family and weight, cubic Bézier, stroke style, border, shadow, transition, typography, and gradient tokens. · github.com, 8 Oct 2026
Web component: An embeddable web component can detect CSS variables on a page and let developers edit them in real time. · github.com, 8 Oct 2026

Where Engramma stands on Freedom251

Design System Software#22 of 22