{ "version": "1.0", "children": [ { "type": "frame", "id": "cs_root", "name": "Component States — Design System", "width": 1440, "height": 2400, "fill": "#F1F3F5", "padding": 48, "layout": "vertical", "gap": 56, "children": [ { "type": "text", "id": "cs_title", "content": "Component States — MGC Design System", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": 700, "fill": "#0f172a", "width": 600, "height": 48, "children": [] }, { "type": "text", "id": "cs_subtitle", "content": "P0 · Все состояния для топ-5 компонентов", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 400, "fill": "#6b7280", "width": 400, "height": 24, "children": [] }, { "type": "frame", "id": "btn_section", "name": "ButtonStates", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "btn_label", "content": "BUTTON STATES", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": 600, "fill": "#7209B7", "letterSpacing": 1.5, "width": 150, "height": 20, "children": [] }, { "type": "frame", "id": "btn_row", "name": "ButtonRow", "layout": "horizontal", "gap": 20, "alignItems": "center", "children": [ { "type": "frame", "id": "btn_default", "name": "Btn_Default", "width": 140, "height": 40, "fill": "#7209B7", "cornerRadius": 8, "padding": [0, 20, 0, 20], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "btn_default_txt", "content": "Default", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 600, "fill": "#f4f4f5", "width": 56, "height": 24, "textAlign": "center", "children": [] } ] }, { "type": "frame", "id": "btn_hover", "name": "Btn_Hover", "width": 140, "height": 40, "fill": "#9B2FD4", "cornerRadius": 8, "padding": [0, 20, 0, 20], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "effect": { "type": "drop-shadow", "color": "rgba(114,9,183,0.4)", "offset": {"x": 0, "y": 4}, "blur": 12 }, "children": [ { "type": "text", "id": "btn_hover_txt", "content": "Hover", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 600, "fill": "#f4f4f5", "width": 50, "height": 24, "textAlign": "center", "children": [] } ] }, { "type": "frame", "id": "btn_focus", "name": "Btn_Focus", "width": 140, "height": 40, "fill": "#7209B7", "cornerRadius": 8, "padding": [0, 20, 0, 20], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "stroke": { "align": "outside", "thickness": 2, "fill": "#C77DFF" }, "children": [ { "type": "text", "id": "btn_focus_txt", "content": "Focus", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 600, "fill": "#f4f4f5", "width": 50, "height": 24, "textAlign": "center", "children": [] } ] }, { "type": "frame", "id": "btn_active", "name": "Btn_Active", "width": 140, "height": 40, "fill": "#5A0090", "cornerRadius": 8, "padding": [0, 20, 0, 20], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "btn_active_txt", "content": "Active", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 600, "fill": "#f4f4f5", "width": 50, "height": 24, "textAlign": "center", "children": [] } ] }, { "type": "frame", "id": "btn_disabled", "name": "Btn_Disabled", "width": 140, "height": 40, "fill": "#2a2a3a", "cornerRadius": 8, "padding": [0, 20, 0, 20], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "btn_disabled_txt", "content": "Disabled", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 600, "fill": "#4a4a5a", "width": 64, "height": 24, "textAlign": "center", "children": [] } ] }, { "type": "frame", "id": "btn_loading", "name": "Btn_Loading", "width": 140, "height": 40, "fill": "#7209B7", "cornerRadius": 8, "padding": [0, 20, 0, 20], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [ { "type": "ellipse", "id": "btn_spinner", "width": 16, "height": 16, "fill": "rgba(255,255,255,0)", "stroke": {"align": "inside", "thickness": 2, "fill": "#f4f4f5"}, "children": [] }, { "type": "text", "id": "btn_loading_txt", "content": "Loading", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 600, "fill": "#f4f4f5", "width": 60, "height": 24, "children": [] } ] } ] }, { "type": "frame", "id": "btn_labels_row", "name": "ButtonLabelsRow", "layout": "horizontal", "gap": 20, "children": [ {"type": "text", "id": "lbl_d", "content": "default", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 140, "height": 16, "textAlign": "center", "children": []}, {"type": "text", "id": "lbl_h", "content": "hover", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 140, "height": 16, "textAlign": "center", "children": []}, {"type": "text", "id": "lbl_f", "content": "focus", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 140, "height": 16, "textAlign": "center", "children": []}, {"type": "text", "id": "lbl_a", "content": "active", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 140, "height": 16, "textAlign": "center", "children": []}, {"type": "text", "id": "lbl_dis", "content": "disabled", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 140, "height": 16, "textAlign": "center", "children": []}, {"type": "text", "id": "lbl_ld", "content": "loading", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 140, "height": 16, "textAlign": "center", "children": []} ] } ] }, { "type": "frame", "id": "input_section", "name": "InputStates", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "input_label", "content": "INPUT STATES", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": 600, "fill": "#7209B7", "letterSpacing": 1.5, "width": 150, "height": 20, "children": [] }, { "type": "frame", "id": "input_row", "name": "InputRow", "layout": "horizontal", "gap": 20, "alignItems": "flex-start", "children": [ { "type": "frame", "id": "inp_default", "name": "Input_Default", "width": 200, "height": 40, "fill": "#161b27", "cornerRadius": 8, "padding": [0, 16, 0, 16], "layout": "horizontal", "alignItems": "center", "stroke": {"align": "inside", "thickness": 1, "fill": "#2a3040"}, "children": [ {"type": "text", "id": "inp_def_txt", "content": "Placeholder...", "fontFamily": "Roboto", "fontSize": 14, "fill": "#4b5563", "width": 120, "height": 24, "children": []} ] }, { "type": "frame", "id": "inp_focus", "name": "Input_Focus", "width": 200, "height": 40, "fill": "#161b27", "cornerRadius": 8, "padding": [0, 16, 0, 16], "layout": "horizontal", "alignItems": "center", "stroke": {"align": "inside", "thickness": 2, "fill": "#7209B7"}, "children": [ {"type": "text", "id": "inp_foc_txt", "content": "Typing...", "fontFamily": "Roboto", "fontSize": 14, "fill": "#f4f4f5", "width": 80, "height": 24, "children": []} ] }, { "type": "frame", "id": "inp_filled", "name": "Input_Filled", "width": 200, "height": 40, "fill": "#161b27", "cornerRadius": 8, "padding": [0, 16, 0, 16], "layout": "horizontal", "alignItems": "center", "stroke": {"align": "inside", "thickness": 1, "fill": "#3a4050"}, "children": [ {"type": "text", "id": "inp_fill_txt", "content": "user@example.com", "fontFamily": "Roboto", "fontSize": 14, "fill": "#f4f4f5", "width": 140, "height": 24, "children": []} ] }, { "type": "frame", "id": "inp_error", "name": "Input_Error", "width": 200, "height": 40, "fill": "#1f0a0a", "cornerRadius": 8, "padding": [0, 16, 0, 16], "layout": "horizontal", "alignItems": "center", "stroke": {"align": "inside", "thickness": 2, "fill": "#ef4444"}, "children": [ {"type": "text", "id": "inp_err_txt", "content": "invalid@", "fontFamily": "Roboto", "fontSize": 14, "fill": "#f4f4f5", "width": 80, "height": 24, "children": []} ] }, { "type": "frame", "id": "inp_disabled", "name": "Input_Disabled", "width": 200, "height": 40, "fill": "#0f1018", "cornerRadius": 8, "padding": [0, 16, 0, 16], "layout": "horizontal", "alignItems": "center", "stroke": {"align": "inside", "thickness": 1, "fill": "#1a1a2a"}, "children": [ {"type": "text", "id": "inp_dis_txt", "content": "Disabled", "fontFamily": "Roboto", "fontSize": 14, "fill": "#2a2a3a", "width": 80, "height": 24, "children": []} ] } ] }, { "type": "frame", "id": "input_labels_row", "name": "InputLabelsRow", "layout": "horizontal", "gap": 20, "children": [ {"type": "text", "id": "ilbl_d", "content": "default", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 200, "height": 16, "textAlign": "center", "children": []}, {"type": "text", "id": "ilbl_f", "content": "focus", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 200, "height": 16, "textAlign": "center", "children": []}, {"type": "text", "id": "ilbl_fi", "content": "filled", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 200, "height": 16, "textAlign": "center", "children": []}, {"type": "text", "id": "ilbl_e", "content": "error", "fontFamily": "Roboto", "fontSize": 11, "fill": "#b91c1c", "width": 200, "height": 16, "textAlign": "center", "children": []}, {"type": "text", "id": "ilbl_di", "content": "disabled", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 200, "height": 16, "textAlign": "center", "children": []} ] } ] }, { "type": "frame", "id": "card_section", "name": "CardStates", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "card_label", "content": "CARD STATES", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": 600, "fill": "#7209B7", "letterSpacing": 1.5, "width": 150, "height": 20, "children": [] }, { "type": "frame", "id": "card_row", "name": "CardRow", "layout": "horizontal", "gap": 24, "alignItems": "flex-start", "children": [ { "type": "frame", "id": "card_default", "name": "Card_Default", "width": 280, "height": 160, "fill": "#161b27", "cornerRadius": 12, "padding": 24, "layout": "vertical", "gap": 8, "stroke": {"align": "inside", "thickness": 1, "fill": "#2a3040"}, "children": [ {"type": "text", "id": "crd_def_title", "content": "Card Title", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": 600, "fill": "#f4f4f5", "width": 232, "height": 28, "children": []}, {"type": "text", "id": "crd_def_body", "content": "Card description text goes here. It can span multiple lines.", "fontFamily": "Roboto", "fontSize": 13, "fill": "#9ca3af", "width": 232, "height": 52, "children": []} ] }, { "type": "frame", "id": "card_hover", "name": "Card_Hover", "width": 280, "height": 160, "fill": "#1e2435", "cornerRadius": 12, "padding": 24, "layout": "vertical", "gap": 8, "stroke": {"align": "inside", "thickness": 1, "fill": "#7209B7"}, "effect": { "type": "drop-shadow", "color": "rgba(114,9,183,0.2)", "offset": {"x": 0, "y": 8}, "blur": 24 }, "children": [ {"type": "text", "id": "crd_hov_title", "content": "Card Title", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": 600, "fill": "#f4f4f5", "width": 232, "height": 28, "children": []}, {"type": "text", "id": "crd_hov_body", "content": "Card description text goes here. It can span multiple lines.", "fontFamily": "Roboto", "fontSize": 13, "fill": "#9ca3af", "width": 232, "height": 52, "children": []} ] } ] }, { "type": "frame", "id": "card_labels_row", "name": "CardLabelsRow", "layout": "horizontal", "gap": 24, "children": [ {"type": "text", "id": "clbl_d", "content": "default", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 280, "height": 16, "textAlign": "center", "children": []}, {"type": "text", "id": "clbl_h", "content": "hover (clickable)", "fontFamily": "Roboto", "fontSize": 11, "fill": "#6b7280", "width": 280, "height": 16, "textAlign": "center", "children": []} ] } ] }, { "type": "frame", "id": "badge_section", "name": "BadgeStates", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "badge_label", "content": "BADGE VARIANTS", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": 600, "fill": "#7209B7", "letterSpacing": 1.5, "width": 160, "height": 20, "children": [] }, { "type": "frame", "id": "badge_row", "name": "BadgeRow", "layout": "horizontal", "gap": 12, "alignItems": "center", "children": [ { "type": "frame", "id": "badge_default", "name": "Badge_Default", "height": 24, "fill": "#7209B7", "cornerRadius": 12, "padding": [0, 12, 0, 12], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "bdg_d_txt", "content": "Default", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": 500, "fill": "#f4f4f5", "width": 52, "height": 18, "children": []}], "width": 76 }, { "type": "frame", "id": "badge_secondary", "name": "Badge_Secondary", "height": 24, "fill": "#1e2435", "cornerRadius": 12, "padding": [0, 12, 0, 12], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "bdg_s_txt", "content": "Secondary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": 500, "fill": "#9ca3af", "width": 66, "height": 18, "children": []}], "width": 90 }, { "type": "frame", "id": "badge_destructive", "name": "Badge_Destructive", "height": 24, "fill": "#7f1d1d", "cornerRadius": 12, "padding": [0, 12, 0, 12], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "bdg_dest_txt", "content": "Destructive", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": 500, "fill": "#fca5a5", "width": 78, "height": 18, "children": []}], "width": 102 }, { "type": "frame", "id": "badge_outline", "name": "Badge_Outline", "height": 24, "fill": "rgba(0,0,0,0)", "cornerRadius": 12, "padding": [0, 12, 0, 12], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "stroke": {"align": "inside", "thickness": 1, "fill": "#4b5563"}, "children": [{"type": "text", "id": "bdg_out_txt", "content": "Outline", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": 500, "fill": "#d1d5db", "width": 46, "height": 18, "children": []}], "width": 70 }, { "type": "frame", "id": "badge_success", "name": "Badge_Success", "height": 24, "fill": "#14532d", "cornerRadius": 12, "padding": [0, 12, 0, 12], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "bdg_succ_txt", "content": "Success", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": 500, "fill": "#86efac", "width": 52, "height": 18, "children": []}], "width": 76 }, { "type": "frame", "id": "badge_warning", "name": "Badge_Warning", "height": 24, "fill": "#713f12", "cornerRadius": 12, "padding": [0, 12, 0, 12], "layout": "horizontal", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "bdg_warn_txt", "content": "Warning", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": 500, "fill": "#fcd34d", "width": 52, "height": 18, "children": []}], "width": 76 } ] } ] }, { "type": "frame", "id": "alert_section", "name": "AlertStates", "layout": "vertical", "gap": 16, "children": [ { "type": "text", "id": "alert_label", "content": "ALERT VARIANTS", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": 600, "fill": "#7209B7", "letterSpacing": 1.5, "width": 160, "height": 20, "children": [] }, { "type": "frame", "id": "alert_col", "name": "AlertColumn", "layout": "vertical", "gap": 12, "children": [ { "type": "frame", "id": "alert_info", "name": "Alert_Info", "width": 600, "height": 56, "fill": "#0c1a2e", "cornerRadius": 8, "padding": [0, 16, 0, 16], "layout": "horizontal", "alignItems": "center", "gap": 12, "stroke": {"align": "inside", "thickness": 1, "fill": "#1e40af"}, "children": [ {"type": "rectangle", "id": "alert_info_icon", "width": 20, "height": 20, "fill": "#3b82f6", "cornerRadius": 10, "children": []}, { "type": "frame", "id": "alert_info_content", "layout": "vertical", "gap": 2, "children": [ {"type": "text", "id": "alert_info_title", "content": "Info", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 600, "fill": "#93c5fd", "width": 400, "height": 20, "children": []}, {"type": "text", "id": "alert_info_msg", "content": "This is an informational message.", "fontFamily": "Roboto", "fontSize": 13, "fill": "#bfdbfe", "width": 400, "height": 18, "children": []} ] } ] }, { "type": "frame", "id": "alert_warning", "name": "Alert_Warning", "width": 600, "height": 56, "fill": "#1c1200", "cornerRadius": 8, "padding": [0, 16, 0, 16], "layout": "horizontal", "alignItems": "center", "gap": 12, "stroke": {"align": "inside", "thickness": 1, "fill": "#d97706"}, "children": [ {"type": "rectangle", "id": "alert_warn_icon", "width": 20, "height": 20, "fill": "#f59e0b", "cornerRadius": 4, "children": []}, { "type": "frame", "id": "alert_warn_content", "layout": "vertical", "gap": 2, "children": [ {"type": "text", "id": "alert_warn_title", "content": "Warning", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 600, "fill": "#fcd34d", "width": 400, "height": 20, "children": []}, {"type": "text", "id": "alert_warn_msg", "content": "Please review before proceeding.", "fontFamily": "Roboto", "fontSize": 13, "fill": "#fde68a", "width": 400, "height": 18, "children": []} ] } ] }, { "type": "frame", "id": "alert_error", "name": "Alert_Error", "width": 600, "height": 56, "fill": "#1f0a0a", "cornerRadius": 8, "padding": [0, 16, 0, 16], "layout": "horizontal", "alignItems": "center", "gap": 12, "stroke": {"align": "inside", "thickness": 1, "fill": "#dc2626"}, "children": [ {"type": "rectangle", "id": "alert_err_icon", "width": 20, "height": 20, "fill": "#ef4444", "cornerRadius": 10, "children": []}, { "type": "frame", "id": "alert_err_content", "layout": "vertical", "gap": 2, "children": [ {"type": "text", "id": "alert_err_title", "content": "Error", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 600, "fill": "#fca5a5", "width": 400, "height": 20, "children": []}, {"type": "text", "id": "alert_err_msg", "content": "Something went wrong. Please try again.", "fontFamily": "Roboto", "fontSize": 13, "fill": "#fecaca", "width": 400, "height": 18, "children": []} ] } ] }, { "type": "frame", "id": "alert_success", "name": "Alert_Success", "width": 600, "height": 56, "fill": "#052e16", "cornerRadius": 8, "padding": [0, 16, 0, 16], "layout": "horizontal", "alignItems": "center", "gap": 12, "stroke": {"align": "inside", "thickness": 1, "fill": "#16a34a"}, "children": [ {"type": "rectangle", "id": "alert_succ_icon", "width": 20, "height": 20, "fill": "#22c55e", "cornerRadius": 10, "children": []}, { "type": "frame", "id": "alert_succ_content", "layout": "vertical", "gap": 2, "children": [ {"type": "text", "id": "alert_succ_title", "content": "Success", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": 600, "fill": "#86efac", "width": 400, "height": 20, "children": []}, {"type": "text", "id": "alert_succ_msg", "content": "Operation completed successfully.", "fontFamily": "Roboto", "fontSize": 13, "fill": "#bbf7d0", "width": 400, "height": 18, "children": []} ] } ] } ] } ] } ] } ] }