Share your tools that support the DTCG format about community-group HOT 5 OPEN

Cobalt CLI

Cobalt is an open-source, MIT-licensed frontend toolchain that:

• can validate any DTCG tokens schema and give detailed errors
• has existing integrations for JavaScript, TypeScript, CSS/Sass, JSON and Tailwind CSS
• Used in production for several sites (Snyk and Tidepool)
• has a plugin system that can support any build target
• can bundle multiple tokens schemas together
• supports the modes extension for light & dark mode

Supported spec version(s)

• Live draft

from community-group.

Design Token Validator

Check that your design tokens adhere to the DTCG spec with this free open source Design Tokens Validator

To get started, paste the JSON for your design tokens, or upload a file directly. The site will then validate your tokens and present a list of helpful messages, which link to relevant parts of the spec, to help fix any problems.

Supported spec version(s)

• Live draft

from community-group.

TokensBrücke — Figma plugin

TokensBrücke is a Figma plugin that simplifies the process of converting Figma variables into design-tokens JSON. The plugin generates JSON files compatible with the latest DTCG specification.

• Github repo
• Style Dictionary utils

Supported spec version(s)

• Live draft

from community-group.

@universse 👋🏻 It'd be great to see https://github.com/universse/theminglayer showcased here!

from community-group.

Thanks @kaelig for mentioning this thread 🙌.

ThemingLayer

ThemingLayer empowers team to craft digital experience that cater to diverse needs of their audience.

• Build themeable design system with built-in support for the three-tier token architecture
• Beyond dark mode — define conditional token values that adapt to user preference, system settings and platform capabilities
• Create component tokens with multiple visual and state variants
• Extensible via plugins, ThemingLayer integrates with any tech stack and workflow

Supported spec version(s)

• Live draft

from community-group.