Overview

A Figma plugin for generating perceptually uniform design token systems using the HCT (Hue, Chroma, Tone) colour space from Google's Material Design 3.

Designed and built by Jamil Lazarev.

Define a structural model (surfaces, containers, content, scrims), assign colours and contrast ratios, and Systema computes every resulting token across all modes, conditions and interactions automatically. A multi-agent AI chat is built in for audits, proposals, and hands-on theme editing via the apply_theme_patch tool.

The UI is built entirely with shadcn/ui components (Button, Input, Select, Switch, Checkbox with indeterminate state, Tooltip, Separator, Collapsible, AlertDialog, Slider, Label, ToggleGroup). Three fixed-minimum 480 px columns: Editor (fixed 480) + Preview (elastic, min 480) + AI Chat (fixed 480 when docked, 320 × 480 when floating). Minimum window 960 × 720, default 960 × 720, chat auto-docks as a third panel when the window is ≥ 1440 px wide.

Persistence: themes and layout live in figma.root.pluginData (file-level, shared). Chat history, API keys, and Settings-dialog values live in figma.clientStorage (per-user, cross-file, works in desktop and web Figma). Chat is keyed by figma.fileKey + themeId; settings are keyed by systema_user_settings and follow the user across every file. All scroll areas (editor, color filter, preview, chat) persist and restore their positions.

Two paths in:

• Philosophy — the abstraction-level argument: why "low-level building blocks + computed output" beats "high-level prescription".
• Entity Types — the four primitives (Surfaces, Containers, Content, Scrims) you compose into a system.

The rest of the docs cover every concept, UI surface, and output path in depth. They're also the single source of truth the in-plugin AI agents read — the plugin's Docs affordances open these pages directly.