Engramma

What Engramma is

Engramma is a free, open-source editor and converter for design tokens used in design systems. Its web editor previews values such as color, typography, and spacing, and supports tokens including dimensions, durations, font families and weights, borders, shadows, and gradients. It imports DTCG JSON based on the 2025 specification, JSON from the 2022 draft, and CSS variables. Aliases can connect abstract values to semantic roles, support design variations, and reduce repeated entries. When tokens are ready, users can export DTCG-shaped JSON, CSS custom properties, or SCSS variables, and create a share URL containing the current token data. Developers can embed Engramma as a web component to edit CSS variables on a page in real time. The project is licensed under MIT. Its maker, Bogdan Chadkin, says he began building it as a design token app. Synchronization with project code and integrations with graphics editors and website builders are future ideas; code sync is unavailable. The project also uses anonymous analytics.