Examples corpus

These examples provide a baseline for producer implementation, consumer testing, and interoperability review.

Button

button.json

Reusable component with semantic role and tokenized style.

Modal

modal.json

Screen-like container with layered structure and actions.

Form

form.json

Input and button composition for common app workflows.

Example: button.jsonJSON

{
  "version": "1.0.0",
  "source": {"tool": "figma", "fileId": "sample-button"},
  "nodes": [
    {
      "id": "cmp_button_primary",
      "type": "component",
      "name": "Button/Primary",
      "role": "button",
      "children": ["txt_button_primary_label"],
      "layout": {
        "type": "flex",
        "direction": "row",
        "align": "center",
        "justify": "center",
        "gap": "{space.2}",
        "padding": {"x": "{space.4}", "y": "{space.2}"}
      },
      "style": {
        "background": "{color.brand.primary}",
        "text": "{typography.label.md}",
        "radius": "{radius.md}"
      },
      "confidence": 0.97
    },
    {
      "id": "txt_button_primary_label",
      "type": "text",
      "name": "Label",
      "text": "Continue",
      "parentId": "cmp_button_primary",
      "role": "text"
    }
  ]
}