diff --git a/www/src/pages/docs/guides/dtcg.md b/www/src/pages/docs/guides/dtcg.md index a626aa7d..c0a03570 100644 --- a/www/src/pages/docs/guides/dtcg.md +++ b/www/src/pages/docs/guides/dtcg.md @@ -7,12 +7,22 @@ layout: ../../../layouts/docs.astro The DTCG format is a [W3C Community Group specification](https://www.designtokens.org/) started in 2020 and aims to outline a standard, universal design token format that works for all forms of digital design (including web, print, native apps, and beyond). -If you’re familiar with the “what,” “why,” and “how” of the DTCG spec you don’t need to read this guide. This will cover some brief history over how the spec came to be, and what problems it solves for those working with design tokens. +DTCG tokens are stored in JSON, and look something like the following: -## Write once, use everywhere +```json +{ + "rebeccapurple": { + "$type": "color", + "$value": { + "colorSpace": "srgb", + "channels": [0.4, 0.2, 0.6] + } + } +} +``` -The design philosophy of the DTCG format is **declare tokens once and use them everywhere.** This aligns with the goal of using design tokens in the first place: encoding design decisions in a portable format to be used across multiple software targets. +By storing tokens in a universal format like JSON, you can centrally manage them and generate code for any output target including web and native apps. -But since different platforms have different requirements about how colors are used (e.g. Swift has system colors available, while CSS does not), managing these tokens across platforms becomes impossible to keep up with at scale. +## Format -[TODO] +You can [find the official format here](https://tr.designtokens.org/format/). But for convenience, we also have [a list of token types](/docs/reference/tokens) Terrazzo supports.