# DTCG tokens

> DTCG is the file format of the W3C Design Tokens Community Group: JSON in which each token has a $value and a $type. Tools that read it can turn one file into code for every platform.

Page: https://www.appetiteui.com/academy/glossary/dtcg. DTCG tokens: the W3C design token format. Also called W3C design tokens format.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | No equivalent | No equivalent; Material Theme Builder exports its own JSON | tokens.json, W3C DTCG |

## In practice

A DTCG file nests tokens by path, so brand/base in Figma is brand.base in the file. Extensions carry what the format does not, such as the light and dark values and the code name each platform uses.

Appetite UI publishes the tokens its docs previews draw as DTCG at /tokens.json, keyed by Figma path, with modes and code names in $extensions. The full source, with its SwiftUI, Compose, Flutter and CSS outputs, comes in the file you buy.

## Questions

### Which tools read DTCG tokens?

Build tools such as Style Dictionary read the format and write platform code from it. Appetite UI’s token package is built that way: one DTCG source becomes SwiftUI, Jetpack Compose, Flutter and CSS.

### Where can I see a real DTCG file?

Appetite UI publishes the tokens its docs previews draw at appetiteui.com/tokens.json, nested by Figma path, with the light and dark values and each platform’s code name in $extensions.

## Sources

1. [Design Tokens Community Group: Format](https://tr.designtokens.org/format/)
2. [Design Tokens Community Group](https://www.designtokens.org/)
3. [Style Dictionary](https://styledictionary.com/)

## Related

- Docs: [Code output](https://www.appetiteui.com/docs/code-output)
- Docs: [Tokens](https://www.appetiteui.com/tokens)
- Article: [How one Figma token becomes SwiftUI, Compose, Flutter and CSS](https://www.appetiteui.com/blog/figma-token-to-swiftui-compose-flutter-css)
- Glossary: [Design tokens](https://www.appetiteui.com/academy/glossary/design-tokens)