🎨 kg-css-variables — DEPRECATED

⚠️ Status: Deprecated as of 2026-05. Scheduled for archival in Phase 7 of the 2b Design System upgrade.

This repo is no longer actively maintained. It used the design-tokens Figma plugin to push token JSON, then converted it via style-dictionary — but the last-mile sync to the frontend (packages/kryptogo-ui/css-variables/) was still manual cp, the output is a fourth duplicate of tokens defined elsewhere, and the upstream Figma file no longer drives KryptoGO's design system (the new source is the KryptoGO Design System 2026 Figma file, which uses native Figma Variables instead of the plugin format).

What replaces it

A new kg-frontend/scripts/sync-tokens/ (Phase 1) will read directly from Figma's REST API against the 2026 file and emit packages/kryptogo-2b/tokens/{primitives,semantic.light,semantic.dark,responsive}.css. @kryptogo/2b is the single source of truth for design tokens going forward.

Migration

Old	New
kg-css-variables/build/color-tokens/light-mode.css	packages/kryptogo-2b/tokens/primitives.css (Phase 1)
Manual copy to packages/kryptogo-ui/css-variables/	Auto-generated by pnpm sync-tokens
design-tokens Figma plugin export	Figma REST API + Variables (no plugin needed)

See the 2b Design System Plan in Notion for the full migration roadmap and timeline.

Removal plan

The repository will be archived (GitHub Settings → Archive) in Phase 7 once the new sync pipeline is verified and no GitHub Actions or external services depend on this repo.

---

Original documentation (kept for reference)

This repo is supposed to be used together with the Design Tokens plugin for Figma. It transforms the exported design tokens using Amazon style dictionary.

Why

To eliminate the synchronization gap between design and engineering, we adopt an automated approach to align parameters. Designers can push variable updates from Figma with a single click, and front-end developers can simply reference the converted variables.

Workflow

1. [Designer] Open figma file and export design tokens through plugin - design tokens
2. [Github Workflow] Trigger transform token actions and create PR of variables
3. [FrontEnd] Check Github Repo - kg-css-variables and maintain variables for frontend usage

Documentation

Notion - Automated Design Token Integration