Add a CLI export target for CSS variables, for example:
npx @google/design.md export --format css-vars DESIGN.md > design.tokens.css
Expected output
Generate a :root block with stable, semantic custom properties derived from tokens, e.g.:
:root {
--color-primary: #1A1C1E;
--color-secondary: #6C7278;
--spacing-sm: 8px;
--spacing-md: 16px;
--rounded-sm: 4px;
--rounded-md: 8px;
}
Optionally support:
--selector :root
--prefix ds
- dark-theme/media-query variants later if the spec grows there
Why this helps
- makes DESIGN.md more useful outside Tailwind ecosystems
- gives coding agents a direct artifact they can apply in native CSS codebases
- improves adoption for frameworks that want CSS variables as the implementation boundary
- complements DTCG export without requiring downstream token tooling
Add a CLI export target for CSS variables, for example:
Expected output
Generate a :root block with stable, semantic custom properties derived from tokens, e.g.:
Optionally support:
--selector :root--prefix dsWhy this helps