{
  "version": "1.0",
  "children": [
    {
      "type": "frame",
      "id": "1f4f9812",
      "name": "Component Library",
      "width": 1200,
      "height": 700,
      "fill": "#F1F3F5",
      "padding": 32,
      "layout": "vertical",
      "gap": 32,
      "children": [
        {
          "type": "text",
          "id": "103eca35",
          "content": "MGC Component Library",
          "fontFamily": "Roboto",
          "fontSize": 22,
          "fontWeight": 700,
          "fill": "#0f172a",
          "children": [],
          "width": 258,
          "height": 41
        },
        {
          "type": "frame",
          "id": "a0df39e3",
          "name": "ButtonsSection",
          "layout": "vertical",
          "gap": 12,
          "children": [
            {
              "type": "text",
              "id": "34e83090",
              "content": "BUTTONS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": 600,
              "fill": "#6b7280",
              "children": [],
              "width": 60,
              "height": 25
            },
            {
              "type": "frame",
              "id": "7b1756b9",
              "name": "ButtonsRow",
              "layout": "horizontal",
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "69910a5f",
                  "name": "Btn_Primary",
                  "height": 40,
                  "fill": "#7209B7",
                  "cornerRadius": 8,
                  "padding": [
                    0,
                    20,
                    0,
                    20
                  ],
                  "layout": "horizontal",
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "ee743356",
                      "content": "Primary",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": 600,
                      "fill": "#f4f4f5",
                      "children": [],
                      "width": 62,
                      "height": 29,
                      "textAlign": "center"
                    }
                  ],
                  "effect": {
                    "type": "drop-shadow",
                    "color": "rgba(114,9,183,0.5)",
                    "offset": {
                      "x": 0,
                      "y": 0
                    },
                    "blur": 16
                  },
                  "width": 140
                },
                {
                  "type": "frame",
                  "id": "2e6ba9e2",
                  "name": "Btn_Secondary",
                  "height": 40,
                  "fill": "#161b27",
                  "cornerRadius": 8,
                  "padding": [
                    0,
                    20,
                    0,
                    20
                  ],
                  "layout": "horizontal",
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "9262fdb5",
                      "content": "Secondary",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": 600,
                      "fill": "#C77DFF",
                      "children": [],
                      "width": 78,
                      "height": 29,
                      "textAlign": "center"
                    }
                  ],
                  "stroke": {
                    "align": "inside",
                    "thickness": 1,
                    "fill": "#7209B7"
                  },
                  "width": 148
                },
                {
                  "type": "frame",
                  "id": "e9ab1f38",
                  "name": "Btn_Ghost",
                  "height": 40,
                  "fill": "rgba(0,0,0,0)",
                  "cornerRadius": 8,
                  "padding": [
                    0,
                    20,
                    0,
                    20
                  ],
                  "layout": "horizontal",
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "597ed405",
                      "content": "Ghost",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": 600,
                      "fill": "#0f172a",
                      "children": [],
                      "width": 60,
                      "height": 29,
                      "textAlign": "center"
                    }
                  ],
                  "width": 100
                },
                {
                  "type": "frame",
                  "id": "68b43829",
                  "name": "Btn_Destructive",
                  "height": 40,
                  "fill": "#f43f5e",
                  "cornerRadius": 8,
                  "padding": [
                    0,
                    20,
                    0,
                    20
                  ],
                  "layout": "horizontal",
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "d3738399",
                      "content": "Destructive",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": 600,
                      "fill": "#f4f4f5",
                      "children": [],
                      "width": 93,
                      "height": 29,
                      "textAlign": "center"
                    }
                  ],
                  "width": 148
                },
                {
                  "type": "frame",
                  "id": "b9e6aa24",
                  "name": "Btn_Accent CTA",
                  "height": 40,
                  "fill": "#F72585",
                  "cornerRadius": 8,
                  "padding": [
                    0,
                    20,
                    0,
                    20
                  ],
                  "layout": "horizontal",
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "d6d51787",
                      "content": "Accent CTA",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": 600,
                      "fill": "#080a12",
                      "children": [],
                      "width": 84,
                      "height": 29,
                      "textAlign": "center"
                    }
                  ],
                  "effect": {
                    "type": "drop-shadow",
                    "color": "rgba(247,37,133,0.45)",
                    "offset": {
                      "x": 0,
                      "y": 0
                    },
                    "blur": 16
                  },
                  "width": 148
                }
              ],
              "width": 732
            }
          ],
          "width": 1200
        },
        {
          "type": "frame",
          "id": "957071eb",
          "name": "CardsSection",
          "layout": "vertical",
          "gap": 12,
          "children": [
            {
              "type": "text",
              "id": "b3821612",
              "content": "CARDS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": 600,
              "fill": "#6b7280",
              "children": [],
              "width": 60,
              "height": 25
            },
            {
              "type": "frame",
              "id": "44d275de",
              "name": "CardsRow",
              "layout": "horizontal",
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "41e085b6",
                  "name": "CardDefault",
                  "width": 200,
                  "height": 100,
                  "fill": "#161b27",
                  "cornerRadius": 12,
                  "stroke": {
                    "align": "inside",
                    "thickness": 1,
                    "fill": "#2a3147"
                  },
                  "padding": 16,
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "id": "de5ae284",
                      "content": "Default Card",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": 600,
                      "fill": "#f4f4f5",
                      "children": [],
                      "width": 99,
                      "height": 29,
                      "textAlign": "center"
                    },
                    {
                      "type": "text",
                      "id": "0bc23314",
                      "content": "Surface card variant",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fill": "#9ca3af",
                      "children": [],
                      "width": 138,
                      "height": 26,
                      "textAlign": "center"
                    }
                  ],
                  "justifyContent": "center",
                  "alignItems": "center"
                },
                {
                  "type": "frame",
                  "id": "cd8f6be6",
                  "name": "CardElevated",
                  "width": 200,
                  "height": 100,
                  "fill": "#1e2535",
                  "cornerRadius": 12,
                  "stroke": {
                    "align": "inside",
                    "thickness": 1,
                    "fill": "#2a3147"
                  },
                  "padding": 16,
                  "layout": "vertical",
                  "gap": 8,
                  "effect": {
                    "type": "drop-shadow",
                    "color": "rgba(0,0,0,0.5)",
                    "offset": {
                      "x": 0,
                      "y": 4
                    },
                    "blur": 16
                  },
                  "children": [
                    {
                      "type": "text",
                      "id": "bbb89da0",
                      "content": "Elevated Card",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": 600,
                      "fill": "#f4f4f5",
                      "children": [],
                      "width": 107,
                      "height": 29,
                      "textAlign": "center"
                    },
                    {
                      "type": "text",
                      "id": "b712c19f",
                      "content": "With drop shadow",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fill": "#9ca3af",
                      "children": [],
                      "width": 111,
                      "height": 26,
                      "textAlign": "center"
                    }
                  ],
                  "justifyContent": "center",
                  "alignItems": "center"
                },
                {
                  "type": "frame",
                  "id": "beabbb82",
                  "name": "CardInteractive",
                  "width": 200,
                  "height": 100,
                  "fill": "#161b27",
                  "cornerRadius": 12,
                  "stroke": {
                    "align": "inside",
                    "thickness": 1,
                    "fill": "#7209B7"
                  },
                  "padding": 16,
                  "layout": "vertical",
                  "gap": 8,
                  "effect": {
                    "type": "drop-shadow",
                    "color": "rgba(124,58,237,0.25)",
                    "offset": {
                      "x": 0,
                      "y": 0
                    },
                    "blur": 16
                  },
                  "children": [
                    {
                      "type": "text",
                      "id": "3497612d",
                      "content": "Interactive Card",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": 600,
                      "fill": "#f4f4f5",
                      "children": [],
                      "width": 130,
                      "height": 29,
                      "textAlign": "center"
                    },
                    {
                      "type": "text",
                      "id": "d5736f92",
                      "content": "Brand border + glow",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fill": "#C77DFF",
                      "children": [],
                      "width": 129,
                      "height": 26,
                      "textAlign": "center"
                    }
                  ],
                  "justifyContent": "center",
                  "alignItems": "center"
                }
              ],
              "width": 624
            }
          ],
          "width": 1200
        },
        {
          "type": "frame",
          "id": "d643734e",
          "name": "InputsSection",
          "layout": "vertical",
          "gap": 12,
          "children": [
            {
              "type": "text",
              "id": "8e85451b",
              "content": "INPUT FIELDS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": 600,
              "fill": "#6b7280",
              "children": [],
              "width": 80,
              "height": 25
            },
            {
              "type": "frame",
              "id": "e17da461",
              "name": "InputsRow",
              "layout": "horizontal",
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "ca43917d",
                  "name": "InputDefault",
                  "width": 240,
                  "height": 40,
                  "fill": "#161b27",
                  "cornerRadius": 8,
                  "stroke": {
                    "align": "inside",
                    "thickness": 1,
                    "fill": "#2a3147"
                  },
                  "padding": [
                    0,
                    12,
                    0,
                    12
                  ],
                  "layout": "horizontal",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "619321c3",
                      "content": "Placeholder text...",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fill": "#6b7280",
                      "children": [],
                      "width": 149,
                      "height": 29,
                      "textAlign": "center"
                    }
                  ],
                  "justifyContent": "center"
                },
                {
                  "type": "frame",
                  "id": "180c90c6",
                  "name": "InputFocused",
                  "width": 240,
                  "height": 40,
                  "fill": "#161b27",
                  "cornerRadius": 8,
                  "stroke": {
                    "align": "inside",
                    "thickness": 1,
                    "fill": "#7209B7"
                  },
                  "padding": [
                    0,
                    12,
                    0,
                    12
                  ],
                  "layout": "horizontal",
                  "alignItems": "center",
                  "effect": {
                    "type": "drop-shadow",
                    "color": "rgba(124,58,237,0.25)",
                    "offset": {
                      "x": 0,
                      "y": 0
                    },
                    "blur": 8
                  },
                  "children": [
                    {
                      "type": "text",
                      "id": "bd2c022a",
                      "content": "Focused state",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fill": "#f4f4f5",
                      "children": [],
                      "width": 107,
                      "height": 29,
                      "textAlign": "center"
                    }
                  ],
                  "justifyContent": "center"
                }
              ],
              "width": 492
            }
          ],
          "width": 1200
        },
        {
          "type": "frame",
          "id": "2467e14a",
          "name": "TilesSection",
          "layout": "vertical",
          "gap": 12,
          "children": [
            {
              "type": "text",
              "id": "965dfa74",
              "content": "SCENE TILE & CHOICE OPTION",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": 600,
              "fill": "#6b7280",
              "children": [],
              "width": 160,
              "height": 25
            },
            {
              "type": "frame",
              "id": "0ce0ecee",
              "name": "TilesRow",
              "layout": "horizontal",
              "gap": 12,
              "alignItems": "flex-start",
              "children": [
                {
                  "type": "frame",
                  "id": "ee81cc65",
                  "name": "SceneTile",
                  "width": 200,
                  "height": 100,
                  "fill": "#161b27",
                  "cornerRadius": 12,
                  "stroke": {
                    "align": "inside",
                    "thickness": 2,
                    "fill": "#7209B7"
                  },
                  "padding": 16,
                  "layout": "vertical",
                  "gap": 6,
                  "effect": {
                    "type": "drop-shadow",
                    "color": "rgba(114,9,183,0.5)",
                    "offset": {
                      "x": 0,
                      "y": 0
                    },
                    "blur": 20
                  },
                  "children": [
                    {
                      "type": "text",
                      "id": "54560572",
                      "content": "DIALOGUE",
                      "fontFamily": "Roboto",
                      "fontSize": 10,
                      "fontWeight": 600,
                      "fill": "#C77DFF",
                      "children": [],
                      "width": 60,
                      "height": 23,
                      "textAlign": "center"
                    },
                    {
                      "type": "text",
                      "id": "569bf7b9",
                      "content": "At the Gates",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": 600,
                      "fill": "#f4f4f5",
                      "children": [],
                      "width": 91,
                      "height": 28,
                      "textAlign": "center"
                    },
                    {
                      "type": "text",
                      "id": "c09e96f3",
                      "content": "«Dialogue text preview...»",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fill": "#9ca3af",
                      "children": [],
                      "width": 157,
                      "height": 30,
                      "textAlign": "center"
                    }
                  ],
                  "justifyContent": "center",
                  "alignItems": "center"
                },
                {
                  "type": "frame",
                  "id": "0fc90f19",
                  "name": "ChoiceOption",
                  "width": 335,
                  "height": 52,
                  "fill": "#161b27",
                  "cornerRadius": 10,
                  "stroke": {
                    "align": "inside",
                    "thickness": 1,
                    "fill": "#2a3147"
                  },
                  "padding": [
                    0,
                    16,
                    0,
                    16
                  ],
                  "layout": "horizontal",
                  "alignItems": "center",
                  "gap": 12,
                  "children": [
                    {
                      "type": "frame",
                      "id": "8fa73fc5",
                      "width": 28,
                      "height": 34,
                      "fill": "#7209B7",
                      "cornerRadius": 8,
                      "layout": "horizontal",
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "a18478b3",
                          "content": "A",
                          "fontFamily": "Roboto",
                          "fontSize": 12,
                          "fontWeight": 700,
                          "fill": "#f4f4f5",
                          "children": [],
                          "width": 12,
                          "height": 26,
                          "textAlign": "center"
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "id": "7283cf92",
                      "content": "Choice option text here",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fill": "#f4f4f5",
                      "children": [],
                      "width": 181,
                      "height": 29,
                      "textAlign": "center"
                    }
                  ],
                  "justifyContent": "center"
                }
              ],
              "width": 547
            }
          ],
          "width": 1200
        }
      ]
    }
  ]
}