- Home
- Design System Software
- Engramma
Engramma
What it is
Engramma is a free, open-source web editor and converter for design tokens used in design systems. Its editor previews colors, typography, spacing, and other token values while supporting color, dimension, duration, number, font family, font weight, border, shadow, typography, and gradient types. Users can import DTCG JSON from the 2025 specification, JSON from the 2022 draft, or CSS custom properties. Token aliases connect abstract values with semantic roles, support design variations, and reduce repeated definitions. Exports include DTCG-shaped JSON, CSS custom properties, and SCSS variables. Engramma can create a share URL containing current token data. Developers can embed it as a web component to edit CSS variables on a page in real time. The project is licensed under MIT and is available on the web and as an extension. Code synchronization is unavailable; integrations with graphics editors and website builders are described as future ideas.
For and against
For
- Free and open source
- Imports current and draft DTCG JSON
- Exports JSON, CSS, and SCSS
- Supports token aliases
- Embeddable as a web component
Against
- Code synchronization is unavailable
- Other integrations are future ideas
- Uses anonymous analytics
The verdict
Engramma focuses on token editing, conversion, previews, and sharing across web-based workflows. Its MIT license and broad import/export support are useful, while unavailable code sync may matter to teams seeking direct project integration.
Who it suits
Engramma suits people working with design systems who need to edit, preview, convert, and share token data. It is also useful to developers who want an embeddable token editor for CSS variables.
On the record
- Aliases
- Token aliases can create semantic layers, support theme variations, reduce repeated values, and reference tokens inside composite tokens.github.com · read 8 Oct 2026
- Data and analytics
- The maker described Engramma as using anonymous analytics.trysound.io · read 8 Oct 2026
- Exports
- It exports tokens as JSON, CSS custom properties, and SCSS variables.github.com · read 8 Oct 2026
- Import
- It imports DTCG JSON from the 2025 specification, JSON from the 2022 draft, and CSS variables.github.com · read 4 Oct 2026
- Imports
- Users can import DTCG 2025 JSON, DTCG 2022 draft JSON, or CSS custom properties.github.com · read 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 · read 8 Oct 2026
- Intended audience
- The maker invites people who work with design systems to try Engramma and provide feedback.trysound.io · read 8 Oct 2026
- License
- The project is licensed under the MIT License.github.com · read 4 Oct 2026
- Maker
- Bogdan Chadkin says he started building Engramma as a design tokens app.trysound.io · read 4 Oct 2026
- Open source
- The project is open source and licensed under the MIT License.github.com · read 8 Oct 2026
- Purpose
- Engramma is a web based editor and converter for creating, previewing, and exporting design tokens for design systems.github.com · read 8 Oct 2026
- Share drafts
- The app can create a share URL containing the current token data.github.com · read 8 Oct 2026
- Sharing
- The app can create a share URL containing the current token data.github.com · read 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 · read 8 Oct 2026
- Token previews
- The editor previews colors, typography, spacing, and other design token values.github.com · read 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 · read 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 · read 8 Oct 2026
