Microcopy (button labels, error messages, form hints) is typically hardcoded and scattered across codebases, making it hard to keep consistent. This post explores managing microcopy as design tokens using Style Dictionary. Since the W3C Design Tokens spec lacks a string/content type, the approach uses a placeholder $type at the group level and $extensions to identify microcopy tokens. The post covers structuring token files by context (buttons, forms, errors), building JavaScript and JSON outputs via custom Style Dictionary formats, using tokens in React components and vanilla JS validation, and extending the pattern to multi-language support through token layers. A working GitHub repository is provided.
Table of contents
Why Manage Microcopy as Tokens?Understanding the W3C SpecificationStructuring Microcopy TokensCreating Microcopy Tokens With $extensionsGenerating Microcopy With Style DictionaryUsing Microcopy Tokens in ComponentsMulti-Language Support Through Token LayersWhy This Approach WorksSort: