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 — jamillazarev.com.

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 × 640, 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 lives in figma.clientStorage keyed by figma.fileKey (per-user and per-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 mirror the plugin's in-app About panel section-for-section.