{ "version": "2.8", "children": [ { "type": "frame", "id": "rgGjc", "x": 0, "y": 0, "name": "nitro: design system components", "theme": { "Mode": "Light" }, "clip": true, "width": 3200, "height": 4200, "fill": "$--background", "layout": "none", "children": [ { "type": "frame", "id": "k1Tgo", "x": 1000, "y": 2400, "name": "Sidebar", "context": "Vertical sidebar navigation with app logo, grouped menu items with icons, and user account section at bottom for application navigation.", "reusable": true, "width": 280, "height": "fill_container(640)", "fill": "$--sidebar", "cornerRadius": "$--radius-none", "stroke": { "align": "outside", "thickness": { "right": 1 }, "fill": "$--sidebar-border" }, "layout": "vertical", "children": [ { "type": "frame", "id": "VYllj", "name": "Sidebar Header", "width": "fill_container", "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "gap": 8, "padding": 24, "children": [ { "type": "frame", "id": "l7RL5", "name": "logo", "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "8JXzO", "name": "mark", "width": 24, "height": 24, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "rectangle", "id": "FMQdm", "x": 0, "y": 0, "name": "base", "fill": "#0f5ffeff", "width": 24, "height": 24, "stroke": { "align": "inside", "thickness": 1 } }, { "type": "path", "id": "3yEjL", "x": 0, "y": 0, "name": "base", "geometry": "M12 0l12 12-12 12-12-12 12-12z", "fill": "#e5eeffff", "width": 24, "height": 24, "stroke": { "align": "inside", "thickness": 1 } }, { "type": "rectangle", "id": "pMvB1", "x": 6, "y": 6, "name": "Rectangle 1", "fill": "#002266ff", "width": 12, "height": 12, "stroke": { "align": "inside", "thickness": 1 } } ] }, { "type": "text", "id": "lSLqU", "name": "Nitro", "fill": "$--sidebar-primary-foreground", "content": "Nitro", "lineHeight": 1, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "500" } ] } ] }, { "type": "frame", "id": "2c8Tk", "name": "Sidebar Content", "slot": [ "4jfFd", "cpj5L", "hZwCK" ], "width": "fill_container", "height": "fill_container", "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical" }, { "type": "frame", "id": "r93lc", "name": "Sidebar Footer", "width": "fill_container", "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "padding": 24, "children": [ { "type": "frame", "id": "PEigC", "name": "Text", "width": "fill_container", "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "iv8Ku", "name": "Name", "fill": "$--sidebar-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Joe Doe", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "500" }, { "type": "text", "id": "dIC1K", "name": "Email", "fill": "$--sidebar-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "joe@acmecorp.com", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "normal" } ] }, { "type": "icon_font", "id": "iTy4X", "width": 24, "height": 24, "iconFontName": "ellipsis-vertical", "iconFontFamily": "lucide", "fill": "$--sidebar-foreground" } ] } ] }, { "type": "frame", "id": "ZaNGp", "x": 200, "y": 3153, "name": "Progress", "context": "Horizontal progress bar with blue filled portion on gray background for visualizing task or loading completion percentage.", "reusable": true, "clip": true, "width": 360, "height": 16, "fill": "$--accent", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "layout": "none", "children": [ { "type": "rectangle", "id": "Lvl5A", "x": 0, "y": 0, "name": "Progress", "fill": "$--primary", "width": 180, "height": 16, "stroke": { "align": "inside", "thickness": 1 } } ] }, { "type": "frame", "id": "1YXlW", "x": 2200, "y": 1424, "name": "Radio Description/Selected", "context": "An unselected radio button with label and supporting description text stacked vertically.", "reusable": true, "width": 400, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "children": [ { "id": "nHN2V", "type": "ref", "ref": "WNAgm", "x": 0, "y": 0 }, { "type": "frame", "id": "vhRBd", "name": "Text and supporting text", "width": "fill_container", "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "oQ1Oc", "name": "Label Text", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Pathfinder Neo", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "normal" }, { "type": "text", "id": "IHHiJ", "name": "Supporting text", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Compact rover optimized for short-range missions.", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "DIw3s", "x": 2200, "y": 3943, "name": "Tooltip", "context": "Small tooltip popup with text label displaying contextual help or description when hovering over UI elements.", "reusable": true, "clip": true, "fill": "$--popover", "cornerRadius": "$--radius-xs", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "effect": { "type": "shadow", "shadowType": "outer", "color": "#0000000f", "offset": { "x": 0, "y": 2 }, "blur": 3.5, "spread": -1 }, "gap": 8, "padding": [ 6, 12 ], "alignItems": "center", "children": [ { "type": "text", "id": "n9TMF", "name": "Tooltip Text", "fill": "$--foreground", "content": "Tooltip", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "iSf6e", "x": 2200, "y": 1796, "name": "Switch/Checked", "context": "Checked toggle switch with blue background and white circle on right, with label text for binary settings controls.", "reusable": true, "stroke": { "align": "inside", "thickness": 1 }, "gap": 12, "alignItems": "center", "children": [ { "type": "frame", "id": "5BqEF", "name": "switch", "clip": true, "width": 32, "height": 20, "fill": "$--primary", "cornerRadius": "$--radius-pill", "stroke": { "align": "inside", "thickness": 1 }, "padding": [ 0, 4 ], "justifyContent": "end", "alignItems": "center", "children": [ { "type": "frame", "id": "dLoqn", "name": "dot", "clip": true, "width": 12, "height": 12, "fill": "$--primary-foreground", "cornerRadius": "$--radius-pill", "stroke": { "align": "inside", "thickness": 1 }, "layout": "none" } ] }, { "type": "text", "id": "pioH2", "name": "Switch Label", "fill": "$--foreground", "content": "Power-saving mode", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "normal" } ] }, { "type": "frame", "id": "mFYne", "x": 2200, "y": 3591, "name": "Textarea Group/Default", "context": "A textarea group with label above an 80px tall input area.", "reusable": true, "width": 340, "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "gap": 6, "children": [ { "type": "frame", "id": "Z1MiM", "name": "Label Text", "width": "fill_container", "fill": { "type": "color", "color": "$--white", "enabled": false }, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "Bh1if", "name": "Label Text", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Label Text", "lineHeight": 1.4285714285714286, "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "fdaH0", "name": "Textarea", "width": "fill_container", "height": 80, "fill": "$--card", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "gap": 8, "padding": [ 12, 16 ], "children": [ { "type": "text", "id": "RsVzA", "name": "Input Value", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Placeholder", "lineHeight": 1.4285714285714286, "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "duDYz", "x": 2200, "y": 3319, "name": "Input OTP Group/Default", "context": "An input group for one-time password entry, featuring segmented input boxes for individual digit entry.", "reusable": true, "width": 274, "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "gap": 6, "children": [ { "type": "frame", "id": "DxhGi", "name": "Label Text", "width": "fill_container", "fill": { "type": "color", "color": "$--white", "enabled": false }, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "UPxWE", "name": "Label Text", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Label Text", "lineHeight": 1.4285714285714286, "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "RwxPv", "name": "Input OTP Container", "width": "fill_container", "stroke": { "align": "inside", "thickness": 1 }, "gap": -1, "justifyContent": "center", "children": [ { "type": "frame", "id": "FIZAO", "name": "Input OTP", "clip": true, "width": "fill_container", "height": 40, "fill": "$--card", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "pxiyT", "name": "0", "enabled": false, "fill": "$--foreground", "content": "0", "lineHeight": 1.4285714285714286, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "yksK3", "name": "Input OTP", "clip": true, "width": "fill_container", "height": 40, "fill": "$--card", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "6oQRn", "name": "0", "enabled": false, "fill": "$--foreground", "content": "0", "lineHeight": 1.4285714285714286, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "T0LsE", "name": "Input OTP", "clip": true, "width": "fill_container", "height": 40, "fill": "$--card", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "BMNue", "name": "0", "enabled": false, "fill": "$--foreground", "content": "0", "lineHeight": 1.4285714285714286, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Z30aA", "name": "Input OTP Divider", "clip": true, "width": 40, "height": 40, "stroke": { "align": "inside", "thickness": { "top": 1, "bottom": 1, "left": 1 } }, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "secdk", "name": "•", "fill": "$--foreground", "content": "•", "lineHeight": 1.4285714285714286, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "qhgy8", "name": "Input OTP", "clip": true, "width": "fill_container", "height": 40, "fill": "$--card", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "eE1sT", "name": "0", "enabled": false, "fill": "$--foreground", "content": "0", "lineHeight": 1.4285714285714286, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "cSy0i", "name": "Input OTP", "clip": true, "width": "fill_container", "height": 40, "fill": "$--card", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "yuff0", "name": "0", "enabled": false, "fill": "$--foreground", "content": "0", "lineHeight": 1.4285714285714286, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "3dMrT", "name": "Input OTP", "clip": true, "width": "fill_container", "height": 40, "fill": "$--card", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "oYmKU", "name": "0", "enabled": false, "fill": "$--foreground", "content": "0", "lineHeight": 1.4285714285714286, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "O03YO", "x": 2200, "y": 2908, "name": "Select Group/Default", "context": "Select group combining label text with a select dropdown trigger showing placeholder and chevron.", "reusable": true, "width": 274, "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "gap": 6, "children": [ { "type": "frame", "id": "H6Dmi", "name": "Label Text", "width": "fill_container", "fill": { "type": "color", "color": "$--white", "enabled": false }, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "EJCCp", "name": "Label Text", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Label Text", "lineHeight": 1.4285714285714286, "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "AETRu", "name": "Select Trigger", "width": "fill_container", "height": 40, "fill": "$--card", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "gap": 10, "padding": [ 8, 16 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "7Thbt", "name": "Select option", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Select option", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" }, { "type": "icon_font", "id": "QUTg2", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "5wVfn", "x": 2200, "y": 2476, "name": "Input Group/Default", "context": "A complete input field group with label text above the input.", "reusable": true, "width": 274, "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "gap": 6, "children": [ { "type": "frame", "id": "u8QE6", "name": "Label Text", "width": "fill_container", "fill": { "type": "color", "color": "$--white", "enabled": false }, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "652t2", "name": "Label Text", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Label Text", "lineHeight": 1.4285714285714286, "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "TJYFY", "name": "Input", "width": "fill_container", "height": 40, "fill": "$--card", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "gap": 8, "padding": [ 8, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "QEFFJ", "name": "Input Value", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Placeholder", "lineHeight": 1.4285714285714286, "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "rKZOv", "x": 1000, "y": 200, "name": "Dropdown", "reusable": true, "slot": [], "width": 240, "height": 80, "fill": "$--popover", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "effect": { "type": "shadow", "shadowType": "outer", "color": "#0000000f", "offset": { "x": 0, "y": 2 }, "blur": 3.5, "spread": -1 }, "layout": "vertical", "padding": 4, "alignItems": "center" }, { "type": "frame", "id": "aSENS", "x": 200, "y": 200, "name": "Accordion/Open", "context": "An expanded accordion item displaying both the question title with chevron icon and the revealed content text underneath.", "reusable": true, "width": 480, "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "vertical", "children": [ { "type": "frame", "id": "tHS4D", "name": "Accordion Trigger", "width": "fill_container", "stroke": { "align": "inside", "thickness": 1 }, "gap": 18, "padding": [ 16, 0 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "2BrwF", "name": "Accordion Trigger", "fill": "$--foreground", "content": "What is a micro-interaction?", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "500" }, { "type": "frame", "id": "A8QF0", "name": "Icon", "width": 16, "height": 16, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "dGmWu", "x": 0, "y": 0, "width": 16, "height": 16, "iconFontName": "chevron-up", "iconFontFamily": "lucide", "fill": "$--foreground" } ] } ] }, { "type": "frame", "id": "jzTtf", "name": "Accordion Content", "clip": true, "width": "fill_container", "layout": "vertical", "padding": [ 0, 0, 16, 0 ], "children": [ { "type": "text", "id": "NlDxQ", "name": "Accordion Content", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Micro-interactions are events which have one main task — a single purpose — and they are found all over your device and within apps.", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "vnlpI", "x": 200, "y": 498, "name": "Alert/Info", "context": "Informational alert with blue background, info icon, title and description text for displaying system status updates.", "reusable": true, "width": "fill_container(640)", "fill": "$--color-info", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": { "left": 2 }, "fill": "$--color-info-foreground" }, "gap": 16, "padding": 16, "children": [ { "type": "frame", "id": "H0OXD", "name": "Icon", "clip": true, "width": 24, "height": 24, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "LdX1y", "x": 0, "y": 0, "width": 24, "height": 24, "iconFontName": "info", "iconFontFamily": "lucide", "fill": "$--color-info-foreground" } ] }, { "type": "frame", "id": "pyRnv", "name": "contents", "width": "fill_container", "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "gap": 4, "children": [ { "type": "text", "id": "31Ytp", "name": "Alert Title", "fill": "$--color-info-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Rover status update", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "500" }, { "type": "text", "id": "lr3SU", "name": "Alert Description", "fill": "$--color-info-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Spirit-9 completed its nightly diagnostics. All systems are running within optimal parameters.", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Flr2U", "x": 200, "y": 1572, "name": "Label/Success", "context": "Success label badge with green background displaying category or status text like 'Explorer' for indicating positive states.", "reusable": true, "fill": "$--color-success", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1 }, "gap": 10, "padding": [ 8, 12 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "nrDvY", "name": "Text", "fill": "$--color-success-foreground", "content": "Explorer", "lineHeight": 1.1428571428571428, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "1OPV7", "x": 200, "y": 1432, "name": "Avatar/Text", "context": "Circular avatar with text initials 'PJ' on dark gray background for representing user identity without profile image.", "reusable": true, "width": 40, "height": 40, "fill": "$--secondary", "cornerRadius": "$--radius-pill", "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "FkQCg", "name": "Avatar Title", "fill": "$--secondary-foreground", "content": "PJ", "lineHeight": 1.4285714285714286, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-secondary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "FBAaz", "x": 456, "y": 1920, "name": "Breadcrumb Item/Ellipsis", "context": "Breadcrumb ellipsis item with three dots icon for collapsing multiple intermediate navigation levels in long breadcrumb trails.", "reusable": true, "width": 20, "height": 20, "fill": { "type": "color", "color": "$--white", "enabled": false }, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "bsrXo", "name": "Icon", "width": 16, "height": 16, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "GG1ut", "x": 0, "y": 0, "width": 16, "height": 16, "iconFontName": "ellipsis", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] } ] }, { "type": "frame", "id": "HOJRj", "x": 200, "y": 1920, "name": "Breadcrumb Item/Current", "context": "Current page breadcrumb item with darker foreground text indicating the active page in the navigation hierarchy.", "reusable": true, "fill": { "type": "color", "color": "$--white", "enabled": false }, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "OUzQk", "name": "Breadcrumb Item", "fill": "$--foreground", "content": "Breadcrumb Item", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ycIFH", "x": 436, "y": 2344, "name": "Button/Ghost", "context": "Standard ghost button with subtle gray background, dark text and icon, for minimal visual weight actions.", "reusable": true, "fill": "$--accent", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1 }, "gap": 6, "padding": [ 10, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "aWqVc", "name": "Leading Icon", "width": 20, "height": 20, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "mIsYg", "x": 2, "y": 2, "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--foreground" } ] }, { "type": "text", "id": "OvCBb", "name": "Button", "fill": "$--foreground", "content": "Button", "lineHeight": 1.4285714285714286, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "D3JR9", "x": 200, "y": 2344, "name": "Button/Large/Ghost", "context": "Large ghost button with subtle gray background, dark text and icon, for low-emphasis actions without competing visually.", "reusable": true, "fill": "$--accent", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1 }, "gap": 6, "padding": [ 16, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "4lr0o", "name": "plus", "width": 24, "height": 24, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "KZQVX", "x": 2, "y": 2, "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--foreground" } ] }, { "type": "text", "id": "WQmQt", "name": "Button", "fill": "$--foreground", "content": "Button", "lineHeight": 1.5556, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "bf6GF", "x": 436, "y": 2040, "name": "Button/Default", "context": "Standard primary button with blue background, white text and icon, for important action triggers.", "reusable": true, "fill": "$--primary", "cornerRadius": "$--radius-none", "gap": 6, "padding": [ 10, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "RBuHZ", "name": "Leading Icon", "width": 20, "height": 20, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "mXH06", "x": 2, "y": 2, "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--primary-foreground" } ] }, { "type": "text", "id": "MBpWS", "name": "Button", "fill": "$--primary-foreground", "content": "Button", "lineHeight": 1.4286, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "Simex", "x": 436, "y": 2116, "name": "Button/Secondary", "context": "Standard secondary button with dark gray background, white text and icon, for secondary actions alongside primary buttons.", "reusable": true, "fill": "$--secondary", "cornerRadius": "$--radius-none", "gap": 6, "padding": [ 10, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "lgnDy", "name": "Leading Icon", "width": 20, "height": 20, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "p1Ejp", "x": 2, "y": 2, "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--secondary-foreground" } ] }, { "type": "text", "id": "Ac6zv", "name": "Button", "fill": "$--secondary-foreground", "content": "Button", "lineHeight": 1.4286, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "nB1vw", "x": 436, "y": 2192, "name": "Button/Destructive", "context": "Standard destructive button with red background, white text and icon, for dangerous actions requiring user confirmation.", "reusable": true, "fill": "$--destructive", "cornerRadius": "$--radius-none", "gap": 6, "padding": [ 10, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "VJ2ti", "name": "Leading Icon", "width": 20, "height": 20, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "02N81", "x": 2, "y": 2, "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--destructive-foreground" } ] }, { "type": "text", "id": "0BBS6", "name": "Button", "fill": "$--destructive-foreground", "content": "Button", "lineHeight": 1.4286, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "zR7aJ", "x": 436, "y": 2268, "name": "Button/Outline", "context": "Standard outline button with border, transparent background and dark text with icon, for tertiary actions.", "reusable": true, "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "gap": 6, "padding": [ 10, 16 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "uuR0c", "name": "Leading Icon", "width": 20, "height": 20, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "1zGAv", "x": 2, "y": 2, "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--foreground" } ] }, { "type": "text", "id": "PRqbh", "name": "Button", "fill": "$--foreground", "content": "Button", "lineHeight": 1.4286, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "VaL3A", "x": 200, "y": 2268, "name": "Button/Large/Outline", "context": "Large outline button with border, transparent background and text with icon, for less prominent actions in button groups.", "reusable": true, "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "gap": 6, "padding": [ 16, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "rXBND", "name": "plus", "width": 24, "height": 24, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "c2J6V", "x": 2, "y": 2, "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--foreground" } ] }, { "type": "text", "id": "56y4n", "name": "Button", "fill": "$--foreground", "content": "Button", "lineHeight": 1.5556, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "2g3Sk", "x": 200, "y": 2040, "name": "Button/Large/Default", "context": "Large primary button with blue background, white text and icon, for main call-to-action interactions.", "reusable": true, "fill": "$--primary", "cornerRadius": "$--radius-none", "gap": 6, "padding": [ 16, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "u67q0", "name": "Leading Icon", "width": 24, "height": 24, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "dcCXM", "x": 2, "y": 2, "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--primary-foreground" } ] }, { "type": "text", "id": "dW25q", "name": "Button", "fill": "$--primary-foreground", "content": "Button", "lineHeight": 1.5555555555555556, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "6GMz5", "x": 200, "y": 2116, "name": "Button/Large/Secondary", "context": "Large secondary button with dark gray background, white text and icon, for alternative or less prominent actions.", "reusable": true, "fill": "$--secondary", "cornerRadius": "$--radius-none", "gap": 6, "padding": [ 16, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "k1TPL", "name": "plus", "width": 24, "height": 24, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "uERiF", "x": 2, "y": 2, "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--secondary-foreground" } ] }, { "type": "text", "id": "tMyPi", "name": "Button", "fill": "$--secondary-foreground", "content": "Button", "lineHeight": 1.5555555555555556, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "LuPaZ", "x": 200, "y": 2192, "name": "Button/Large/Destructive", "context": "Large destructive button with red background, white text and icon, for critical or irreversible actions like delete.", "reusable": true, "fill": "$--destructive", "cornerRadius": "$--radius-none", "gap": 6, "padding": [ 16, 24 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "P94C6", "name": "plus", "width": 24, "height": 24, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "Il0u0", "x": 2, "y": 2, "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$--destructive-foreground" } ] }, { "type": "text", "id": "tEhpT", "name": "Button", "fill": "$--destructive-foreground", "content": "Button", "lineHeight": 1.5556, "textAlign": "center", "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "id": "XpAYs", "type": "ref", "reusable": true, "ref": "aSENS", "x": 200, "y": 352, "name": "Accordion/Closed", "context": "A collapsible accordion item in its closed state with a question title and a chevron-down icon, featuring a bottom border for visual separation.", "descendants": { "dGmWu": { "iconFontFamily": "lucide", "iconFontName": "chevron-down" }, "jzTtf": { "enabled": false } } }, { "id": "jWJ7T", "type": "ref", "reusable": true, "ref": "vnlpI", "x": 200, "y": 646, "name": "Alert/Success", "context": "Success alert with green background, checkmark icon, title and message for confirming completed actions or positive outcomes.", "stroke": { "align": "inside", "thickness": { "left": 2 }, "fill": "$--color-success-foreground" }, "fill": "$--color-success", "width": "fill_container(640)", "descendants": { "LdX1y": { "iconFontFamily": "lucide", "iconFontName": "circle-check", "fill": "$--color-success-foreground" }, "31Ytp": { "content": "Mission approved", "fill": "$--color-success-foreground" }, "lr3SU": { "content": "Your request to rent the Curiosity-X rover has been confirmed. Deployment scheduled for Sol 482.", "fill": "$--color-success-foreground" } } }, { "id": "7vQ96", "type": "ref", "reusable": true, "ref": "jWJ7T", "x": 200, "y": 794, "fill": "$--color-warning", "stroke": { "align": "inside", "thickness": { "left": 2 }, "fill": "$--color-warning-foreground" }, "flipX": false, "flipY": false, "width": "fill_container(640)", "height": "fit_content", "textGrowth": "auto", "context": "Warning alert with orange background, alert icon, title and cautionary message for displaying potential issues or concerns.", "name": "Alert/Warning", "descendants": { "LdX1y": { "fill": "$--color-warning-foreground", "iconFontFamily": "lucide", "iconFontName": "circle-alert" }, "31Ytp": { "content": "Terrain instability detected", "fill": "$--color-warning-foreground" }, "lr3SU": { "content": "The selected route crosses an area with loose regolith. Proceed with caution or reroute to a safer path.", "fill": "$--color-warning-foreground" } } }, { "id": "Ebad8", "type": "ref", "reusable": true, "ref": "7vQ96", "x": 200, "y": 942, "fill": "$--color-error", "stroke": { "align": "inside", "thickness": { "left": 2 }, "fill": "$--color-error-foreground" }, "name": "Alert/Error", "context": "Error alert with red/pink background, close icon, title and error message for displaying critical issues or failures.", "width": "fill_container(640)", "descendants": { "LdX1y": { "iconFontFamily": "lucide", "iconFontName": "circle-x", "fill": "$--color-error-foreground" }, "31Ytp": { "content": "Communication link lost", "fill": "$--color-error-foreground" }, "lr3SU": { "content": "Rover telemetry signal interrupted. Check your base antenna alignment or retry connection in 10 minutes.", "fill": "$--color-error-foreground" } } }, { "id": "SXwEW", "type": "ref", "reusable": true, "ref": "1OPV7", "x": 280, "y": 1432, "context": "Circular avatar placeholder with gray background for displaying user profile images.", "name": "Avatar/Image", "fill": { "type": "image", "enabled": true, "url": "", "mode": "fill" }, "descendants": { "FkQCg": { "enabled": false } } }, { "id": "SAgX1", "type": "ref", "reusable": true, "ref": "Flr2U", "x": 200, "y": 1644, "context": "Warning label badge with orange background displaying text like 'Transporter' for highlighting items needing attention.", "name": "Label/Warning", "fill": "$--color-warning", "descendants": { "nrDvY": { "content": "Transporter", "fill": "$--color-warning-foreground" } } }, { "id": "RzQ1P", "type": "ref", "reusable": true, "ref": "Flr2U", "x": 200, "y": 1788, "name": "Label/Secondary", "context": "Secondary label badge with gray background displaying text like 'Pioneer' for neutral categorization or status indication.", "fill": "$--secondary", "descendants": { "nrDvY": { "content": "Pioneer", "fill": "$--secondary-foreground" } } }, { "id": "Cq7qy", "type": "ref", "reusable": true, "ref": "Flr2U", "x": 200, "y": 1716, "name": "Label/Info", "context": "Info label badge with blue background displaying text like 'Hauler' for informational categorization or metadata.", "fill": "$--color-info", "descendants": { "nrDvY": { "content": "Hauler", "fill": "$--color-info-foreground" } } }, { "id": "dO92O", "type": "ref", "reusable": true, "ref": "HOJRj", "x": 328, "y": 1920, "name": "Breadcrumb Item/Default", "context": "Default breadcrumb item with muted gray text showing intermediate navigation level, clickable to return to that page.", "descendants": { "OUzQk": { "fill": "$--muted-foreground" } } }, { "id": "fOKM5", "type": "ref", "reusable": true, "ref": "FBAaz", "x": 496, "y": 1920, "context": "Breadcrumb separator with chevron-right icon for visually dividing navigation items in breadcrumb trails.", "name": "Breadcrumb Item/Separator", "descendants": { "GG1ut": { "iconFontFamily": "lucide", "iconFontName": "chevron-right" } } }, { "id": "M3eGn", "type": "ref", "reusable": true, "ref": "2g3Sk", "x": 340, "y": 2040, "padding": 16, "context": "Large primary icon button with blue background, for main call-to-action interactions.", "name": "Icon Button/Large/Default", "descendants": { "dW25q": { "enabled": false } } }, { "id": "QDfXC", "type": "ref", "reusable": true, "ref": "6GMz5", "x": 340, "y": 2116, "padding": 16, "context": "Large secondary icon button with dark gray background, for alternative or less prominent actions.", "name": "Icon Button/Large/Secondary", "descendants": { "tMyPi": { "enabled": false } } }, { "id": "ZHKhF", "type": "ref", "reusable": true, "ref": "LuPaZ", "x": 340, "y": 2192, "padding": 16, "context": "Large destructive icon button with red background, for critical or irreversible actions like delete.", "name": "Icon Button/Large/Destructive", "descendants": { "tEhpT": { "enabled": false } } }, { "id": "GonPz", "type": "ref", "reusable": true, "ref": "VaL3A", "x": 340, "y": 2268, "padding": 16, "context": "Large outline icon button with border and transparent background for less prominent actions in button groups.", "name": "Icon Button/Large/Outline", "descendants": { "56y4n": { "enabled": false } } }, { "id": "Y2Ed3", "type": "ref", "reusable": true, "ref": "D3JR9", "x": 340, "y": 2344, "padding": 16, "context": "Large ghost icon button with subtle gray background, for low-emphasis actions without competing visually.", "name": "Icon Button/Large/Ghost", "descendants": { "WQmQt": { "enabled": false } } }, { "id": "HHAiX", "type": "ref", "reusable": true, "ref": "ycIFH", "x": 556, "y": 2344, "padding": 10, "context": "Standard ghost icon button with subtle gray background, for minimal visual weight actions.", "name": "Icon Button/Ghost", "descendants": { "OvCBb": { "enabled": false } } }, { "id": "M1eE5", "type": "ref", "reusable": true, "ref": "nB1vw", "x": 556, "y": 2192, "padding": 10, "context": "Standard destructive icon button with red background, for dangerous actions requiring user confirmation.", "name": "Icon Button/Destructive", "descendants": { "0BBS6": { "enabled": false } } }, { "id": "37iqV", "type": "ref", "reusable": true, "ref": "zR7aJ", "x": 556, "y": 2268, "padding": 10, "context": "Standard outline button with border, transparent background, for tertiary actions.", "name": "Icon Button/Outline", "descendants": { "PRqbh": { "enabled": false } } }, { "id": "XBNx3", "type": "ref", "reusable": true, "ref": "Simex", "x": 556, "y": 2116, "padding": 10, "context": "Standard secondary icon button with dark gray background, for secondary actions alongside primary buttons.", "name": "Icon Button/Secondary", "descendants": { "Ac6zv": { "enabled": false } } }, { "id": "5bwDI", "type": "ref", "reusable": true, "ref": "bf6GF", "x": 556, "y": 2040, "padding": 10, "context": "Standard primary icon button with blue background, for important action triggers.", "name": "Icon Button/Default", "descendants": { "MBpWS": { "enabled": false } } }, { "type": "frame", "id": "tcMJ2", "x": 200, "y": 2500, "name": "Card", "context": "Card component with header, title, description, form content and footer buttons for displaying grouped information and actions.", "reusable": true, "width": 360, "fill": "$--card", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "effect": { "type": "shadow", "shadowType": "outer", "color": "#0000000d", "offset": { "x": 0, "y": 1 }, "blur": 1.75 }, "layout": "vertical", "children": [ { "type": "frame", "id": "Ad3wl", "name": "Card Header", "slot": [], "width": "fill_container", "height": 68, "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "gap": 8, "padding": 24, "justifyContent": "center" }, { "type": "frame", "id": "dgIRA", "name": "Card Content", "slot": [], "width": "fill_container", "height": 68, "stroke": { "align": "inside", "thickness": 2 }, "layout": "vertical", "gap": 8, "padding": 24, "justifyContent": "center" }, { "type": "frame", "id": "XQCHD", "name": "Card Actions", "slot": [], "width": "fill_container", "height": 68, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "padding": 24, "alignItems": "center" } ] }, { "id": "Kw3hB", "type": "ref", "reusable": true, "ref": "tcMJ2", "x": 200, "y": 1150, "width": 480, "context": "", "name": "Dialog", "descendants": { "Ad3wl": { "height": "fit_content", "children": [ { "type": "text", "id": "StkoQ", "name": "Dialog Title", "fill": "$--card-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Add a title here", "lineHeight": 1.5555555555555556, "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 18, "fontWeight": "500" }, { "type": "text", "id": "VUhw9", "name": "Dialog Description", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "And add a detailed description here.", "lineHeight": 1.4285714285714286, "textAlignVertical": "middle", "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" } ] }, "dgIRA": { "enabled": false }, "XQCHD": { "height": "fit_content", "children": [ { "id": "jglDt", "type": "ref", "ref": "bf6GF", "x": 24, "y": 24, "descendants": { "RBuHZ": { "enabled": false }, "MBpWS": { "content": "Continue" } } }, { "id": "5wzoN", "type": "ref", "ref": "zR7aJ", "x": 121, "y": 24, "descendants": { "uuR0c": { "enabled": false }, "PRqbh": { "content": "Cancel", "x": 16, "y": 10 } } } ] } } }, { "type": "frame", "id": "ahgnz", "x": 200, "y": 2827, "name": "Tab Item/Active", "reusable": true, "fill": "$--secondary", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1 }, "effect": { "type": "shadow", "shadowType": "outer", "color": "#0000000f", "offset": { "x": 0, "y": 1 }, "blur": 3.5, "spread": -1 }, "gap": 8, "padding": [ 6, 12 ], "children": [ { "type": "text", "id": "z2WJL", "name": "Label Selected", "fill": "$--secondary-foreground", "content": "Tab", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" } ] }, { "id": "wf5LJ", "type": "ref", "reusable": true, "ref": "ahgnz", "x": 200, "y": 2879, "fill": "$--white", "effect": [], "name": "Tab Item/Inactive", "descendants": { "z2WJL": { "fill": "$--accent-foreground" } } }, { "type": "frame", "id": "zX0Hk", "x": 200, "y": 2933, "name": "Tabs", "context": "A horizontal tab navigation component, allowing users to switch between content views.", "reusable": true, "slot": [ "ahgnz", "wf5LJ" ], "clip": true, "width": 80, "height": 40, "fill": "$--card", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "gap": 8, "padding": 4, "alignItems": "center" }, { "id": "o98ZG", "type": "ref", "ref": "zX0Hk", "x": 200, "y": 3013, "width": "fit_content", "children": [ { "id": "ll8qy", "type": "ref", "ref": "ahgnz", "x": 4, "y": 4, "descendants": { "z2WJL": { "content": "Integrations" } } }, { "id": "ayWVq", "type": "ref", "ref": "wf5LJ", "x": 111, "y": 4, "descendants": { "z2WJL": { "content": "Billing" } } }, { "id": "lBGNk", "type": "ref", "ref": "wf5LJ", "x": 181, "y": 4, "descendants": { "z2WJL": { "content": "Profile" } } }, { "id": "GdraB", "type": "ref", "ref": "wf5LJ", "x": 254, "y": 4, "descendants": { "z2WJL": { "content": "Advanced" } } } ] }, { "type": "frame", "id": "rVqRa", "x": 1622, "y": 3755, "name": "Pagination Item/Active", "reusable": true, "width": 40, "height": 40, "fill": "$--background", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "1pyAE", "name": "1", "fill": "$--foreground", "content": "1", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-secondary", "fontSize": 14, "fontWeight": "normal" } ] }, { "id": "XsUIt", "type": "ref", "reusable": true, "ref": "rVqRa", "x": 1682, "y": 3755, "stroke": { "align": "inside", "thickness": 1 }, "fill": [], "name": "Pagination Item/Default" }, { "id": "iHPe4", "type": "ref", "reusable": true, "ref": "rVqRa", "x": 1742, "y": 3755, "stroke": { "align": "inside", "thickness": 1 }, "fill": [], "name": "Pagination Item/Ellipsis", "children": [ { "type": "icon_font", "id": "HXjFL", "width": 16, "height": 16, "iconFontName": "ellipsis", "iconFontFamily": "lucide", "fill": "$--muted-foreground" } ] }, { "type": "frame", "id": "OprrH", "x": 1622, "y": 3835, "name": "Pagination", "reusable": true, "gap": 4, "children": [ { "id": "yEtx4", "type": "ref", "ref": "ycIFH", "x": 0, "y": 0, "descendants": { "aWqVc": { "enabled": false }, "OvCBb": { "content": "Previous" } } }, { "type": "frame", "id": "4t8AC", "name": "Page Numbers Slot", "slot": [ "rVqRa", "XsUIt", "iHPe4" ], "clip": true, "width": 40, "height": 40, "gap": 4 }, { "id": "QtvqN", "type": "ref", "ref": "ycIFH", "x": 135, "y": 0, "descendants": { "aWqVc": { "enabled": false }, "OvCBb": { "content": "Next" } } } ] }, { "id": "92ihz", "type": "ref", "reusable": true, "ref": "tcMJ2", "x": 1000, "y": 3161, "width": 400, "context": "", "name": "Card Action", "descendants": { "Ad3wl": { "height": "fit_content", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "YACIK", "name": "title", "fill": "$--card-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Solar Efficiency Pack", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "500" } ] }, "dgIRA": { "height": "fit_content", "children": [ { "type": "text", "id": "vbkGA", "name": "title", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Boosts rover endurance by optimizing solar panel alignment.", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "normal" } ] }, "XQCHD": { "height": "fit_content", "children": [ { "id": "yGOg0", "type": "ref", "ref": "Simex", "x": 24, "y": 24, "descendants": { "Ac6zv": { "content": "Request" } } } ] } } }, { "id": "Sprth", "type": "ref", "reusable": true, "ref": "tcMJ2", "x": 1419, "y": 3161, "width": 400, "context": "", "name": "Card Plain", "descendants": { "Ad3wl": { "height": "fit_content", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "children": [ { "type": "text", "id": "nSAAw", "name": "title", "fill": "$--card-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Active Rovers", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "500" } ] }, "dgIRA": { "height": "fit_content", "children": [ { "type": "text", "id": "IWeZM", "name": "title", "fill": "$--card-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "1,280", "lineHeight": 1.5, "fontFamily": "$--font-secondary", "fontSize": 32, "fontWeight": "normal" }, { "id": "MBvZ6", "type": "ref", "ref": "SAgX1", "x": 24, "y": 80, "descendants": { "nrDvY": { "content": "-12%" } } } ] }, "XQCHD": { "enabled": false, "children": [] } } }, { "id": "mQSLP", "type": "ref", "reusable": true, "ref": "tcMJ2", "x": 1000, "y": 3511, "width": 400, "context": "", "name": "Card Image", "descendants": { "Ad3wl": { "height": "fit_content", "padding": 0, "children": [ { "type": "frame", "id": "lc3Vg", "name": "image-placeholder", "width": "fill_container", "height": 160, "fill": "$--background", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "layout": "none" } ] }, "dgIRA": { "height": "fit_content", "children": [ { "type": "text", "id": "PM6Ww", "name": "title", "fill": "$--card-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Aurora Scout", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 24, "fontWeight": "normal" }, { "type": "text", "id": "tI9og", "name": "title", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "SKU: LS-2029", "lineHeight": 1.5, "fontFamily": "$--font-secondary", "fontSize": 16, "fontWeight": "normal" } ] }, "XQCHD": { "height": "fit_content", "justifyContent": "space_between", "alignItems": "start", "children": [ { "id": "oetQ0", "type": "ref", "ref": "Simex", "x": 24, "y": 24, "descendants": { "Ac6zv": { "content": "Book now" } } }, { "id": "8Er0C", "type": "ref", "ref": "SAgX1", "x": 308, "y": 24, "descendants": { "nrDvY": { "content": "$45.00" } } } ] } } }, { "type": "frame", "id": "hZwCK", "x": 1320, "y": 2413, "name": "Sidebar Section Title", "reusable": true, "width": 280, "stroke": { "align": "inside", "thickness": 1 }, "padding": [ 8, 24 ], "alignItems": "center", "children": [ { "type": "text", "id": "ypbD4", "name": "Operations", "fill": "$--sidebar-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Title", "lineHeight": 1.1428571428571428, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "4jfFd", "x": 1320, "y": 2490, "name": "Sidebar Item/Active", "reusable": true, "width": 280, "fill": "$--sidebar-accent", "stroke": { "align": "inside", "thickness": { "left": 2 }, "fill": "$--sidebar-primary" }, "gap": 12, "padding": [ 12, 24 ], "alignItems": "center", "children": [ { "type": "frame", "id": "j8Do9", "name": "Leading Icon", "clip": true, "width": 24, "height": 24, "fill": { "type": "color", "color": "#ffffffff", "enabled": false }, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "JTWa5", "x": 0, "y": 0, "width": 24, "height": 24, "iconFontName": "grip", "iconFontFamily": "lucide", "fill": "$--sidebar-accent-foreground" } ] }, { "type": "text", "id": "wawnU", "name": "Item Title", "fill": "$--sidebar-accent-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Item", "lineHeight": 1.5, "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal" } ] }, { "id": "cpj5L", "type": "ref", "reusable": true, "ref": "4jfFd", "x": 1320, "y": 2578, "name": "Sidebar Item/Default", "stroke": { "align": "inside", "thickness": { "left": 2 } }, "fill": [], "descendants": { "JTWa5": { "fill": "$--sidebar-foreground" }, "wawnU": { "fill": "$--sidebar-foreground" } } }, { "type": "frame", "id": "N2veC", "x": 1000, "y": 1486, "name": "Data Table Header", "reusable": true, "width": "fill_container(1024)", "stroke": { "align": "inside", "thickness": 1 }, "gap": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ { "id": "gGXIM", "type": "ref", "ref": "pQZMf", "x": 0, "y": 0, "descendants": { "QEFFJ": { "content": "Search…" } } }, { "id": "oslC0", "type": "ref", "ref": "zR7aJ", "x": 924, "y": 0 } ] }, { "type": "frame", "id": "jMuOx", "x": 1000, "y": 2000, "name": "Data Table Footer", "reusable": true, "width": "fill_container(1024)", "stroke": { "align": "inside", "thickness": 1 }, "gap": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "ZUPbZ", "name": "0 of 5 row(s) selected.", "fill": "$--muted-foreground", "content": "Showing 10 records", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-secondary", "fontSize": 14, "fontWeight": "normal" }, { "id": "OZwkJ", "type": "ref", "ref": "OprrH", "x": 827, "y": 0 } ] }, { "type": "frame", "id": "YHeNj", "x": 1000, "y": 1356, "name": "Table Column Header", "reusable": true, "width": "fill_container(293)", "stroke": { "align": "inside", "thickness": { "bottom": 1 } }, "gap": 8, "padding": 12, "alignItems": "center", "children": [ { "type": "text", "id": "jE7QJ", "name": "Label", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Name", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "mOJ51", "x": 1000, "y": 1224, "name": "Table Cell", "reusable": true, "slot": [], "width": "fill_container(293)", "height": "fit_content(44)", "stroke": { "align": "inside", "thickness": { "right": 1 } }, "gap": 8, "padding": 12, "alignItems": "center" }, { "type": "frame", "id": "UvBer", "x": 1000, "y": 1160, "name": "Table Row", "reusable": true, "slot": [ "mOJ51", "YHeNj" ], "width": "fill_container(1024)", "height": "fit_content(44)", "stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }, "alignItems": "center" }, { "type": "frame", "id": "0IOYd", "x": 1000, "y": 836, "name": "Table", "reusable": true, "slot": [ "UvBer" ], "width": "fill_container(1024)", "height": 300, "fill": "$--background", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, "layout": "vertical", "alignItems": "center" }, { "type": "frame", "id": "nitroDataTable", "x": 1000, "y": 1559, "name": "Data Table", "reusable": true, "clip": true, "width": "fill_container(1024)", "layout": "vertical", "gap": 16, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "ndtHeader1", "name": "Data Table Header", "width": "fill_container", "stroke": { "align": "inside", "thickness": 1 }, "gap": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "ndtInput1", "name": "Input/Default", "width": 274, "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "gap": 6, "children": [ { "type": "frame", "id": "ndtLabel1", "name": "Label Text", "enabled": false, "width": "fill_container", "fill": { "type": "color", "color": "$--white", "enabled": false }, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "ndtLabelTxt1", "name": "Label Text", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Label Text", "lineHeight": 1.4285714285714286, "textAlignVertical": "middle", "fontFamily": "$--font-secondary", "fontSize": 14, "fontWeight": "500" } ] }, { "type": "frame", "id": "ndtInputField1", "name": "Input", "width": "fill_container", "height": 40, "fill": "$--background", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "gap": 8, "padding": [ 8, 16 ], "alignItems": "center", "children": [ { "type": "text", "id": "ndtInputVal1", "name": "Input Value", "fill": "$--muted-foreground", "content": "Search…", "lineHeight": 1.4285714285714286, "textAlignVertical": "middle", "fontFamily": "$--font-secondary", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "id": "ndtBtn1", "type": "ref", "ref": "zR7aJ", "x": 924, "y": 0 } ] }, { "type": "frame", "id": "ndtContent1", "name": "Data Table Content", "slot": [ "UvBer" ], "clip": true, "width": "fill_container", "height": "fit_content(260)", "layout": "vertical", "justifyContent": "center", "alignItems": "center" }, { "id": "ndtFooterRef1", "type": "ref", "ref": "jMuOx", "x": 0, "y": 332 } ] }, { "type": "frame", "id": "prR5j", "x": 1000, "y": 368, "name": "List Title", "reusable": true, "width": 240, "cornerRadius": 2, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "padding": [ 8, 6, 8, 32 ], "alignItems": "center", "children": [ { "type": "text", "id": "cSn1L", "name": "Label", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "List Title", "lineHeight": 1.3333333333333333, "fontFamily": "$--font-primary", "fontSize": 12, "fontWeight": "500" } ] }, { "type": "frame", "id": "w9NG6", "x": 1000, "y": 440, "name": "List Item/Checked", "reusable": true, "width": 240, "cornerRadius": 2, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "padding": [ 6, 8 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "abNjF", "name": "Item Content Left", "gap": 8, "alignItems": "center", "children": [ { "type": "frame", "id": "NtZFn", "name": "Leading Icon", "width": 16, "height": 16, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "icon_font", "id": "l4N9R", "x": 0, "y": 0, "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$--foreground" } ] }, { "type": "text", "id": "pcBXI", "name": "Label", "fill": "$--foreground", "content": "List Item", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ZSC5K", "name": "Item Content Right", "gap": 8, "children": [ { "type": "text", "id": "H23bT", "name": "⇧⌘A", "opacity": 0.6000000238418579, "fill": "$--foreground", "content": "⇧⌘A", "lineHeight": 1.3333333333333333, "textAlign": "right", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "frame", "id": "ecp79", "name": "Trailing Icon", "width": 16, "height": 16, "stroke": { "align": "inside", "thickness": 0.6666666865348816 }, "layout": "none", "children": [ { "type": "icon_font", "id": "fEhDh", "x": 0, "y": 0, "width": 16, "height": 16, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$--foreground" } ] } ] } ] }, { "type": "frame", "id": "Kj9Qt", "x": 1000, "y": 584, "name": "List Search Box/Filled", "reusable": true, "width": 240, "cornerRadius": 2, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "padding": [ 6, 8 ], "alignItems": "center", "children": [ { "type": "icon_font", "id": "bBk1e", "width": 16, "height": 16, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$--foreground" }, { "type": "text", "id": "FBD6R", "name": "Label", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Search Query", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" }, { "type": "icon_font", "id": "tP6xD", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$--foreground" } ] }, { "type": "frame", "id": "PNbOn", "x": 1000, "y": 320, "name": "List Divider", "reusable": true, "width": 240, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "padding": [ 4, 0 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "line", "id": "Sqzmj", "name": "Line", "width": "fill_container", "height": 0, "stroke": { "align": "center", "thickness": 1, "fill": "$--border" } } ] }, { "id": "uKgA7", "type": "ref", "reusable": true, "ref": "w9NG6", "x": 1000, "y": 512, "name": "List Item/Unchecked", "descendants": { "l4N9R": { "enabled": false } } }, { "id": "DQzsK", "type": "ref", "reusable": true, "ref": "Kj9Qt", "x": 1000, "y": 656, "name": "List Search Box/Default", "descendants": { "bBk1e": { "fill": "$--muted-foreground" }, "FBD6R": { "fill": "$--muted-foreground", "content": "Search…" }, "tP6xD": { "enabled": false } } }, { "id": "5ee9F", "type": "ref", "reusable": true, "ref": "tcMJ2", "x": 2200, "y": 200, "name": "Modal/Left", "context": "Modal dialog with left-aligned title, subtitle, content area and footer action buttons for focused user tasks.", "effect": { "type": "shadow", "shadowType": "outer", "color": "#0000000a", "offset": { "x": 0, "y": 10 }, "blur": 8.75 }, "descendants": { "Ad3wl": { "height": "fit_content", "children": [ { "type": "text", "id": "IO907", "name": "Card Title", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Modal Title", "lineHeight": 1.4, "fontFamily": "$--font-primary", "fontSize": 20, "fontWeight": "500" }, { "type": "text", "id": "nXJcT", "name": "Modal Subtitle", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Modal Subtitle", "lineHeight": 1.4285714285714286, "fontFamily": "$--font-primary", "fontSize": 14, "fontWeight": "normal" } ] }, "XQCHD": { "layout": "vertical", "height": "fit_content", "children": [ { "id": "L86fG", "type": "ref", "ref": "bf6GF", "x": 24, "y": 24, "width": "fill_container", "descendants": { "MBpWS": { "content": "Action" } } }, { "id": "jH8oM", "type": "ref", "ref": "Simex", "x": 24, "y": 72, "width": "fill_container", "descendants": { "Ac6zv": { "content": "Action" } } } ] } } }, { "id": "Ld8Zw", "type": "ref", "reusable": true, "ref": "5ee9F", "x": 2200, "y": 548, "context": "Modal dialog with center-aligned title, subtitle, content and footer buttons for balanced, focused user interactions.", "name": "Modal/Center", "descendants": { "IO907": { "textAlign": "center" }, "nXJcT": { "textAlign": "center" } } }, { "id": "g8g59", "type": "ref", "reusable": true, "ref": "5ee9F", "x": 2200, "y": 896, "name": "Modal/Icon", "context": "Modal dialog with left-aligned header containing icon, scrollable main content, and footer with centered action buttons.", "descendants": { "IO907": { "type": "frame", "id": "mx8W7", "name": "Icon Wrapper", "width": 48, "height": 48, "fill": "$--accent", "cornerRadius": "$--radius-xs", "stroke": { "align": "inside", "thickness": 1 }, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "icon_font", "id": "IuTTB", "width": 24, "height": 24, "iconFontName": "triangle-alert", "iconFontFamily": "lucide", "fill": "$--accent-foreground" } ] }, "nXJcT": { "enabled": false } } }, { "type": "frame", "id": "WNAgm", "x": 2200, "y": 1296, "name": "Radio/Selected", "reusable": true, "width": 16, "height": 24, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "frame", "id": "GBv9a", "x": 0, "y": 4, "name": "radio", "clip": true, "width": 16, "height": 16, "fill": "$--primary", "cornerRadius": 8, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "ellipse", "id": "NsL5F", "x": 6, "y": 6, "name": "dot", "fill": "$--primary-foreground", "width": 4, "height": 4, "stroke": { "align": "inside", "thickness": 1 } } ] } ] }, { "id": "X2c40", "type": "ref", "reusable": true, "ref": "WNAgm", "x": 2200, "y": 1360, "name": "Radio/Default", "descendants": { "GBv9a": { "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" }, "fill": "$--background" }, "NsL5F": { "enabled": false } } }, { "id": "gug5Q", "type": "ref", "reusable": true, "ref": "1YXlW", "x": 2200, "y": 1516, "name": "Radio Description/Unselected", "flipX": false, "flipY": false, "width": 400, "height": "fit_content", "textGrowth": "auto", "descendants": { "nHN2V": { "id": "GsNS6", "type": "ref", "ref": "X2c40", "x": 0, "y": 0 } } }, { "id": "ymB1F", "type": "ref", "reusable": true, "ref": "1YXlW", "x": 2200, "y": 1608, "width": "fit_content", "name": "Radio/Selected", "context": "A selected radio button with label.", "descendants": { "vhRBd": { "width": "fit_content" }, "oQ1Oc": { "width": 376, "height": 24, "textGrowth": "auto" }, "IHHiJ": { "enabled": false } } }, { "id": "CJWag", "type": "ref", "reusable": true, "ref": "gug5Q", "x": 2200, "y": 1672, "width": "fit_content", "context": "A unselected radio button with label.", "descendants": { "vhRBd": { "width": "fit_content" }, "oQ1Oc": { "width": 376, "height": 24, "textGrowth": "auto" }, "IHHiJ": { "enabled": false } } }, { "id": "nE3IN", "type": "ref", "reusable": true, "ref": "iSf6e", "x": 2200, "y": 1860, "name": "Switch/Unchecked", "context": "Unchecked toggle switch with blue background and white circle on left, with label text for binary settings controls.", "descendants": { "5BqEF": { "justifyContent": "start", "alignItems": "center", "fill": "$--input" } } }, { "type": "frame", "id": "fAUpL", "x": 2200.007211688673, "y": 2112, "name": "Checkbox Description/Checked", "context": "Checked checkbox with label and supporting description text.", "reusable": true, "rotation": -0.008608319284900577, "width": 400, "stroke": { "align": "inside", "thickness": 1 }, "gap": 8, "children": [ { "id": "m1D7l", "type": "ref", "ref": "cvozN", "x": 0, "y": 0 }, { "type": "frame", "id": "8qR0f", "name": "Text and supporting text", "width": "fill_container", "stroke": { "align": "inside", "thickness": 1 }, "layout": "vertical", "children": [ { "type": "text", "id": "VnYde", "name": "Label Text", "fill": "$--foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Enable autonomous navigation", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "normal" }, { "type": "text", "id": "7CUFw", "name": "Supporting text", "fill": "$--muted-foreground", "textGrowth": "fixed-width", "width": "fill_container", "content": "Let the rover find the safest route on its own.", "lineHeight": 1.5, "fontFamily": "$--font-primary", "fontSize": 16, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "cvozN", "x": 2200, "y": 1984, "name": "Checkbox/Checked", "reusable": true, "width": 16, "height": 24, "stroke": { "align": "inside", "thickness": 1 }, "layout": "none", "children": [ { "type": "frame", "id": "I3CGB", "x": 0, "y": 4, "name": "checkbox", "clip": true, "width": 16, "height": 16, "fill": "$--primary", "cornerRadius": "$--radius-none", "stroke": { "align": "inside", "thickness": 1, "fill": "$--primary" }, "layout": "none", "children": [ { "type": "icon_font", "id": "6qszF", "x": 2, "y": 2, "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$--primary-foreground" } ] } ] }, { "id": "RQOOy", "type": "ref", "reusable": true, "ref": "cvozN", "x": 2200, "y": 2048, "name": "Checkbox/Unchecked", "descendants": { "I3CGB": { "fill": "$--background", "stroke": { "align": "inside", "thickness": 1, "fill": "$--input" } }, "6qszF": { "enabled": false } } }, { "id": "Ku2gW", "type": "ref", "reusable": true, "ref": "fAUpL", "x": 2200.007211688673, "y": 2200, "name": "Checkbox Description/Unchecked", "context": "Unchecked checkbox with label and supporting description text.", "descendants": { "m1D7l": { "id": "qVI2Z", "type": "ref", "ref": "RQOOy", "x": 0, "y": 0 } } }, { "id": "gfOPx", "type": "ref", "reusable": true, "ref": "fAUpL", "x": 2200.007211688673, "y": 2288, "width": "fit_content", "name": "Checkbox/Checked", "context": "Checked checkbox with label.", "descendants": { "8qR0f": { "width": "fit_content" }, "VnYde": { "width": 376, "height": 24, "textGrowth": "auto" }, "7CUFw": { "enabled": false } } }, { "id": "P6OMg", "type": "ref", "reusable": true, "ref": "Ku2gW", "x": 2200.007211688673, "y": 2352, "width": "fit_content", "context": "Checked checkbox with label.", "name": "Checkbox/Unchecked", "descendants": { "8qR0f": { "width": "fit_content" }, "VnYde": { "width": 376, "height": 24, "textGrowth": "auto" }, "7CUFw": { "enabled": false } } }, { "id": "iUDk1", "type": "ref", "reusable": true, "ref": "5wVfn", "x": 2200, "y": 2582, "name": "Input Group/Filled", "context": "A filled variant of a complete input field group with label text above the input.", "descendants": { "QEFFJ": { "fill": "$--foreground", "content": "Input Value" } } }, { "id": "pQZMf", "type": "ref", "reusable": true, "ref": "5wVfn", "x": 2200, "y": 2688, "name": "Input/Default", "context": "An input field.", "descendants": { "u8QE6": { "enabled": false }, "TJYFY": { "x": 0, "y": 0 } } }, { "id": "dUXxc", "type": "ref", "reusable": true, "ref": "iUDk1", "x": 2200, "y": 2768, "name": "Input/Filled", "context": "A filled variant of an input field.", "descendants": { "u8QE6": { "enabled": false }, "TJYFY": { "x": 0, "y": 0 } } }, { "id": "ymaKv", "type": "ref", "reusable": true, "ref": "O03YO", "x": 2200, "y": 3014, "name": "Select Group/Filled", "context": "A filled variant of a select group combining label text with a select dropdown trigger showing placeholder and chevron.", "descendants": { "7Thbt": { "content": "Selected option", "fill": "$--foreground" } } }, { "id": "fdrVg", "type": "ref", "reusable": true, "ref": "O03YO", "x": 2200, "y": 3120, "context": "A select.", "name": "Select/Default", "descendants": { "H6Dmi": { "enabled": false } } }, { "id": "3XkKV", "type": "ref", "reusable": true, "ref": "ymaKv", "x": 2200, "y": 3200, "context": "A filled variant of a select.", "name": "Select/Filled", "descendants": { "H6Dmi": { "enabled": false }, "7Thbt": { "content": "Selected option" } } }, { "id": "NJoRZ", "type": "ref", "reusable": true, "ref": "duDYz", "x": 2200, "y": 3425, "name": "Input OTP Group/Filled", "context": "A filled input group for one-time password entry, featuring segmented input boxes for individual digit entry.", "descendants": { "pxiyT": { "enabled": true }, "6oQRn": { "enabled": true }, "BMNue": { "enabled": true }, "eE1sT": { "enabled": true }, "yuff0": { "enabled": true }, "oYmKU": { "enabled": true } } }, { "id": "nlc9W", "type": "ref", "reusable": true, "ref": "mFYne", "x": 2200, "y": 3737, "name": "Textarea Group/Filled", "context": "A textarea group with label above an 80px tall filled input area." } ] } ], "themes": { "Mode": [ "Light", "Dark" ] }, "variables": { "--sidebar": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#2E2F33", "theme": { "Mode": "Dark" } } ] }, "--sidebar-foreground": { "type": "color", "value": [ { "value": "#5B5F66" }, { "value": "#A0A6B2", "theme": { "Mode": "Dark" } } ] }, "--sidebar-primary": { "type": "color", "value": [ { "value": "#0F5FFE" }, { "value": "#0F5FFE", "theme": { "Mode": "Dark" } } ] }, "--sidebar-primary-foreground": { "type": "color", "value": [ { "value": "#002266" }, { "value": "#f5f5f5", "theme": { "Mode": "Dark" } } ] }, "--sidebar-border": { "type": "color", "value": [ { "value": "#E1E2E5" }, { "value": "#414347", "theme": { "Mode": "Dark" } } ] }, "--sidebar-accent": { "type": "color", "value": [ { "value": "#333333" }, { "value": "#1F1F1F", "theme": { "Mode": "Dark" } } ] }, "--sidebar-accent-foreground": { "type": "color", "value": [ { "value": "#F5F5F5" }, { "value": "#F5F5F5", "theme": { "Mode": "Dark" } } ] }, "--sidebar-ring": { "type": "color", "value": [ { "value": "#E1E2E5" }, { "value": "#414347", "theme": { "Mode": "Dark" } } ] }, "--background": { "type": "color", "value": [ { "value": "#F5F5F5" }, { "value": "#252629", "theme": { "Mode": "Dark" } } ] }, "--foreground": { "type": "color", "value": [ { "value": "#333333" }, { "value": "#F5F5F5", "theme": { "Mode": "Dark" } } ] }, "--card": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#1F1F1F", "theme": { "Mode": "Dark" } } ] }, "--card-foreground": { "type": "color", "value": [ { "value": "#111111" }, { "value": "#FFFFFF", "theme": { "Mode": "Dark" } } ] }, "--popover": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#1F1F1F", "theme": { "Mode": "Dark" } } ] }, "--popover-foreground": { "type": "color", "value": [ { "value": "#111111" }, { "value": "#FFFFFF", "theme": { "Mode": "Dark" } } ] }, "--primary": { "type": "color", "value": [ { "value": "#0F5FFE" }, { "value": "#0F5FFE", "theme": { "Mode": "Dark" } } ] }, "--primary-foreground": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#F5F5F5", "theme": { "Mode": "Dark" } } ] }, "--secondary": { "type": "color", "value": [ { "value": "#333333" }, { "value": "#414347", "theme": { "Mode": "Dark" } } ] }, "--secondary-foreground": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#FFFFFF", "theme": { "Mode": "Dark" } } ] }, "--muted": { "type": "color", "value": [ { "value": "#F2F3F0" }, { "value": "#2E2E2E", "theme": { "Mode": "Dark" } } ] }, "--muted-foreground": { "type": "color", "value": [ { "value": "#5B5F66" }, { "value": "#A0A6B2", "theme": { "Mode": "Dark" } } ] }, "--accent": { "type": "color", "value": [ { "value": "#F2F3F0" }, { "value": "#252629", "theme": { "Mode": "Dark" } } ] }, "--accent-foreground": { "type": "color", "value": [ { "value": "#111111" }, { "value": "#F2F3F0", "theme": { "Mode": "Dark" } } ] }, "--destructive": { "type": "color", "value": [ { "value": "#A62911" }, { "value": "#A62911", "theme": { "Mode": "Dark" } } ] }, "--border": { "type": "color", "value": [ { "value": "#E1E2E5" }, { "value": "#2E2E2E", "theme": { "Mode": "Dark" } } ] }, "--input": { "type": "color", "value": [ { "value": "#9DA4B3" }, { "value": "#414347", "theme": { "Mode": "Dark" } } ] }, "--ring": { "type": "color", "value": [ { "value": "#E1E2E5" }, { "value": "#666666", "theme": { "Mode": "Dark" } } ] }, "--white": { "type": "color", "value": "#FFFFFF" }, "--black": { "type": "color", "value": "#000000" }, "--font-primary": { "type": "string", "value": "Roboto" }, "--font-secondary": { "type": "string", "value": [ { "value": "Roboto Mono", "theme": { "Mode": "Light" } }, { "value": "Roboto Mono", "theme": { "Mode": "Dark" } } ] }, "--radius-none": { "type": "number", "value": 0 }, "--radius-pill": { "type": "number", "value": 999 }, "--color-success": { "type": "color", "value": [ { "value": "#DDF0C9" }, { "value": "#4A4E49", "theme": { "Mode": "Dark" } } ] }, "--color-success-foreground": { "type": "color", "value": [ { "value": "#1A3300" }, { "value": "#D1F0C9", "theme": { "Mode": "Dark" } } ] }, "--color-warning": { "type": "color", "value": [ { "value": "#F5E6D7" }, { "value": "#4F4E4C", "theme": { "Mode": "Dark" } } ] }, "--color-warning-foreground": { "type": "color", "value": [ { "value": "#663300" }, { "value": "#F5E1CE", "theme": { "Mode": "Dark" } } ] }, "--color-error": { "type": "color", "value": [ { "value": "#F5D7F3" }, { "value": "#57474A", "theme": { "Mode": "Dark" } } ] }, "--color-error-foreground": { "type": "color", "value": [ { "value": "#66005E" }, { "value": "#F5C4CC", "theme": { "Mode": "Dark" } } ] }, "--color-info": { "type": "color", "value": [ { "value": "#C9D6F0" }, { "value": "#3C4352", "theme": { "Mode": "Dark" } } ] }, "--color-info-foreground": { "type": "color", "value": [ { "value": "#001133" }, { "value": "#B2CCFF", "theme": { "Mode": "Dark" } } ] }, "--radius-xs": { "type": "number", "value": 2 }, "--destructive-foreground": { "type": "color", "value": [ { "value": "#FFFFFF" }, { "value": "#FFFFFF", "theme": { "Mode": "Dark" } } ] } } }