designs/fonoster.lib.pen
Rama main · réplica de lectura del repositorio original.
{
"version": "2.21",
"children": [
{
"type": "frame",
"id": "frame-1761929672442",
"x": 0,
"y": 0,
"name": "Fonoster UI · components",
"theme": {
"mode": "dark"
},
"clip": true,
"width": 3000,
"height": 4400,
"fill": "$--background",
"layout": "none",
"children": [
{
"type": "frame",
"id": "xCEfn",
"x": 2200,
"y": 4051,
"name": "Tooltip",
"reusable": true,
"clip": true,
"fill": "$--popover",
"cornerRadius": "$--radius-pill",
"stroke": "$--border",
"strokeWidth": 1,
"strokeAlignment": "inner",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000f",
"offset": {
"x": 0,
"y": 2
},
"blur": 3.5
},
"gap": 8,
"padding": [
6,
12
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "wFonn",
"name": "Tooltip Text",
"fill": "$--foreground",
"content": "New Project",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "zdFKu",
"x": 2200,
"y": 1741,
"name": "Switch/Checked",
"reusable": true,
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Y4Mu7",
"name": "switch-base",
"width": 32,
"height": 24,
"layout": "none",
"children": [
{
"type": "frame",
"id": "24hPt",
"x": 0,
"y": 2,
"name": "switch",
"clip": true,
"width": 32,
"height": 20,
"fill": "$--input",
"padding": [
0,
4
],
"justifyContent": "end",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "kl2Cf",
"name": "dot",
"clip": true,
"width": 12,
"height": 12,
"fill": "$--foreground",
"layout": "none"
}
]
}
]
},
{
"type": "text",
"id": "wDpHC",
"name": "Switch Label",
"fill": "$--foreground",
"content": "Power-saving mode",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "W4YFH",
"x": 200,
"y": 3166,
"name": "Progress",
"reusable": true,
"clip": true,
"width": 360,
"height": 16,
"fill": "$--secondary",
"cornerRadius": "$--radius-pill",
"layout": "none",
"children": [
{
"type": "rectangle",
"id": "qQ5Qx",
"x": 0,
"y": 0,
"name": "Progress",
"fill": "$--primary",
"width": 180,
"height": 16
}
]
},
{
"type": "frame",
"id": "9PVw5",
"x": 1802,
"y": 2538.9999999999995,
"name": "Pagination",
"reusable": true,
"gap": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"id": "R6Qz5",
"type": "ref",
"ref": "Svd9t",
"x": 0,
"y": 0,
"descendants": {
"Xphxk": {
"enabled": false
},
"yqG8L": {
"content": "Previous"
}
}
},
{
"type": "frame",
"id": "IXD5J",
"name": "Page Numbers Slot",
"slot": [
"oT0d2",
"Doslm",
"Irk3I"
],
"clip": true,
"width": 40,
"height": 40
},
{
"id": "OboOa",
"type": "ref",
"ref": "Svd9t",
"x": 156,
"y": 0,
"descendants": {
"Xphxk": {
"content": "Next",
"x": 16.034837436226603,
"y": 9.982596452485243,
"rotation": -0.09980195371053763,
"enabled": false
},
"yqG8L": {
"content": "Next"
}
}
}
]
},
{
"type": "frame",
"id": "QFzE8",
"x": 2200,
"y": 3607,
"name": "Textarea Group",
"reusable": true,
"width": 274,
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "frame",
"id": "nQmmR",
"name": "Label Text",
"width": "fill_container",
"fill": {
"type": "color",
"color": "$--white",
"enabled": false
},
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "NrMkU",
"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": "7Mypd",
"name": "Textarea",
"width": "fill_container",
"height": 80,
"fill": "$--background",
"cornerRadius": "$--radius-m",
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"gap": 8,
"padding": [
8,
16
],
"children": [
{
"type": "text",
"id": "b2pCk",
"name": "Input Value",
"fill": "$--foreground",
"content": "Input Value",
"lineHeight": 1.4285714285714286,
"textAlignVertical": "middle",
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "M5Mgn",
"x": 2200,
"y": 3295,
"name": "Input OTP Group/Default",
"reusable": true,
"width": 274,
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "frame",
"id": "m5Ayz",
"name": "Label Text",
"width": "fill_container",
"fill": {
"type": "color",
"color": "$--white",
"enabled": false
},
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "Sh337",
"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": "dUBzn",
"name": "Input OTP Container",
"width": "fill_container",
"gap": -1,
"justifyContent": "center",
"children": [
{
"type": "frame",
"id": "mdnDd",
"name": "Input OTP",
"clip": true,
"width": "fill_container",
"height": 40,
"fill": "$--background",
"cornerRadius": [
"$--radius-pill",
0,
0,
"$--radius-pill"
],
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "VEcfr",
"x": 0,
"y": 0,
"name": "0",
"enabled": false,
"fill": "$--foreground",
"content": "0",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "V8Xsa",
"name": "Input OTP",
"clip": true,
"width": "fill_container",
"height": 40,
"fill": "$--background",
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "gBwGG",
"x": 0,
"y": 0,
"name": "0",
"enabled": false,
"fill": "$--foreground",
"content": "0",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "D6KFZ",
"name": "Input OTP",
"clip": true,
"width": "fill_container",
"height": 40,
"fill": "$--background",
"cornerRadius": [
0,
6,
6,
0
],
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "iVTkv",
"x": 0,
"y": 0,
"name": "0",
"enabled": false,
"fill": "$--foreground",
"content": "0",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "7ZdzW",
"name": "Input OTP",
"clip": true,
"width": 40,
"height": 40,
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "qG43N",
"name": "•",
"fill": "$--foreground",
"content": "•",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "MbQc6",
"name": "Input OTP",
"clip": true,
"width": "fill_container",
"height": 40,
"fill": "$--background",
"cornerRadius": [
6,
0,
0,
6
],
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "xTFuV",
"x": 0,
"y": 0,
"name": "0",
"enabled": false,
"fill": "$--foreground",
"content": "0",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "J9LpP",
"name": "Input OTP",
"clip": true,
"width": "fill_container",
"height": 40,
"fill": "$--background",
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "Q6Z6T",
"x": 0,
"y": 0,
"name": "0",
"enabled": false,
"fill": "$--foreground",
"content": "0",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "9Hzwu",
"name": "Input OTP",
"clip": true,
"width": "fill_container",
"height": 40,
"fill": "$--background",
"cornerRadius": [
0,
"$--radius-pill",
"$--radius-pill",
0
],
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "w1SZv",
"x": 0,
"y": 0,
"name": "0",
"enabled": false,
"fill": "$--foreground",
"content": "0",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "XhJWF",
"x": 2200,
"y": 3023,
"name": "Select Group/Default",
"reusable": true,
"width": 274,
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "frame",
"id": "ygX49",
"name": "Label Text",
"width": "fill_container",
"fill": {
"type": "color",
"color": "$--white",
"enabled": false
},
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "uEVNH",
"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": "UoY51",
"name": "Select Trigger",
"width": "fill_container",
"height": 40,
"fill": "$--background",
"cornerRadius": "$--radius-control",
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"gap": 10,
"padding": [
8,
16
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "q2CuU",
"name": "Select option",
"fill": "$--muted-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Select Option",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "04EW5",
"name": "chevron-down",
"opacity": 0.5,
"width": 16,
"height": 16,
"layout": "none",
"children": [
{
"type": "path",
"id": "cui2i",
"x": 4,
"y": 6,
"name": "Vector",
"geometry": "M0 0l6 6 6-6",
"width": 8,
"height": 4,
"stroke": "$--foreground",
"strokeWidth": 1,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "gKpi4",
"x": 2200,
"y": 2591,
"name": "Input Group/Default",
"reusable": true,
"width": 274,
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "frame",
"id": "KbqaX",
"name": "Label Text",
"width": "fill_container",
"fill": {
"type": "color",
"color": "$--white",
"enabled": false
},
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "6olUK",
"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": "soBSx",
"name": "Input",
"width": "fill_container",
"height": 40,
"fill": "$--background",
"cornerRadius": "$--radius-control",
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"gap": 8,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "FU4Re",
"name": "Input Value",
"fill": "$--muted-foreground",
"content": "Placeholder",
"lineHeight": 1.4285714285714286,
"textAlignVertical": "middle",
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "XYdcn",
"x": 200,
"y": 1834,
"name": "Icon Label/Secondary",
"reusable": true,
"fill": "$--secondary",
"cornerRadius": "$--radius-pill",
"gap": 4,
"padding": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "ULBkt",
"name": "icon-Star-2",
"clip": true,
"width": 16,
"height": 16,
"fill": {
"type": "color",
"color": "#ffffffff",
"enabled": false
},
"layout": "none",
"children": [
{
"type": "path",
"id": "dVsjZ",
"x": 1.8756510019302368,
"y": 1.89599609375,
"name": "Vector 2134",
"geometry": "M9.187 0l-2.81 6.376-6.377 2.811 6.377 2.811 2.81 6.378 2.812-6.377 6.376-2.811-6.376-2.811-2.812-6.377z",
"width": 12.25,
"height": 12.250665664672852,
"stroke": "$--secondary-foreground",
"strokeWidth": 1
}
]
},
{
"type": "text",
"id": "izLyj",
"name": "Text",
"fill": "$--secondary-foreground",
"content": "Pioneer",
"lineHeight": 1.1428571428571428,
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Ffti9",
"x": 200,
"y": 1588,
"name": "Icon Label/Success",
"reusable": true,
"fill": "$--color-success",
"cornerRadius": "$--radius-pill",
"gap": 4,
"padding": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "BFcCW",
"name": "icon-Star-2",
"clip": true,
"width": 16,
"height": 16,
"fill": {
"type": "color",
"color": "#ffffffff",
"enabled": false
},
"layout": "none",
"children": [
{
"type": "path",
"id": "sDzhI",
"x": 1.8756510019302368,
"y": 1.89599609375,
"name": "Vector 2134",
"geometry": "M9.187 0l-2.81 6.376-6.377 2.811 6.377 2.811 2.81 6.378 2.812-6.377 6.376-2.811-6.376-2.811-2.812-6.377z",
"width": 12.25,
"height": 12.250665664672852,
"stroke": "$--color-success-foreground",
"strokeWidth": 1
}
]
},
{
"type": "text",
"id": "AWwyf",
"name": "Text",
"fill": "$--color-success-foreground",
"content": "Explorer",
"lineHeight": 1.1428571428571428,
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "A58oI",
"x": 200,
"y": 1752,
"name": "Icon Label/Violet",
"reusable": true,
"fill": "$--color-info",
"cornerRadius": "$--radius-pill",
"gap": 4,
"padding": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "ULCkh",
"name": "icon-Star-2",
"clip": true,
"width": 16,
"height": 16,
"fill": {
"type": "color",
"color": "#ffffffff",
"enabled": false
},
"layout": "none",
"children": [
{
"type": "path",
"id": "tw01V",
"x": 1.8756510019302368,
"y": 1.89599609375,
"name": "Vector 2134",
"geometry": "M9.187 0l-2.81 6.376-6.377 2.811 6.377 2.811 2.81 6.378 2.812-6.377 6.376-2.811-6.376-2.811-2.812-6.377z",
"width": 12.25,
"height": 12.250665664672852,
"stroke": "$--color-info-foreground",
"strokeWidth": 1
}
]
},
{
"type": "text",
"id": "49I5i",
"name": "Text",
"fill": "$--color-info-foreground",
"content": "Hauler",
"lineHeight": 1.1428571428571428,
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "7Fif0",
"x": 200,
"y": 1670,
"name": "Icon Label/Orange",
"reusable": true,
"fill": "$--color-warning",
"cornerRadius": "$--radius-pill",
"gap": 4,
"padding": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "rMf5x",
"name": "icon-Star-2",
"clip": true,
"width": 16,
"height": 16,
"fill": {
"type": "color",
"color": "#ffffffff",
"enabled": false
},
"layout": "none",
"children": [
{
"type": "path",
"id": "XY32P",
"x": 1.8756510019302368,
"y": 1.89599609375,
"name": "Vector 2134",
"geometry": "M9.187 0l-2.81 6.376-6.377 2.811 6.377 2.811 2.81 6.378 2.812-6.377 6.376-2.811-6.376-2.811-2.812-6.377z",
"width": 12.25,
"height": 12.250665664672852,
"stroke": "$--color-warning-foreground",
"strokeWidth": 1
}
]
},
{
"type": "text",
"id": "glumS",
"name": "Text",
"fill": "$--color-warning-foreground",
"content": "Transporter",
"lineHeight": 1.1428571428571428,
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "90SQo",
"x": 200,
"y": 1448,
"name": "Avatar/Text",
"reusable": true,
"width": 40,
"height": 40,
"fill": "$--secondary",
"cornerRadius": "$--radius-pill",
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "xr4rB",
"name": "Avatar Title",
"fill": "$--secondary-foreground",
"content": "PJ",
"lineHeight": 1.4285714285714286,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "Svd9t",
"x": 369,
"y": 2390,
"name": "Button/Ghost",
"reusable": true,
"height": 40,
"cornerRadius": "$--radius-control",
"gap": 6,
"padding": [
10,
16
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Xphxk",
"name": "plus",
"width": 20,
"height": 20,
"layout": "none",
"children": [
{
"type": "path",
"id": "7qiPW",
"x": 5,
"y": 5,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 10,
"height": 10,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "yqG8L",
"name": "Button",
"fill": "$--foreground",
"content": "Button",
"lineHeight": 1.4285714285714286,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "zIDRN",
"x": 200,
"y": 2390,
"name": "Button/Large/Ghost",
"reusable": true,
"height": 48,
"cornerRadius": "$--radius-control",
"gap": 6,
"padding": [
12,
24
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "6NkRd",
"name": "plus",
"width": 24,
"height": 24,
"layout": "none",
"children": [
{
"type": "path",
"id": "NyPOJ",
"x": 6,
"y": 6,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 12,
"height": 12,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "0SrnB",
"name": "Button",
"fill": "$--foreground",
"content": "Button",
"lineHeight": 1.4285714285714286,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "4x7RU",
"x": 369,
"y": 2314,
"name": "Button/Outline",
"reusable": true,
"height": 40,
"fill": "$--background",
"cornerRadius": "$--radius-control",
"stroke": "$--border",
"strokeWidth": 1,
"strokeAlignment": "inner",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000d",
"offset": {
"x": 0,
"y": 1
},
"blur": 1.75
},
"gap": 6,
"padding": [
10,
16
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "r97g1",
"name": "plus",
"width": 20,
"height": 20,
"layout": "none",
"children": [
{
"type": "path",
"id": "SemM4",
"x": 5,
"y": 5,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 10,
"height": 10,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "7ZVG7",
"name": "Button",
"fill": "$--foreground",
"content": "Button",
"lineHeight": 1.4285714285714286,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "EAwax",
"x": 200,
"y": 2314,
"name": "Button/Large/Outline",
"reusable": true,
"height": 48,
"fill": "$--background",
"cornerRadius": "$--radius-control",
"stroke": "$--border",
"strokeWidth": 1,
"strokeAlignment": "inner",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000d",
"offset": {
"x": 0,
"y": 1
},
"blur": 1.75
},
"gap": 6,
"padding": [
12,
24
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "nHmDC",
"name": "plus",
"width": 24,
"height": 24,
"layout": "none",
"children": [
{
"type": "path",
"id": "HGoMb",
"x": 6,
"y": 6,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 12,
"height": 12,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "kqX7U",
"name": "Button",
"fill": "$--foreground",
"content": "Button",
"lineHeight": 1.4285714285714286,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "ZETEA",
"x": 369,
"y": 2086,
"name": "Button/Default",
"reusable": true,
"height": 40,
"fill": "$--primary",
"cornerRadius": "$--radius-control",
"gap": 6,
"padding": [
10,
16
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "mRGd3",
"name": "plus",
"width": 20,
"height": 20,
"layout": "none",
"children": [
{
"type": "path",
"id": "C6nAO",
"x": 5,
"y": 5,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 10,
"height": 10,
"stroke": "$--primary-foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "q5Hn5",
"name": "Button",
"fill": "$--primary-foreground",
"content": "Button",
"lineHeight": 1.4286,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "U83R7",
"x": 369,
"y": 2162,
"name": "Button/Secondary",
"reusable": true,
"height": 40,
"fill": "$--secondary",
"cornerRadius": "$--radius-control",
"gap": 6,
"padding": [
10,
16
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "mM3qB",
"name": "plus",
"width": 20,
"height": 20,
"layout": "none",
"children": [
{
"type": "path",
"id": "h9Uuq",
"x": 5,
"y": 5,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 10,
"height": 10,
"stroke": "$--secondary-foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "M4KCH",
"name": "Button",
"fill": "$--secondary-foreground",
"content": "Button",
"lineHeight": 1.4286,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "ftEoU",
"x": 369,
"y": 2238,
"name": "Button/Destructive",
"reusable": true,
"height": 40,
"fill": "$--destructive",
"cornerRadius": "$--radius-control",
"gap": 6,
"padding": [
10,
16
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "6KqSk",
"name": "plus",
"width": 20,
"height": 20,
"layout": "none",
"children": [
{
"type": "path",
"id": "1scOD",
"x": 5,
"y": 5,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 10,
"height": 10,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "UQdcX",
"name": "Button",
"fill": "$--foreground",
"content": "Button",
"lineHeight": 1.4286,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "HXajN",
"x": 200,
"y": 2238,
"name": "Button/Large/Destructive",
"reusable": true,
"height": 48,
"fill": "$--destructive",
"cornerRadius": "$--radius-control",
"gap": 6,
"padding": [
12,
24
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "L19dR",
"name": "plus",
"width": 24,
"height": 24,
"layout": "none",
"children": [
{
"type": "path",
"id": "4EYbS",
"x": 6,
"y": 6,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 12,
"height": 12,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "plTTh",
"name": "Button",
"fill": "$--foreground",
"content": "Button",
"lineHeight": 1.5555555555555556,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "89sf2",
"x": 200,
"y": 2162,
"name": "Button/Large/Secondary",
"reusable": true,
"height": 48,
"fill": "$--secondary",
"cornerRadius": "$--radius-control",
"gap": 6,
"padding": [
12,
24
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "kRU0p",
"name": "plus",
"width": 24,
"height": 24,
"layout": "none",
"children": [
{
"type": "path",
"id": "zOwKg",
"x": 6,
"y": 6,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 12,
"height": 12,
"stroke": "$--secondary-foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "17mNX",
"name": "Button",
"fill": "$--secondary-foreground",
"content": "Button",
"lineHeight": 1.5555555555555556,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "ZGI9Z",
"x": 200,
"y": 2086,
"name": "Button/Large/Default",
"reusable": true,
"height": 48,
"fill": "$--primary",
"cornerRadius": "$--radius-control",
"gap": 6,
"padding": [
12,
24
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "oNDwn",
"name": "plus",
"width": 24,
"height": 24,
"layout": "none",
"children": [
{
"type": "path",
"id": "Muzka",
"x": 6,
"y": 6,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 12,
"height": 12,
"stroke": "$--primary-foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "J3Z6N",
"name": "Button",
"fill": "$--primary-foreground",
"content": "Button",
"lineHeight": 1.5555555555555556,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"id": "YZjRF",
"type": "ref",
"reusable": true,
"ref": "ITZkn",
"x": 200,
"y": 952,
"name": "Alert/Error",
"fill": "$--color-error",
"descendants": {
"fS3NL": {
"type": "frame",
"id": "LB3Fl",
"name": "icon-Wave-Signal",
"clip": true,
"width": 24,
"height": 24,
"fill": {
"type": "color",
"color": "$--white",
"enabled": false
},
"layout": "none",
"children": [
{
"type": "path",
"id": "FTYwP",
"x": 1,
"y": 7,
"name": "Vector 2221",
"geometry": "M0 5l5.5 0 3-5 5 10 3-5 5.5 0",
"width": 22,
"height": 10,
"stroke": "$--color-error-foreground",
"strokeWidth": 1
}
]
},
"TPf8O": {
"fill": "$--color-error-foreground",
"content": "Communication link lost"
},
"X4L5E": {
"fill": "$--color-error-foreground",
"content": "Rover telemetry signal interrupted. Check your base antenna alignment or retry connection in 10 minutes."
}
}
},
{
"id": "nIj3a",
"type": "ref",
"reusable": true,
"ref": "ITZkn",
"x": 200,
"y": 656,
"name": "Alert/Success",
"fill": "$--color-success",
"descendants": {
"fS3NL": {
"type": "frame",
"id": "N77wx",
"name": "icon-Check",
"clip": true,
"width": 24,
"height": 24,
"fill": {
"type": "color",
"color": "$--white",
"enabled": false
},
"layout": "none",
"children": [
{
"type": "path",
"id": "03KN4",
"x": 1.5,
"y": 5.5,
"name": "Vector 2356",
"geometry": "M0 7l7 7 14-14",
"width": 21,
"height": 14,
"stroke": "$--color-success-foreground",
"strokeWidth": 1
}
]
},
"TPf8O": {
"fill": "$--color-success-foreground",
"content": "Mission approved"
},
"X4L5E": {
"fill": "$--color-success-foreground",
"content": "Your request to rent the Curiosity-X rover has been confirmed. Deployment scheduled for Sol 482."
}
}
},
{
"id": "vbyqV",
"type": "ref",
"reusable": true,
"ref": "ITZkn",
"x": 200,
"y": 804,
"name": "Alert/Warning",
"fill": "$--color-warning",
"descendants": {
"fS3NL": {
"type": "frame",
"id": "0N3gW",
"name": "icon-Megaphone-2",
"clip": true,
"width": 24,
"height": 24,
"fill": {
"type": "color",
"color": "$--white",
"enabled": false
},
"layout": "none",
"children": [
{
"type": "path",
"id": "BUQBt",
"x": 9,
"y": 3,
"name": "Rectangle 574",
"geometry": "M0 4.5l13-4.5 0 17-13-4.5 0-8z",
"width": 13,
"height": 17,
"stroke": "$--color-warning-foreground",
"strokeWidth": 1
},
{
"type": "path",
"id": "VT2S0",
"x": 2,
"y": 7.5,
"name": "Vector 1329",
"geometry": "M0 0l7 0 0 8-7 0 0-8z",
"width": 7,
"height": 8,
"stroke": "$--color-warning-foreground",
"strokeWidth": 1
},
{
"type": "path",
"id": "yqA3L",
"x": 5,
"y": 15.5,
"name": "Vector 1455",
"geometry": "M4 0l0 6-1 0c-0.79565 0-1.55871-0.31607-2.12132-0.87868-0.56261-0.56261-0.87868-1.32567-0.87868-2.12132l0-3",
"width": 4,
"height": 6,
"stroke": "$--color-warning-foreground",
"strokeWidth": 1
}
]
},
"TPf8O": {
"fill": "$--color-warning-foreground",
"content": "Terrain instability detected"
},
"X4L5E": {
"fill": "$--color-warning-foreground",
"content": "The selected route crosses an area with loose regolith. Proceed with caution or reroute to a safer path."
}
}
},
{
"type": "frame",
"id": "ITZkn",
"x": 200,
"y": 508,
"name": "Alert/Info",
"reusable": true,
"width": 640,
"fill": "$--color-info",
"cornerRadius": "$--radius-none",
"gap": 12,
"padding": 16,
"children": [
{
"type": "frame",
"id": "fS3NL",
"name": "icon-Information-Circle",
"clip": true,
"width": 24,
"height": 24,
"fill": {
"type": "color",
"color": "#ffffffff",
"enabled": false
},
"layout": "none",
"children": [
{
"type": "path",
"id": "RCbzr",
"x": 2,
"y": 2,
"name": "Ellipse 579",
"geometry": "M0 10c0 2.65216 1.05357 5.1957 2.92893 7.07107 1.87536 1.87536 4.4189 2.92893 7.07107 2.92893 2.65216 0 5.1957-1.05357 7.07107-2.92893 1.87536-1.87536 2.92893-4.4189 2.92893-7.07107 0-2.65216-1.05357-5.1957-2.92893-7.07107-1.87536-1.87536-4.4189-2.92893-7.07107-2.92893-2.65216 0-5.1957 1.05357-7.07107 2.92893-1.87536 1.87536-2.92893 4.4189-2.92893 7.07107z",
"width": 20,
"height": 20,
"stroke": "$--color-info-foreground",
"strokeWidth": 1
},
{
"type": "path",
"id": "u1tro",
"x": 9,
"y": 10.5,
"name": "Vector 2348",
"geometry": "M0 0l3 0 0 6",
"width": 3,
"height": 6,
"stroke": "$--color-info-foreground",
"strokeWidth": 1
},
{
"type": "path",
"id": "HkYQ0",
"x": 9,
"y": 16.5,
"name": "Vector 2349",
"geometry": "M0 0l6 0",
"width": 6,
"height": 0,
"stroke": "$--color-info-foreground",
"strokeWidth": 1
},
{
"type": "path",
"id": "GkGy3",
"x": 12,
"y": 6.5,
"name": "Vector 2350",
"geometry": "M0 1.5l0-1.5",
"width": 0,
"height": 1.5,
"stroke": "$--color-info-foreground",
"strokeWidth": 1
}
]
},
{
"type": "frame",
"id": "7IdrZ",
"name": "contents",
"width": "fill_container",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "TPf8O",
"name": "Alert Title",
"fill": "$--color-info-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Rover status update",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "500"
},
{
"type": "text",
"id": "X4L5E",
"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-secondary",
"fontSize": 16,
"fontWeight": "normal"
}
]
}
]
},
{
"id": "DFcCn",
"type": "ref",
"reusable": true,
"ref": "3bQzF",
"x": 200,
"y": 352,
"name": "Accordion/Closed",
"width": 480,
"descendants": {
"WLBKp": {
"type": "frame",
"id": "fmkXp",
"name": "chevron-down",
"width": 16,
"height": 16,
"layout": "none",
"children": [
{
"type": "path",
"id": "0k6lE",
"x": 4,
"y": 6,
"name": "Vector",
"geometry": "M0 0l6 6 6-6",
"width": 8,
"height": 4,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
"frame-1764940517647": {
"enabled": false
}
}
},
{
"type": "frame",
"id": "3bQzF",
"x": 200,
"y": 200,
"name": "Accordion/Open",
"reusable": true,
"width": 480,
"stroke": "$--border",
"strokeWidth": {
"bottom": 1
},
"strokeAlignment": "inner",
"strokeLinejoin": "round",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "MHwKC",
"name": "Accordion Trigger",
"width": "fill_container",
"gap": 18,
"padding": [
16,
0
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "ckp1f",
"name": "Accordion Trigger",
"fill": "$--foreground",
"content": "What is a micro-interaction?",
"lineHeight": 1.5,
"fontFamily": "$--font-primary",
"fontSize": 16,
"fontWeight": "500"
},
{
"type": "frame",
"id": "WLBKp",
"name": "chevron-up",
"width": 16,
"height": 16,
"layout": "none",
"children": [
{
"type": "path",
"id": "dvSwT",
"x": 3.999999761581421,
"y": 6,
"name": "Vector",
"rotation": 9.213866198408551e-15,
"geometry": "M12 6l-6-6-6 6",
"width": 8,
"height": 4,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
}
]
},
{
"type": "frame",
"id": "frame-1764940517647",
"name": "Accordion Content",
"clip": true,
"width": "fill_container",
"layout": "vertical",
"padding": [
0,
0,
16,
0
],
"children": [
{
"type": "text",
"id": "Gqs2u",
"name": "Accordion Contnet",
"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-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"id": "o27Xt",
"type": "ref",
"reusable": true,
"ref": "ZGI9Z",
"x": 518,
"y": 2086,
"name": "Icon Button/Large/Default",
"padding": 12,
"descendants": {
"J3Z6N": {
"enabled": false
}
}
},
{
"id": "pEY1B",
"type": "ref",
"reusable": true,
"ref": "ZETEA",
"x": 606,
"y": 2086,
"name": "Icon Button/Default",
"padding": 10,
"descendants": {
"q5Hn5": {
"enabled": false
}
}
},
{
"id": "4AN1p",
"type": "ref",
"reusable": true,
"ref": "90SQo",
"x": 280,
"y": 1448,
"name": "Avatar/Image",
"fill": {
"type": "image",
"enabled": true,
"mode": "cover"
},
"descendants": {
"xr4rB": {
"enabled": false
}
}
},
{
"id": "vv6Lu",
"type": "ref",
"reusable": true,
"ref": "89sf2",
"x": 518,
"y": 2162,
"name": "Icon Button/Large/Secondary",
"padding": 12,
"descendants": {
"17mNX": {
"enabled": false
}
}
},
{
"id": "HWbHA",
"type": "ref",
"reusable": true,
"ref": "U83R7",
"x": 606,
"y": 2162,
"name": "Icon Button/Secondary",
"padding": 10,
"descendants": {
"M4KCH": {
"enabled": false
}
}
},
{
"id": "o49Ro",
"type": "ref",
"reusable": true,
"ref": "HXajN",
"x": 518,
"y": 2238,
"name": "Icon Button/Large/Destructive",
"padding": 12,
"descendants": {
"plTTh": {
"enabled": false
}
}
},
{
"id": "ai6BP",
"type": "ref",
"reusable": true,
"ref": "ftEoU",
"x": 606,
"y": 2238,
"name": "Icon Button/Destructive",
"padding": 10,
"descendants": {
"UQdcX": {
"enabled": false
}
}
},
{
"id": "tzDL1",
"type": "ref",
"reusable": true,
"ref": "EAwax",
"x": 518,
"y": 2314,
"name": "Icon Button/Large/Outline",
"padding": 12,
"descendants": {
"kqX7U": {
"enabled": false
}
}
},
{
"id": "xQWwZ",
"type": "ref",
"reusable": true,
"ref": "4x7RU",
"x": 606,
"y": 2314,
"name": "Icon Button/Outline",
"padding": 10,
"descendants": {
"7ZVG7": {
"enabled": false
}
}
},
{
"id": "ubB6W",
"type": "ref",
"reusable": true,
"ref": "zIDRN",
"x": 518,
"y": 2390,
"name": "Icon Button/Large/Ghost",
"padding": 12,
"descendants": {
"0SrnB": {
"enabled": false
}
}
},
{
"id": "eNU2w",
"type": "ref",
"reusable": true,
"ref": "Svd9t",
"x": 606,
"y": 2390,
"rotation": 0,
"padding": 10,
"descendants": {
"yqG8L": {
"enabled": false
}
}
},
{
"id": "7KC5U",
"type": "ref",
"reusable": true,
"ref": "Ffti9",
"x": 369,
"y": 1588,
"name": "Label/Success",
"descendants": {
"BFcCW": {
"enabled": false
}
}
},
{
"id": "L8Rgv",
"type": "ref",
"reusable": true,
"ref": "7Fif0",
"x": 369,
"y": 1670,
"name": "Label/Orange",
"descendants": {
"rMf5x": {
"enabled": false
}
}
},
{
"id": "rjvI1",
"type": "ref",
"reusable": true,
"ref": "A58oI",
"x": 369,
"y": 1752,
"name": "Label/Violet",
"descendants": {
"ULCkh": {
"enabled": false
}
}
},
{
"id": "it00G",
"type": "ref",
"reusable": true,
"ref": "XYdcn",
"x": 369,
"y": 1834,
"name": "Label/Secondary",
"descendants": {
"ULBkt": {
"enabled": false
}
}
},
{
"id": "xzG1l",
"type": "ref",
"reusable": true,
"ref": "axCNF",
"x": 466,
"y": 1966,
"name": "Breadcrumb Item/Ellipsis",
"descendants": {
"w41Yx": {
"type": "frame",
"id": "845dP",
"name": "dots",
"width": 16,
"height": 16,
"layout": "none",
"children": [
{
"type": "path",
"id": "djpRN",
"x": 10.666666984558105,
"y": 7.833333492279053,
"name": "Vector",
"geometry": "M0 1.41421l0-1.41421",
"width": 0,
"height": 0.33333349227905273,
"stroke": "$--muted-foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
},
{
"type": "path",
"id": "tUvDT",
"x": 8,
"y": 7.833333492279053,
"name": "Vector",
"geometry": "M0 1.41421l0-1.41421",
"width": 0,
"height": 0.33333349227905273,
"stroke": "$--muted-foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
},
{
"type": "path",
"id": "PfckD",
"x": 5.333333492279053,
"y": 7.833333492279053,
"name": "Vector",
"geometry": "M0 1.41421l0-1.41421",
"width": 0,
"height": 0.33333349227905273,
"stroke": "$--muted-foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
}
}
},
{
"type": "frame",
"id": "axCNF",
"x": 438,
"y": 1966,
"name": "Breadcrumb Item/Separator",
"reusable": true,
"width": 20,
"height": 20,
"fill": {
"type": "color",
"color": "$--white",
"enabled": false
},
"gap": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "w41Yx",
"name": "chevron-right",
"width": 14,
"height": 14,
"layout": "none",
"children": [
{
"type": "path",
"id": "FQHQ9",
"x": 5.249999523162842,
"y": 3.499999761581421,
"name": "Vector",
"geometry": "M0 12l6-6-6-6",
"width": 3.500000476837158,
"height": 7,
"stroke": "$--muted-foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
}
]
},
{
"id": "mErlM",
"type": "ref",
"reusable": true,
"ref": "nW26m",
"x": 319,
"y": 1966,
"name": "Breadcrumb Item/Active",
"descendants": {
"bT3Mm": {
"fill": "$--foreground"
}
}
},
{
"type": "frame",
"id": "nW26m",
"x": 200,
"y": 1966,
"name": "Breadcrumb Item/Default",
"reusable": true,
"fill": {
"type": "color",
"color": "$--white",
"enabled": false
},
"gap": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "bT3Mm",
"name": "Breadcrumb Item",
"fill": "$--muted-foreground",
"content": "Breadcrumb Item",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ERkuB",
"x": 200,
"y": 2538,
"name": "Card",
"reusable": true,
"clip": true,
"width": 399,
"fill": "$--card",
"cornerRadius": "$--radius-none",
"stroke": "$--border",
"strokeWidth": 1,
"strokeAlignment": "inner",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000d",
"offset": {
"x": 0,
"y": 1
},
"blur": 1.75
},
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "4zoFt",
"name": "Card Header",
"slot": [],
"width": "fill_container",
"height": 68,
"layout": "vertical",
"padding": 24,
"justifyContent": "center"
},
{
"type": "frame",
"id": "QMHOm",
"name": "Card Content",
"slot": [],
"width": "fill_container",
"height": "fit_content(100)",
"layout": "vertical",
"gap": 8,
"padding": 24,
"justifyContent": "center"
},
{
"type": "frame",
"id": "tiojM",
"name": "Card Actions",
"slot": [],
"width": "fill_container",
"height": 68,
"gap": 8,
"padding": 24,
"alignItems": "center"
}
]
},
{
"type": "frame",
"id": "r91nP",
"x": 2200,
"y": 1953,
"name": "Checkbox/Checked",
"reusable": true,
"clip": true,
"width": 16,
"height": 16,
"fill": "$--foreground",
"cornerRadius": "$--radius-none",
"stroke": "$--foreground",
"strokeWidth": 1,
"strokeAlignment": "inner",
"layout": "none",
"children": [
{
"type": "frame",
"id": "yG5lQ",
"x": 4,
"y": 4,
"name": "icon-Check",
"clip": true,
"width": 8,
"height": 8,
"layout": "none",
"children": [
{
"type": "path",
"id": "aAdgV",
"x": 0.5,
"y": 1.8333333730697632,
"name": "Vector 2356",
"geometry": "M0 7l7 7 14-14",
"width": 7,
"height": 4.666666507720947,
"stroke": "$--background",
"strokeWidth": 1
}
]
}
]
},
{
"id": "Wxq1C",
"type": "ref",
"reusable": true,
"ref": "r91nP",
"x": 2200,
"y": 2009,
"name": "Checkbox/Default",
"fill": "$--background",
"descendants": {
"yG5lQ": {
"enabled": false
}
}
},
{
"id": "8zOyn",
"type": "ref",
"reusable": true,
"ref": "VYDf7",
"x": 2200,
"y": 2193,
"name": "Checkbox Description/Checked",
"flipX": false,
"flipY": false,
"width": "fit_content",
"height": "fit_content",
"descendants": {
"w9kiZ": {
"id": "fR3PO",
"type": "ref",
"ref": "r91nP",
"x": 0,
"y": 4
}
}
},
{
"type": "frame",
"id": "VYDf7",
"x": 2200,
"y": 2105,
"name": "Checkbox Description/Default",
"reusable": true,
"gap": 8,
"children": [
{
"type": "frame",
"id": "DvjIp",
"name": "checkbox-base",
"width": 16,
"height": 24,
"layout": "none",
"children": [
{
"id": "w9kiZ",
"type": "ref",
"ref": "r91nP",
"x": 0,
"y": 4,
"name": "Checkbox/Unchecked",
"fill": "$--background",
"descendants": {
"yG5lQ": {
"enabled": false
}
}
}
]
},
{
"type": "frame",
"id": "45aPm",
"name": "Text and supporting text",
"layout": "vertical",
"children": [
{
"type": "text",
"id": "wW80R",
"name": "Text",
"fill": "$--foreground",
"content": "Enable autonomous navigation",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "normal"
},
{
"type": "text",
"id": "7MZ0o",
"name": "Supporting text",
"fill": "$--muted-foreground",
"content": "Let the rover find the safest route on its own.",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "normal"
}
]
}
]
},
{
"id": "YIw6B",
"type": "ref",
"reusable": true,
"ref": "VYDf7",
"x": 2200,
"y": 2386,
"name": "Checkbox/Checked",
"flipX": false,
"flipY": false,
"width": "fit_content",
"height": "fit_content",
"descendants": {
"w9kiZ": {
"id": "bU7AQ",
"type": "ref",
"ref": "r91nP",
"x": 0,
"y": 4
},
"7MZ0o": {
"enabled": false
}
}
},
{
"id": "5Wp4y",
"type": "ref",
"reusable": true,
"ref": "VYDf7",
"x": 2200,
"y": 2321,
"name": "Checkbox/Default",
"descendants": {
"7MZ0o": {
"enabled": false
}
}
},
{
"id": "z6HCm",
"type": "ref",
"reusable": true,
"ref": "gKpi4",
"x": 2200,
"y": 2697,
"width": 274,
"name": "Input Group/Filled",
"descendants": {
"FU4Re": {
"fill": "$--foreground",
"content": "Input Value"
}
}
},
{
"id": "592AB",
"type": "ref",
"reusable": true,
"ref": "gKpi4",
"x": 2200,
"y": 2803,
"name": "Input/Default",
"width": 274,
"descendants": {
"KbqaX": {
"enabled": false
},
"FU4Re": {
"content": "Placeholder"
}
}
},
{
"id": "URXVp",
"type": "ref",
"reusable": true,
"ref": "gKpi4",
"x": 2200,
"y": 2883,
"width": 274,
"name": "Input/Filled",
"descendants": {
"KbqaX": {
"enabled": false
},
"FU4Re": {
"fill": "$--foreground",
"content": "Input Value"
}
}
},
{
"id": "mTHMq",
"type": "ref",
"reusable": true,
"ref": "XhJWF",
"x": 2200,
"y": 3129,
"flipX": false,
"flipY": false,
"width": 274,
"height": "fit_content",
"name": "Select Group/Filled",
"descendants": {
"ygX49": {
"enabled": false
},
"UoY51": {
"x": 0,
"y": 0
},
"q2CuU": {
"content": "Selected Option",
"fill": "$--foreground"
}
}
},
{
"id": "JFrjZ",
"type": "ref",
"reusable": true,
"ref": "M5Mgn",
"x": 2200,
"y": 3401,
"name": "Input OTP Group/Filled",
"descendants": {
"mdnDd": {
"enabled": true
},
"VEcfr": {
"enabled": true
},
"gBwGG": {
"enabled": true
},
"iVTkv": {
"enabled": true
},
"qG43N": {
"enabled": true
},
"xTFuV": {
"enabled": true
},
"Q6Z6T": {
"enabled": true
},
"w1SZv": {
"enabled": true
}
}
},
{
"type": "frame",
"id": "Zksub",
"x": 1000,
"y": 583,
"name": "Search Box/Filled",
"reusable": true,
"width": 240,
"cornerRadius": 2,
"gap": 8,
"padding": [
6,
8
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "3JXCB",
"name": "icon-16/search",
"clip": true,
"width": 16,
"height": 16,
"layout": "none",
"children": [
{
"type": "path",
"id": "OBu7v",
"x": 2,
"y": 2,
"name": "Icon",
"geometry": "M10.66667 5.33333c0 2.94552-2.38781 5.33333-5.33334 5.33334m0-10.66667c2.94552 0 5.33333 2.38781 5.33334 5.33333m-10.66667 0c0-2.94552 2.38781-5.33333 5.33333-5.33333m0 10.66667c-2.94552 0-5.33333-2.38781-5.33333-5.33334",
"width": 10.666666984558105,
"height": 10.666666984558105,
"stroke": "$--muted-foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
},
{
"type": "path",
"id": "ZYNyM",
"x": 11.10009765625,
"y": 11.0999755859375,
"name": "Icon",
"geometry": "M2.9 2.9l-2.9-2.9",
"width": 2.8999996185302734,
"height": 2.8999996185302734,
"stroke": "$--muted-foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "shPTz",
"name": "Label",
"fill": "$--foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Search query",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "CqquE",
"name": "icon-16/x",
"clip": true,
"width": 16,
"height": 16,
"layout": "none",
"children": [
{
"type": "path",
"id": "KvNZ4",
"x": 4,
"y": 4,
"name": "Icon",
"geometry": "M12 0l-12 12m0-12l12 12",
"width": 8,
"height": 8,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
}
]
},
{
"id": "T5yK2",
"type": "ref",
"reusable": true,
"ref": "Zksub",
"x": 1000,
"y": 655,
"name": "Search Box/Default",
"descendants": {
"shPTz": {
"fill": "$--muted-foreground",
"content": "Search..."
},
"CqquE": {
"enabled": false
}
}
},
{
"type": "frame",
"id": "5RtqD",
"x": 1000,
"y": 436,
"name": "List Item/Checked",
"reusable": true,
"width": 240,
"cornerRadius": 2,
"gap": 8,
"padding": [
6,
8
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "frame-1764946299363",
"name": "Item Content Left",
"clip": true,
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "H0gCs",
"name": "Leading Icon",
"width": 16,
"height": 16,
"layout": "none",
"children": [
{
"type": "frame",
"id": "zOPtn",
"x": 0,
"y": 0,
"name": "icon-check",
"width": 16,
"height": 16,
"layout": "none",
"children": [
{
"type": "path",
"id": "zuBvR",
"x": 4,
"y": 4.666666507720947,
"name": "Vector",
"geometry": "M0 9l2.40928 2.33851m7.12753-0.4916l8.46319-10.84691m-15.59072 11.33851c1.32862 1.2896 1.99293 1.9344 2.73742 2.13794m4.39011-2.62954c-1.13899 1.45979-1.70848 2.18969-2.41797 2.49352m-1.97214 0.13602c0.65387 0.17877 1.34901 0.13082 1.97214-0.13602",
"width": 8,
"height": 6.66666841506958,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
}
]
},
{
"type": "text",
"id": "S0MJK",
"name": "Label",
"fill": "$--foreground",
"content": "List Item",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "ellipse",
"id": "uQKQ0",
"name": "Marker",
"fill": "$--foreground",
"width": 6,
"height": 6
}
]
},
{
"type": "frame",
"id": "frame-1764946369123",
"name": "Item Content Right",
"clip": true,
"gap": 8,
"children": [
{
"type": "text",
"id": "bPtms",
"name": "Shortcut",
"opacity": 0.6000000238418579,
"fill": "$--foreground",
"content": "⇧⌘A",
"lineHeight": 1.3333333333333333,
"textAlign": "right",
"fontFamily": "$--font-secondary",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "k87ed",
"name": "Trailing Icon",
"width": 16,
"height": 16,
"layout": "none",
"children": [
{
"type": "path",
"id": "AaO0s",
"x": 6,
"y": 4,
"name": "Vector",
"geometry": "M0 12l6-6-6-6",
"width": 4.000000476837158,
"height": 8,
"stroke": "$--foreground",
"strokeWidth": 1,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
}
]
}
]
},
{
"id": "Nb9Jh",
"type": "ref",
"reusable": true,
"ref": "5RtqD",
"x": 1000,
"y": 511,
"name": "List Item/Unchecked",
"descendants": {
"zOPtn": {
"type": "frame",
"id": "frame-1764946565118",
"x": 0,
"y": 0,
"name": "icon-placeholder",
"clip": true,
"width": 16,
"height": 16,
"layout": "none"
},
"frame-1764946369123": {
"enabled": true
}
}
},
{
"type": "frame",
"id": "IAQUJ",
"x": 1000,
"y": 368,
"name": "List Item Title",
"reusable": true,
"width": 240,
"cornerRadius": 2,
"gap": 8,
"padding": [
8,
6,
8,
32
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "uWdo0",
"name": "Label",
"fill": "$--muted-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "List Title",
"lineHeight": 1.3333333333333333,
"fontFamily": "$--font-secondary",
"fontSize": 12,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "ZIXiw",
"x": 1000,
"y": 320,
"name": "List Divider",
"reusable": true,
"width": 240,
"gap": 8,
"padding": [
4,
0
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "line",
"id": "3L1Cx",
"name": "Line",
"width": "fill_container",
"height": 0,
"stroke": "$--border",
"strokeWidth": 1
}
]
},
{
"type": "frame",
"id": "cH4wO",
"x": 1000,
"y": 200,
"name": "Dropdown",
"reusable": true,
"slot": [
"ZIXiw",
"IAQUJ",
"5RtqD",
"Nb9Jh",
"Zksub",
"T5yK2"
],
"clip": true,
"width": 240,
"height": 80,
"fill": "$--popover",
"cornerRadius": "$--radius-m",
"stroke": "$--border",
"strokeWidth": 1,
"strokeAlignment": "inner",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000f",
"offset": {
"x": 0,
"y": 2
},
"blur": 3.5
},
"layout": "vertical",
"alignItems": "center"
},
{
"id": "oiT6B",
"type": "ref",
"reusable": true,
"ref": "QFzE8",
"x": 2200,
"y": 3753,
"name": "Textarea/Default",
"descendants": {
"nQmmR": {
"enabled": false
},
"7Mypd": {
"x": 0,
"y": 0
},
"b2pCk": {
"fill": "$--muted-foreground",
"content": "Write your novel..."
}
}
},
{
"id": "nvIIa",
"type": "ref",
"reusable": true,
"ref": "QFzE8",
"x": 2200,
"y": 3873,
"name": "Textarea/Filled",
"descendants": {
"nQmmR": {
"enabled": false
},
"7Mypd": {
"x": 0,
"y": 0
},
"b2pCk": {
"content": "Once upon a time..."
}
}
},
{
"type": "frame",
"id": "KbyBJ",
"x": 200,
"y": 2842,
"name": "Tab Item/Active",
"reusable": true,
"fill": "$--background",
"cornerRadius": "$--radius-pill",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000f",
"offset": {
"x": 0,
"y": 1
},
"blur": 3.5
},
"gap": 8,
"padding": [
6,
12
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "248ys",
"name": "Label Selected",
"fill": "$--foreground",
"content": "Tab Item",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"id": "BdBJJ",
"type": "ref",
"reusable": true,
"ref": "KbyBJ",
"x": 200,
"y": 2894,
"name": "Tab Item/Inactive",
"fill": [],
"effect": [],
"descendants": {
"248ys": {
"fill": "$--muted-foreground"
}
}
},
{
"type": "frame",
"id": "Kbr4h",
"x": 200,
"y": 2946,
"name": "Tabs",
"reusable": true,
"slot": [
"KbyBJ",
"BdBJJ"
],
"clip": true,
"width": 93,
"height": 40,
"fill": "$--secondary",
"cornerRadius": "$--radius-pill",
"gap": 8,
"padding": 4,
"justifyContent": "center",
"alignItems": "center"
},
{
"id": "Hygdd",
"type": "ref",
"ref": "Kbr4h",
"x": 200,
"y": 3026,
"name": "Tabs",
"width": "fit_content",
"height": 40,
"flipX": false,
"flipY": false,
"children": [
{
"id": "bBzsK",
"type": "ref",
"ref": "KbyBJ",
"x": 4,
"y": 4,
"descendants": {
"248ys": {
"x": 12,
"y": 6,
"content": "Integrations"
}
}
},
{
"id": "GvdF4",
"type": "ref",
"ref": "BdBJJ",
"x": 122,
"y": 4,
"descendants": {
"248ys": {
"content": "Billing"
}
}
},
{
"id": "CEFDt",
"type": "ref",
"ref": "BdBJJ",
"x": 197,
"y": 4,
"descendants": {
"248ys": {
"content": "Profile"
}
}
},
{
"id": "3M9BF",
"type": "ref",
"ref": "BdBJJ",
"x": 273,
"y": 4,
"descendants": {
"248ys": {
"content": "Advanced"
}
}
}
]
},
{
"type": "frame",
"id": "yoahP",
"x": 2200,
"y": 1296,
"name": "Radio Description/Default",
"reusable": true,
"gap": 8,
"children": [
{
"type": "frame",
"id": "rk8rD",
"name": "radio-base",
"width": 16,
"height": 24,
"layout": "none",
"children": [
{
"id": "mhIeP",
"type": "ref",
"ref": "u61z6",
"x": 0,
"y": 4,
"name": "Radio/Default",
"fill": "$--background",
"descendants": {
"mB2s3": {
"enabled": false
}
}
}
]
},
{
"type": "frame",
"id": "B3rtw",
"name": "Text and supporting text",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "OaRwi",
"name": "Label Text",
"fill": "$--foreground",
"content": "Pathfinder Neo",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "normal"
},
{
"type": "text",
"id": "viVIQ",
"name": "Supporting text",
"fill": "$--muted-foreground",
"content": "Compact rover optimized for short-range missions.",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "u61z6",
"x": 2200,
"y": 1144,
"name": "Radio/Selected",
"reusable": true,
"clip": true,
"width": 16,
"height": 16,
"fill": "$--foreground",
"cornerRadius": 8,
"stroke": "$--foreground",
"strokeWidth": 1,
"strokeAlignment": "inner",
"layout": "none",
"children": [
{
"type": "ellipse",
"id": "mB2s3",
"x": 6,
"y": 6,
"name": "dot",
"fill": "$--background",
"width": 4,
"height": 4
}
]
},
{
"id": "Ao9E1",
"type": "ref",
"reusable": true,
"ref": "u61z6",
"x": 2200,
"y": 1200,
"name": "Radio/Default",
"fill": "$--background",
"descendants": {
"mB2s3": {
"enabled": false
}
}
},
{
"id": "20Ebu",
"type": "ref",
"reusable": true,
"ref": "yoahP",
"x": 2200,
"y": 1390,
"name": "Radio Description/Selected",
"descendants": {
"mhIeP": {
"id": "DHHYV",
"type": "ref",
"ref": "u61z6",
"x": 0,
"y": 4
}
}
},
{
"id": "t3kqz",
"type": "ref",
"reusable": true,
"ref": "yoahP",
"x": 2200,
"y": 1522,
"name": "Radio/Default",
"descendants": {
"viVIQ": {
"enabled": false
}
}
},
{
"id": "hMm4B",
"type": "ref",
"reusable": true,
"ref": "yoahP",
"x": 2200,
"y": 1586,
"name": "Radio/Selected",
"descendants": {
"mhIeP": {
"id": "Z7y8W",
"type": "ref",
"ref": "u61z6",
"x": 0,
"y": 4
},
"viVIQ": {
"enabled": false
}
}
},
{
"id": "wk1O8",
"type": "ref",
"reusable": true,
"ref": "zdFKu",
"x": 2200,
"y": 1805,
"name": "Switch/Default",
"descendants": {
"24hPt": {
"justifyContent": "start",
"alignItems": "center",
"fill": "$--background",
"stroke": "$--border",
"strokeWidth": 1,
"strokeLinejoin": "miter",
"strokeLinecap": "butt",
"strokeAlignment": "inner"
}
}
},
{
"type": "frame",
"id": "d5ZTS",
"x": 1006,
"y": 2443,
"name": "Sidebar",
"reusable": true,
"width": 280,
"height": "fill_container(640)",
"fill": "$--sidebar",
"stroke": "$--sidebar-border",
"strokeWidth": {
"right": 1
},
"strokeAlignment": "outer",
"strokeLinejoin": "round",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "frame",
"id": "G3EQQ",
"name": "Sidebar Header",
"width": "fill_container",
"height": 88,
"stroke": "$--sidebar-border",
"strokeWidth": {
"bottom": 1
},
"strokeAlignment": "inner",
"strokeLinejoin": "round",
"layout": "vertical",
"gap": 8,
"padding": [
24,
32
],
"justifyContent": "center",
"children": [
{
"id": "Rjh89",
"type": "ref",
"ref": "S4FXr",
"name": "Sidebar Logo"
}
]
},
{
"type": "frame",
"id": "NvL81",
"name": "Sidebar Content",
"slot": [
"h12kK",
"dOLzc",
"X6nwq"
],
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"padding": [
0,
16
]
},
{
"type": "frame",
"id": "3F5am",
"name": "Sidebar Footer",
"width": "fill_container",
"gap": 8,
"padding": [
24,
32
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "rT0dx",
"name": "Profile",
"width": "fill_container",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "uiUgV",
"name": "Name",
"fill": "$--sidebar-accent-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Joe Doe",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "normal"
},
{
"type": "text",
"id": "eUcmA",
"name": "Email",
"fill": "$--sidebar-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "joe@acmecorp.com",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "icon",
"id": "UlKF0",
"width": 24,
"height": 24,
"icon": "keyboard_arrow_down",
"library": "Material Symbols Sharp",
"weight": 100,
"fill": "$--sidebar-foreground"
}
]
}
]
},
{
"type": "frame",
"id": "h12kK",
"x": 1326,
"y": 2443,
"name": "Sidebar Section Title",
"reusable": true,
"width": 248,
"padding": 16,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "b8JIN",
"name": "Management",
"fill": "$--sidebar-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Title",
"lineHeight": 1.1428571428571428,
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "dOLzc",
"x": 1326,
"y": 2531,
"name": "Sidebar Item/Active",
"reusable": true,
"width": 248,
"fill": "$--sidebar-accent",
"cornerRadius": 100,
"gap": 16,
"padding": [
12,
16
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "xGT5g",
"width": 24,
"height": 24,
"icon": "dashboard",
"library": "Material Symbols Sharp",
"weight": 100,
"fill": "$--sidebar-accent-foreground"
},
{
"type": "text",
"id": "TXca3",
"name": "Item Title",
"fill": "$--sidebar-accent-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Item",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"id": "X6nwq",
"type": "ref",
"reusable": true,
"ref": "dOLzc",
"x": 1326,
"y": 2619,
"width": 248,
"height": "fit_content",
"flipX": false,
"flipY": false,
"name": "Sidebar Item/Default",
"fill": [],
"descendants": {
"xGT5g": {
"fill": "$--sidebar-foreground"
},
"TXca3": {
"fill": "$--sidebar-foreground"
}
}
},
{
"type": "frame",
"id": "oT0d2",
"x": 1802,
"y": 2459.211644890092,
"name": "Pagination Item/Active",
"reusable": true,
"width": 40,
"height": 40,
"fill": "$--background",
"cornerRadius": "$--radius-pill",
"stroke": "$--border",
"strokeWidth": 1,
"strokeAlignment": "inner",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000f",
"offset": {
"x": 0,
"y": 1
},
"blur": 3.5
},
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "y7IIq",
"name": "1",
"fill": "$--foreground",
"content": "1",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"id": "Doslm",
"type": "ref",
"reusable": true,
"ref": "oT0d2",
"x": 1882,
"y": 2459.211644890092,
"name": "Pagination Item/Default",
"fill": [],
"stroke": [],
"effect": [],
"strokeWidth": 1,
"strokeLinejoin": "miter",
"strokeLinecap": "butt",
"strokeAlignment": "inner"
},
{
"id": "Irk3I",
"type": "ref",
"reusable": true,
"ref": "oT0d2",
"x": 1961.7883551099067,
"y": 2459.4255535419575,
"name": "Pagination Item/Ellipsis",
"fill": [],
"stroke": [],
"effect": [],
"rotation": 0.6095720472010598,
"strokeWidth": 1,
"strokeLinejoin": "miter",
"strokeLinecap": "butt",
"strokeAlignment": "inner",
"descendants": {
"y7IIq": {
"type": "frame",
"id": "PkGub",
"name": "dots",
"width": 24,
"height": 24,
"layout": "none",
"children": [
{
"type": "path",
"id": "SsCKU",
"x": 16,
"y": 11.75,
"name": "Vector",
"geometry": "M0 1.41421l0-1.41421",
"width": 0,
"height": 0.5,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
},
{
"type": "path",
"id": "WoLlm",
"x": 12,
"y": 11.75,
"name": "Vector",
"geometry": "M0 1.41421l0-1.41421",
"width": 0,
"height": 0.5,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
},
{
"type": "path",
"id": "IXSc4",
"x": 8,
"y": 11.75,
"name": "Vector",
"geometry": "M0 1.41421l0-1.41421",
"width": 0,
"height": 0.5,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
}
}
},
{
"id": "cYAuh",
"type": "ref",
"reusable": true,
"ref": "ERkuB",
"x": 200,
"y": 1160,
"name": "Dialog",
"fill": "$--background",
"width": 480,
"descendants": {
"4zoFt": {
"height": "fit_content",
"children": [
{
"type": "frame",
"id": "XZp33",
"name": "Alert Dialog Header",
"width": "fill_container",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "cCHwa",
"name": "Dialog Title",
"fill": "$--foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Add a title here",
"lineHeight": 1.5555555555555556,
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "SGCXJ",
"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-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
"QMHOm": {
"enabled": false
},
"tiojM": {
"height": "fit_content",
"children": [
{
"id": "mcObo",
"type": "ref",
"ref": "ZETEA",
"x": 24,
"y": 24,
"descendants": {
"mRGd3": {
"enabled": false
},
"q5Hn5": {
"content": "Continue"
}
}
},
{
"id": "vp59U",
"type": "ref",
"ref": "4x7RU",
"x": 132,
"y": 24,
"descendants": {
"r97g1": {
"enabled": false
},
"7ZVG7": {
"content": "Cancel",
"x": 16,
"y": 10
}
}
}
]
}
}
},
{
"id": "izigX",
"type": "ref",
"reusable": true,
"ref": "ERkuB",
"x": 2200,
"y": 200,
"name": "Modal/Left",
"width": 400,
"descendants": {
"4zoFt": {
"height": "fit_content",
"gap": 4,
"children": [
{
"type": "text",
"id": "Y9Tug",
"name": "Card Title",
"fill": "$--foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Modal Title",
"lineHeight": 1.4,
"fontFamily": "$--font-primary",
"fontSize": 20,
"fontWeight": "600"
},
{
"type": "text",
"id": "ffmEf",
"name": "Modal Subtitle",
"fill": "$--muted-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Modal Subtitle",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
"QMHOm": {
"children": []
},
"tiojM": {
"height": "fit_content",
"children": [
{
"type": "frame",
"id": "3cNo9",
"name": "Actions",
"width": "fill_container",
"gap": 12,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"id": "Qho76",
"type": "ref",
"ref": "ZETEA",
"x": 0,
"y": 0,
"width": "fill_container",
"descendants": {
"mRGd3": {
"enabled": false
},
"q5Hn5": {
"content": "Action"
}
}
},
{
"id": "rniy5",
"type": "ref",
"ref": "U83R7",
"x": 182,
"y": 0,
"width": "fill_container",
"descendants": {
"mM3qB": {
"enabled": false
},
"M4KCH": {
"content": "Action"
}
}
}
]
}
]
}
}
},
{
"id": "5JUG0",
"type": "ref",
"reusable": true,
"ref": "ERkuB",
"x": 2200,
"y": 496,
"name": "Modal/Center",
"width": 400,
"descendants": {
"4zoFt": {
"gap": 4,
"height": "fit_content",
"children": [
{
"type": "text",
"id": "MhbR9",
"name": "Card Title",
"fill": "$--foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Modal Title",
"lineHeight": 1.4,
"textAlign": "center",
"fontFamily": "$--font-primary",
"fontSize": 20,
"fontWeight": "600"
},
{
"type": "text",
"id": "1nHxd",
"name": "Modal Subtitle",
"fill": "$--muted-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Modal Subtitle",
"lineHeight": 1.4285714285714286,
"textAlign": "center",
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
"QMHOm": {
"children": []
},
"tiojM": {
"height": "fit_content",
"children": [
{
"type": "frame",
"id": "KNlsV",
"name": "Actions",
"width": "fill_container",
"gap": 12,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"id": "jRbmo",
"type": "ref",
"ref": "ZETEA",
"x": 0,
"y": 0,
"width": "fill_container",
"descendants": {
"mRGd3": {
"enabled": false
},
"q5Hn5": {
"content": "Action"
}
}
},
{
"id": "loFcC",
"type": "ref",
"ref": "U83R7",
"x": 182,
"y": 0,
"width": "fill_container",
"descendants": {
"mM3qB": {
"enabled": false
},
"M4KCH": {
"content": "Action"
}
}
}
]
}
]
}
}
},
{
"id": "DBtsv",
"type": "ref",
"reusable": true,
"ref": "ERkuB",
"x": 2200,
"y": 792,
"name": "Modal/Center Icon",
"width": 400,
"descendants": {
"4zoFt": {
"height": "fit_content",
"children": [
{
"type": "frame",
"id": "j3YeB",
"name": "Icon",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "NA5nA",
"name": "Icon Base",
"width": 48,
"height": 48,
"fill": "$--color-warning",
"cornerRadius": "$--radius-pill",
"gap": 10,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "YkAAz",
"name": "icon-24/alert-triangle",
"clip": true,
"width": 24,
"height": 24,
"layout": "none",
"children": [
{
"type": "path",
"id": "ou0AU",
"x": 1.5517578125,
"y": 1.897247314453125,
"name": "Icon",
"geometry": "M8.73802 0.96274l-8.47 14.14c-0.17463 0.30242-0.26703 0.6453-0.26801 0.99452-0.00098 0.34922 0.0895 0.69261 0.26244 0.99601 0.17294 0.3034 0.4223 0.55622 0.72328 0.73333 0.30098 0.1771 0.64309 0.27231 0.99229 0.27614l16.94 0c0.3492-0.00384 0.69131-0.09905 0.99229-0.27614 0.30098-0.1771 0.55035-0.42993 0.72328-0.73333 0.17293-0.3034 0.26342-0.64678 0.26244-0.99601-0.00098-0.34922-0.09338-0.6921-0.26801-0.99452l-8.47-14.14c-0.17827-0.29389-0.42928-0.53688-0.72881-0.70551-0.29953-0.16864-0.63746-0.25723-0.98119-0.25723-0.34374 0-0.68167 0.08859-0.9812 0.25723-0.29953 0.16864-0.55053 0.41162-0.7288 0.70551z",
"width": 20.896038055419922,
"height": 18.102745056152344,
"stroke": "$--color-warning-foreground",
"strokeWidth": 2,
"strokeLinejoin": "round",
"strokeLinecap": "round"
},
{
"type": "path",
"id": "kpACM",
"x": 11.999755859375,
"y": 8,
"name": "Icon",
"geometry": "M0 0l0 4",
"width": 0,
"height": 4,
"stroke": "$--color-warning-foreground",
"strokeWidth": 2,
"strokeLinejoin": "round",
"strokeLinecap": "round"
},
{
"type": "path",
"id": "PbBFZ",
"x": 11.999755859375,
"y": 16,
"name": "Icon",
"geometry": "M0 0l0.01 0",
"width": 0.010000228881835938,
"height": 0,
"stroke": "$--color-warning-foreground",
"strokeWidth": 2,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
}
]
}
]
}
]
},
"QMHOm": {
"children": []
},
"tiojM": {
"height": "fit_content",
"children": [
{
"type": "frame",
"id": "9BkTI",
"name": "Actions",
"width": "fill_container",
"gap": 12,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"id": "lDPDm",
"type": "ref",
"ref": "ZETEA",
"x": 0,
"y": 0,
"width": "fill_container",
"descendants": {
"mRGd3": {
"enabled": false
},
"q5Hn5": {
"content": "Action"
}
}
},
{
"id": "uGlQP",
"type": "ref",
"ref": "U83R7",
"x": 182,
"y": 0,
"width": "fill_container",
"descendants": {
"mM3qB": {
"enabled": false
},
"M4KCH": {
"content": "Action"
}
}
}
]
}
]
}
}
},
{
"id": "ksvfk",
"type": "ref",
"reusable": true,
"ref": "ERkuB",
"x": 1378,
"y": 3216,
"fill": "$--background",
"width": 336,
"height": "fit_content",
"clip": true,
"flipX": false,
"flipY": false,
"textGrowth": "auto",
"name": "Card Image",
"descendants": {
"4zoFt": {
"stroke": "$--border",
"height": "fit_content",
"padding": 0,
"strokeWidth": {
"bottom": 1
},
"strokeLinejoin": "miter",
"strokeLinecap": "butt",
"strokeAlignment": "inner",
"children": [
{
"type": "frame",
"id": "bt0T5",
"name": "image-placeholder",
"width": "fill_container",
"height": 160,
"fill": "$--background",
"stroke": "$--border",
"strokeWidth": {
"bottom": 1
},
"strokeAlignment": "inner",
"layout": "none"
}
]
},
"QMHOm": {
"height": "fit_content",
"children": [
{
"type": "text",
"id": "fRodj",
"name": "title",
"fill": "$--foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Aurora Scout",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 24,
"fontWeight": "normal"
},
{
"type": "text",
"id": "xS5p5",
"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"
}
]
},
"tiojM": {
"enabled": true,
"height": "fit_content",
"justifyContent": "space_between",
"alignItems": "start",
"children": [
{
"id": "xkhid",
"type": "ref",
"ref": "U83R7",
"x": 24,
"y": 24,
"descendants": {
"M4KCH": {
"content": "Request"
}
}
},
{
"id": "UKsrb",
"type": "ref",
"ref": "L8Rgv",
"x": 245,
"y": 24,
"descendants": {
"glumS": {
"content": "$45.00"
}
}
}
]
}
}
},
{
"id": "wg5F3",
"type": "ref",
"reusable": true,
"ref": "ERkuB",
"x": 1000,
"y": 3216,
"fill": "$--background",
"width": 336,
"height": 280,
"name": "Card Action",
"descendants": {
"4zoFt": {
"stroke": "$--border",
"height": "fit_content",
"strokeWidth": {
"bottom": 1
},
"strokeLinejoin": "miter",
"strokeLinecap": "butt",
"strokeAlignment": "inner",
"children": [
{
"type": "text",
"id": "taBHi",
"name": "title",
"fill": "$--muted-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Navigation AI v2.3",
"lineHeight": 1.5,
"fontFamily": "$--font-primary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
"QMHOm": {
"height": "fit_content",
"children": [
{
"type": "text",
"id": "X5RNH",
"name": "title",
"fill": "$--foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Enhanced obstacle detection and smoother route planning for rocky terrains.",
"lineHeight": 1.5,
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
"tiojM": {
"enabled": true,
"height": "fit_content",
"children": [
{
"id": "NrOAf",
"type": "ref",
"ref": "ZETEA",
"x": 24,
"y": 24,
"descendants": {
"q5Hn5": {
"content": "Install"
}
}
}
]
}
}
},
{
"id": "eBwLd",
"type": "ref",
"reusable": true,
"ref": "ERkuB",
"x": 1000,
"y": 3537,
"fill": "$--background",
"width": 336,
"height": "fit_content",
"name": "Card Plain",
"descendants": {
"4zoFt": {
"stroke": "$--border",
"height": "fit_content",
"strokeWidth": {
"bottom": 1
},
"strokeLinejoin": "miter",
"strokeLinecap": "butt",
"strokeAlignment": "inner",
"children": [
{
"type": "text",
"id": "zdeXA",
"name": "title",
"fill": "$--muted-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Active Rovers",
"lineHeight": 1.5,
"fontFamily": "$--font-primary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
"QMHOm": {
"height": "fit_content",
"justifyContent": "center",
"alignItems": "start",
"children": [
{
"type": "text",
"id": "HjgHV",
"name": "title",
"fill": "$--foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "1,280",
"lineHeight": 1.5,
"fontFamily": "$--font-primary",
"fontSize": 32,
"fontWeight": "normal"
},
{
"id": "hacc9",
"type": "ref",
"ref": "7KC5U",
"x": 24,
"y": 80,
"descendants": {
"AWwyf": {
"content": "-12%"
}
}
}
]
},
"tiojM": {
"enabled": false,
"height": 88,
"children": []
}
}
},
{
"type": "frame",
"id": "j9N2Y",
"x": 1000,
"y": 2134,
"name": "Data Table Footer",
"reusable": true,
"width": "fill_container(1024)",
"gap": 16,
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "UmgWD",
"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": "U9lxU",
"type": "ref",
"ref": "9PVw5",
"x": 802,
"y": 0,
"width": "fit_content",
"descendants": {
"IXD5J": {
"width": 40,
"justifyContent": "center",
"alignItems": "center",
"height": 40
}
}
}
]
},
{
"type": "frame",
"id": "yLiVX",
"x": 1000,
"y": 1726,
"name": "Data Table",
"reusable": true,
"clip": true,
"width": 1024,
"layout": "vertical",
"gap": 16,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "GILr0",
"name": "Data Table Header",
"width": "fill_container",
"gap": 16,
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "D2Ukn",
"name": "Inpu/Default",
"width": 274,
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "frame",
"id": "LIuaX",
"x": 0,
"y": 0,
"name": "Label Text",
"enabled": false,
"width": "fill_container(0)",
"fill": {
"type": "color",
"color": "$--white",
"enabled": false
},
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "7n2AL",
"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": "Pk2Th",
"name": "Input",
"width": "fill_container",
"height": 40,
"fill": "$--background",
"cornerRadius": "$--radius-pill",
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"gap": 8,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "ujsbK",
"name": "Input Value",
"fill": "$--muted-foreground",
"content": "Search…",
"lineHeight": 1.4285714285714286,
"textAlignVertical": "middle",
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "MGKE6",
"name": "Button/Outline",
"height": 40,
"fill": "$--background",
"cornerRadius": "$--radius-pill",
"stroke": "$--border",
"strokeWidth": 1,
"strokeAlignment": "inner",
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#0000000d",
"offset": {
"x": 0,
"y": 1
},
"blur": 1.75
},
"gap": 6,
"padding": [
10,
16
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "j0Mcz",
"name": "plus",
"width": 20,
"height": 20,
"layout": "none",
"children": [
{
"type": "path",
"id": "YWglf",
"x": 5,
"y": 5,
"name": "Vector",
"geometry": "M7.07104 3.53555l-3.53552 0-3.53552 0m3.53552-3.53555l0 3.53555 0 3.53549",
"width": 10,
"height": 10,
"stroke": "$--foreground",
"strokeWidth": 1.5,
"strokeLinejoin": "round",
"strokeLinecap": "round"
}
]
},
{
"type": "text",
"id": "nJH86",
"name": "Button",
"fill": "$--foreground",
"content": "Button",
"lineHeight": 1.4285714285714286,
"textAlign": "center",
"textAlignVertical": "middle",
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "500"
}
]
}
]
},
{
"type": "frame",
"id": "iC3n0",
"name": "Data Table Content",
"slot": [
"T73Cd"
],
"clip": true,
"width": "fill_container",
"height": "fit_content(260)",
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center"
},
{
"id": "xrcIc",
"type": "ref",
"ref": "j9N2Y",
"x": 0,
"y": 332
}
]
},
{
"type": "frame",
"id": "pPOgy",
"x": 1000,
"y": 867,
"name": "Table",
"reusable": true,
"slot": [
"T73Cd"
],
"width": 1024,
"height": 300,
"fill": "$--background",
"cornerRadius": "$--radius-none",
"stroke": "$--border",
"strokeWidth": 1,
"strokeAlignment": "inner",
"layout": "vertical",
"alignItems": "center"
},
{
"type": "frame",
"id": "T73Cd",
"x": 1000,
"y": 1200,
"name": "Table Row",
"reusable": true,
"slot": [
"uKYIj",
"tbrR4"
],
"width": "fill_container(1024)",
"height": "fit_content(44)",
"stroke": "$--border",
"strokeWidth": {
"bottom": 1
},
"strokeAlignment": "inner",
"strokeLinejoin": "round",
"alignItems": "center"
},
{
"type": "frame",
"id": "uKYIj",
"x": 1000,
"y": 1274,
"name": "Table Cell",
"reusable": true,
"slot": [],
"width": "fill_container(293)",
"height": "fit_content(44)",
"gap": 8,
"padding": 12,
"alignItems": "center"
},
{
"type": "frame",
"id": "VnGc5",
"x": 1000,
"y": 1644,
"name": "Data Table Header",
"reusable": true,
"width": "fill_container(1024)",
"gap": 16,
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"id": "ZGNYc",
"type": "ref",
"ref": "gKpi4",
"x": 0,
"y": 0,
"name": "Inpu/Default",
"width": 274,
"descendants": {
"KbqaX": {
"enabled": false
},
"FU4Re": {
"content": "Search…"
}
}
},
{
"id": "7jFra",
"type": "ref",
"ref": "4x7RU",
"x": 915,
"y": 0,
"descendants": {
"7ZVG7": {
"content": "Button"
}
}
}
]
},
{
"type": "frame",
"id": "tbrR4",
"x": 1000,
"y": 1372,
"name": "Table Column Header",
"reusable": true,
"width": "fill_container(293)",
"gap": 8,
"padding": 12,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "XGc4z",
"name": "Label",
"fill": "$--muted-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Name",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-primary",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "text",
"id": "ihlEg",
"x": 1000,
"y": 732,
"name": "Text Label",
"fill": "$--foreground",
"textGrowth": "fixed-width",
"width": "fill_container(150)",
"content": "Text Label",
"lineHeight": 1.4285714285714286,
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "cqqfg",
"x": 2520,
"y": 2803,
"name": "Input/Compact",
"reusable": true,
"width": 160,
"height": 32,
"fill": "$--background",
"cornerRadius": 6,
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"gap": 6,
"padding": [
0,
10
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "ehaeO",
"name": "Value",
"fill": "$--foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "value",
"fontFamily": "$--font-primary",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Vc5jL",
"x": 2520,
"y": 2883,
"name": "Select/Compact",
"reusable": true,
"width": 160,
"height": 32,
"fill": "$--background",
"cornerRadius": 6,
"stroke": "$--input",
"strokeWidth": 1,
"strokeAlignment": "inner",
"gap": 6,
"padding": [
0,
10
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "JbPGR",
"name": "Value",
"fill": "$--foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "string",
"fontFamily": "$--font-primary",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "icon",
"id": "OpZwA",
"name": "Chevron",
"width": 12,
"height": 12,
"icon": "chevron-down",
"library": "lucide",
"fill": "$--muted-foreground"
}
]
}
]
},
{
"type": "frame",
"id": "dUMHK",
"x": 0,
"y": -280,
"name": "Brand",
"theme": {
"mode": "dark"
},
"fill": "$background",
"gap": 40,
"padding": 40,
"children": [
{
"type": "frame",
"id": "S4FXr",
"name": "Logo",
"reusable": true,
"width": 124,
"height": 32,
"layout": "none",
"children": [
{
"type": "path",
"id": "UCaiC",
"x": 0,
"y": 0,
"name": "Letter 1",
"geometry": "M11.5654 33.1206v-24.75341h16.9796v5.02041h-11.2023v5.3342h9.2296v4.6369h-9.2296v9.7619h-5.7773z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$logo-ink",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "KRCPm",
"x": 0,
"y": 0,
"name": "Letter 2",
"geometry": "M38.904 33.4692c-1.5734 0-2.9825-0.2556-4.2272-0.767-1.2213-0.5113-2.2546-1.2086-3.1-2.0918-0.8455-0.8832-1.4913-1.8943-1.9375-3.0332-0.4228-1.1389-0.6341-2.3359-0.6341-3.591 0-1.2783 0.2113-2.4869 0.6341-3.6258 0.4462-1.1389 1.092-2.15 1.9375-3.0332 0.8454-0.8832 1.8787-1.5805 3.1-2.0918 1.2447-0.5114 2.6538-0.767 4.2272-0.767 1.5735 0 2.9709 0.2556 4.1921 0.767 1.2212 0.5113 2.2545 1.2086 3.1 2.0918 0.8455 0.8832 1.4913 1.8943 1.9375 3.0332 0.4462 1.1389 0.6693 2.3475 0.6693 3.6258 0 1.2551-0.2231 2.4521-0.6693 3.591-0.4462 1.1389-1.092 2.15-1.9375 3.0332-0.8455 0.8832-1.8788 1.5805-3.1 2.0918-1.2212 0.5114-2.6186 0.767-4.1921 0.767z m-4.1216-9.483c0 0.953 0.1762 1.7897 0.5285 2.5102 0.3757 0.7206 0.8689 1.2784 1.4795 1.6735 0.6106 0.3951 1.3152 0.5927 2.1136 0.5927 0.775 0 1.4678-0.1976 2.0785-0.5927 0.634-0.4184 1.1272-0.9878 1.4795-1.7083 0.3523-0.7205 0.5284-1.5457 0.5284-2.4754 0-0.9529-0.1761-1.7896-0.5284-2.5102-0.3523-0.7205-0.8455-1.2783-1.4795-1.6734-0.6107-0.3952-1.3035-0.5927-2.0785-0.5927-0.7984 0-1.503 0.1975-2.1136 0.5927-0.6106 0.3951-1.1038 0.9529-1.4795 1.6734-0.3523 0.7206-0.5285 1.5573-0.5285 2.5102z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$logo-ink",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "hjuYE",
"x": 0,
"y": 0,
"name": "Letter 3",
"geometry": "M69.4233 33.1206h-5.6364v-10.2849c0-1.2086-0.2348-2.0802-0.7045-2.6148-0.4462-0.5578-1.0451-0.8367-1.7966-0.8367-0.5167 0-1.0451 0.1394-1.5852 0.4184-0.5402 0.2789-1.0334 0.6624-1.4796 1.1505-0.4227 0.4881-0.7515 1.0459-0.9864 1.6734v10.4941h-5.6363v-18.3036h5.0727v3.068c0.4697-0.7205 1.0568-1.3364 1.7614-1.8477 0.7045-0.5114 1.5147-0.8949 2.4307-1.1506 0.9159-0.2789 1.914-0.4183 2.9943-0.4183 1.1977 0 2.1606 0.2208 2.8886 0.6624 0.7515 0.4184 1.3152 0.9762 1.6909 1.6735 0.3993 0.6972 0.6576 1.4526 0.775 2.2661 0.1409 0.7903 0.2114 1.5689 0.2114 2.3359v11.7143z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$logo-ink",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "CVt6z",
"x": 0,
"y": 0,
"name": "Letter 4",
"geometry": "M81.975 33.4692c-1.5735 0-2.9826-0.2556-4.2273-0.767-1.2212-0.5113-2.2546-1.2086-3.1-2.0918-0.8455-0.8832-1.4913-1.8943-1.9375-3.0332-0.4228-1.1389-0.6341-2.3359-0.6341-3.591 0-1.2783 0.2113-2.4869 0.6341-3.6258 0.4462-1.1389 1.092-2.15 1.9375-3.0332 0.8454-0.8832 1.8788-1.5805 3.1-2.0918 1.2447-0.5114 2.6538-0.767 4.2273-0.767 1.5734 0 2.9708 0.2556 4.192 0.767 1.2212 0.5113 2.2546 1.2086 3.1 2.0918 0.8455 0.8832 1.4913 1.8943 1.9375 3.0332 0.4462 1.1389 0.6693 2.3475 0.6693 3.6258 0 1.2551-0.2231 2.4521-0.6693 3.591-0.4462 1.1389-1.092 2.15-1.9375 3.0332-0.8454 0.8832-1.8788 1.5805-3.1 2.0918-1.2212 0.5114-2.6186 0.767-4.192 0.767z m-4.1216-9.483c0 0.953 0.1761 1.7897 0.5284 2.5102 0.3757 0.7206 0.8689 1.2784 1.4795 1.6735 0.6106 0.3951 1.3152 0.5927 2.1137 0.5927 0.775 0 1.4678-0.1976 2.0784-0.5927 0.6341-0.4184 1.1272-0.9878 1.4795-1.7083 0.3523-0.7205 0.5284-1.5457 0.5284-2.4754 0-0.9529-0.1761-1.7896-0.5284-2.5102-0.3523-0.7205-0.8454-1.2783-1.4795-1.6734-0.6106-0.3952-1.3034-0.5927-2.0784-0.5927-0.7985 0-1.5031 0.1975-2.1137 0.5927-0.6106 0.3951-1.1038 0.9529-1.4795 1.6734-0.3523 0.7206-0.5284 1.5573-0.5284 2.5102z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$logo-ink",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "D1zqa",
"x": 0,
"y": 0,
"name": "Letter 5",
"geometry": "M101.75 33.4692c-1.574 0-3.1119-0.2556-4.6149-0.767-1.503-0.5113-2.7712-1.2667-3.8046-2.2661l1.9375-3.5213c1.1273 0.8135 2.2194 1.4294 3.2762 1.8478 1.0803 0.4184 2.0898 0.6275 3.0298 0.6275 0.728 0 1.291-0.1162 1.691-0.3486 0.399-0.2324 0.599-0.5927 0.599-1.0808 0-0.3486-0.118-0.6159-0.353-0.8018-0.235-0.2092-0.599-0.3952-1.092-0.5579-0.47-0.1627-1.057-0.337-1.761-0.5229-1.4093-0.4649-2.5835-0.9181-3.5229-1.3597-0.9394-0.4416-1.6439-0.9762-2.1136-1.6038-0.4697-0.6508-0.7046-1.4875-0.7046-2.5102 0-1.2318 0.3053-2.301 0.9159-3.2075 0.6341-0.9297 1.5265-1.6502 2.6773-2.1615 1.1508-0.5114 2.5249-0.767 4.1219-0.767 1.268 0 2.501 0.1975 3.699 0.5927 1.221 0.3951 2.36 1.0575 3.417 1.9872l-2.184 3.4864c-1.057-0.7205-1.997-1.2435-2.819-1.5689-0.822-0.3254-1.62-0.4881-2.395-0.4881-0.399 0-0.763 0.0465-1.092 0.1395-0.329 0.093-0.599 0.2557-0.8104 0.4881-0.1879 0.2092-0.2818 0.4881-0.2818 0.8367 0 0.3487 0.0939 0.6276 0.2818 0.8368 0.2114 0.2091 0.5284 0.3951 0.9514 0.5578 0.446 0.1394 0.998 0.3137 1.655 0.5229 1.527 0.4416 2.795 0.8949 3.805 1.3597 1.01 0.4416 1.761 0.9995 2.255 1.6735 0.516 0.6508 0.775 1.5224 0.775 2.6148 0 1.8594-0.682 3.3237-2.044 4.3928-1.338 1.046-3.17 1.5689-5.495 1.5689z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$logo-ink",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "k1whzb",
"x": 0,
"y": 0,
"name": "Letter 6",
"geometry": "M124.019 32.1444c-0.516 0.2092-1.092 0.4184-1.726 0.6275-0.61 0.2092-1.256 0.3719-1.937 0.4881-0.681 0.1395-1.351 0.2092-2.008 0.2092-0.94 0-1.809-0.1511-2.607-0.4532-0.775-0.3254-1.397-0.8484-1.867-1.5689-0.446-0.7205-0.669-1.6735-0.669-2.8588v-9.5527h-2.361v-4.2186h2.361v-5.82226h5.636v5.82226h3.769v4.2186h-3.769v7.6352c0 0.6043 0.153 1.0459 0.458 1.3248 0.305 0.2557 0.693 0.3835 1.162 0.3835 0.4 0 0.822-0.0697 1.269-0.2092 0.469-0.1394 0.869-0.2905 1.197-0.4532l1.092 4.4277z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$logo-ink",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "wc1RL",
"x": 0,
"y": 0,
"name": "Letter 7",
"geometry": "M134.851 33.4692c-1.573 0-2.971-0.244-4.192-0.7321-1.221-0.5114-2.266-1.197-3.135-2.057-0.846-0.86-1.491-1.8478-1.938-2.9634-0.446-1.1389-0.669-2.3243-0.669-3.5561 0-1.7665 0.388-3.3702 1.163-4.8113 0.798-1.4643 1.937-2.638 3.417-3.5212 1.479-0.9065 3.264-1.3597 5.354-1.3597 2.09 0 3.863 0.4416 5.32 1.3248 1.479 0.8832 2.606 2.0454 3.381 3.4864 0.775 1.4178 1.163 2.9634 1.163 4.6369 0 0.3254-0.024 0.6508-0.071 0.9762-0.023 0.3022-0.047 0.5694-0.07 0.8019h-13.668c0.07 0.8135 0.293 1.4991 0.669 2.0569 0.399 0.5579 0.904 0.9879 1.515 1.29 0.61 0.2789 1.256 0.4184 1.937 0.4184 0.846 0 1.633-0.1976 2.361-0.5927 0.751-0.3951 1.268-0.9297 1.55-1.6038l4.79 1.3249c-0.469 0.9529-1.139 1.8013-2.007 2.545-0.846 0.7206-1.856 1.29-3.03 1.7084-1.151 0.4183-2.431 0.6275-3.84 0.6275z m-4.086-11.1913h8.032c-0.094-0.767-0.317-1.4294-0.67-1.9872-0.352-0.5811-0.822-1.0227-1.409-1.3249-0.587-0.3254-1.233-0.4881-1.937-0.4881-0.728 0-1.386 0.1627-1.973 0.4881-0.564 0.3022-1.022 0.7438-1.374 1.3249-0.352 0.5578-0.575 1.2202-0.669 1.9872z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$logo-ink",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "l9juIO",
"x": 0,
"y": 0,
"name": "Letter 8",
"geometry": "M159 19.5934c-1.362 0-2.595 0.2208-3.699 0.6624-1.104 0.4184-1.902 1.0459-2.395 1.8826v10.9822h-5.637v-18.3036h5.179v3.6956c0.634-1.2319 1.456-2.1964 2.466-2.8937 1.01-0.6973 2.066-1.0576 3.17-1.0808 0.258 0 0.446 0 0.564 0 0.141 0 0.258 0.0116 0.352 0.0349v5.0204z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$logo-ink",
"width": 124,
"height": 32
},
{
"type": "frame",
"id": "DP2XQ",
"x": 0,
"y": 0,
"name": "Pill",
"clip": true,
"width": 81.66218867924529,
"height": 32,
"layout": "none",
"children": [
{
"type": "path",
"id": "wtnJK",
"x": 0,
"y": 0,
"name": "Pill shape",
"geometry": "M104.712 18.3036c0-10.10881-8.1961-18.3036-18.3064-18.3036h-68.0995c-10.11027 0-18.30628 8.19479-18.30628 18.3036v22.6964h86.40578c10.1103 0 18.3064-8.1948 18.3064-18.3036v-4.3928z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$fonoster-04",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "xnCBH",
"x": 0,
"y": 0,
"name": "Letter on pill 1",
"geometry": "M11.5654 33.1206v-24.75341h16.9796v5.02041h-11.2023v5.3342h9.2296v4.6369h-9.2296v9.7619h-5.7773z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$fonoster-06",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "SDjbD",
"x": 0,
"y": 0,
"name": "Letter on pill 2",
"geometry": "M38.904 33.4692c-1.5734 0-2.9825-0.2556-4.2272-0.767-1.2213-0.5113-2.2546-1.2086-3.1-2.0918-0.8455-0.8832-1.4913-1.8943-1.9375-3.0332-0.4228-1.1389-0.6341-2.3359-0.6341-3.591 0-1.2783 0.2113-2.4869 0.6341-3.6258 0.4462-1.1389 1.092-2.15 1.9375-3.0332 0.8454-0.8832 1.8787-1.5805 3.1-2.0918 1.2447-0.5114 2.6538-0.767 4.2272-0.767 1.5735 0 2.9709 0.2556 4.1921 0.767 1.2212 0.5113 2.2545 1.2086 3.1 2.0918 0.8455 0.8832 1.4913 1.8943 1.9375 3.0332 0.4462 1.1389 0.6693 2.3475 0.6693 3.6258 0 1.2551-0.2231 2.4521-0.6693 3.591-0.4462 1.1389-1.092 2.15-1.9375 3.0332-0.8455 0.8832-1.8788 1.5805-3.1 2.0918-1.2212 0.5114-2.6186 0.767-4.1921 0.767z m-4.1216-9.483c0 0.953 0.1762 1.7897 0.5285 2.5102 0.3757 0.7206 0.8689 1.2784 1.4795 1.6735 0.6106 0.3951 1.3152 0.5927 2.1136 0.5927 0.775 0 1.4678-0.1976 2.0785-0.5927 0.634-0.4184 1.1272-0.9878 1.4795-1.7083 0.3523-0.7205 0.5284-1.5457 0.5284-2.4754 0-0.9529-0.1761-1.7896-0.5284-2.5102-0.3523-0.7205-0.8455-1.2783-1.4795-1.6734-0.6107-0.3952-1.3035-0.5927-2.0785-0.5927-0.7984 0-1.503 0.1975-2.1136 0.5927-0.6106 0.3951-1.1038 0.9529-1.4795 1.6734-0.3523 0.7206-0.5285 1.5573-0.5285 2.5102z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$fonoster-06",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "WC5fy",
"x": 0,
"y": 0,
"name": "Letter on pill 3",
"geometry": "M69.4233 33.1206h-5.6364v-10.2849c0-1.2086-0.2348-2.0802-0.7045-2.6148-0.4462-0.5578-1.0451-0.8367-1.7966-0.8367-0.5167 0-1.0451 0.1394-1.5852 0.4184-0.5402 0.2789-1.0334 0.6624-1.4796 1.1505-0.4227 0.4881-0.7515 1.0459-0.9864 1.6734v10.4941h-5.6363v-18.3036h5.0727v3.068c0.4697-0.7205 1.0568-1.3364 1.7614-1.8477 0.7045-0.5114 1.5147-0.8949 2.4307-1.1506 0.9159-0.2789 1.914-0.4183 2.9943-0.4183 1.1977 0 2.1606 0.2208 2.8886 0.6624 0.7515 0.4184 1.3152 0.9762 1.6909 1.6735 0.3993 0.6972 0.6576 1.4526 0.775 2.2661 0.1409 0.7903 0.2114 1.5689 0.2114 2.3359v11.7143z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$fonoster-06",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "X7NyDr",
"x": 0,
"y": 0,
"name": "Letter on pill 4",
"geometry": "M81.975 33.4692c-1.5735 0-2.9826-0.2556-4.2273-0.767-1.2212-0.5113-2.2546-1.2086-3.1-2.0918-0.8455-0.8832-1.4913-1.8943-1.9375-3.0332-0.4228-1.1389-0.6341-2.3359-0.6341-3.591 0-1.2783 0.2113-2.4869 0.6341-3.6258 0.4462-1.1389 1.092-2.15 1.9375-3.0332 0.8454-0.8832 1.8788-1.5805 3.1-2.0918 1.2447-0.5114 2.6538-0.767 4.2273-0.767 1.5734 0 2.9708 0.2556 4.192 0.767 1.2212 0.5113 2.2546 1.2086 3.1 2.0918 0.8455 0.8832 1.4913 1.8943 1.9375 3.0332 0.4462 1.1389 0.6693 2.3475 0.6693 3.6258 0 1.2551-0.2231 2.4521-0.6693 3.591-0.4462 1.1389-1.092 2.15-1.9375 3.0332-0.8454 0.8832-1.8788 1.5805-3.1 2.0918-1.2212 0.5114-2.6186 0.767-4.192 0.767z m-4.1216-9.483c0 0.953 0.1761 1.7897 0.5284 2.5102 0.3757 0.7206 0.8689 1.2784 1.4795 1.6735 0.6106 0.3951 1.3152 0.5927 2.1137 0.5927 0.775 0 1.4678-0.1976 2.0784-0.5927 0.6341-0.4184 1.1272-0.9878 1.4795-1.7083 0.3523-0.7205 0.5284-1.5457 0.5284-2.4754 0-0.9529-0.1761-1.7896-0.5284-2.5102-0.3523-0.7205-0.8454-1.2783-1.4795-1.6734-0.6106-0.3952-1.3034-0.5927-2.0784-0.5927-0.7985 0-1.5031 0.1975-2.1137 0.5927-0.6106 0.3951-1.1038 0.9529-1.4795 1.6734-0.3523 0.7206-0.5284 1.5573-0.5284 2.5102z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$fonoster-06",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "yuG5Y",
"x": 0,
"y": 0,
"name": "Letter on pill 5",
"geometry": "M101.75 33.4692c-1.574 0-3.1119-0.2556-4.6149-0.767-1.503-0.5113-2.7712-1.2667-3.8046-2.2661l1.9375-3.5213c1.1273 0.8135 2.2194 1.4294 3.2762 1.8478 1.0803 0.4184 2.0898 0.6275 3.0298 0.6275 0.728 0 1.291-0.1162 1.691-0.3486 0.399-0.2324 0.599-0.5927 0.599-1.0808 0-0.3486-0.118-0.6159-0.353-0.8018-0.235-0.2092-0.599-0.3952-1.092-0.5579-0.47-0.1627-1.057-0.337-1.761-0.5229-1.4093-0.4649-2.5835-0.9181-3.5229-1.3597-0.9394-0.4416-1.6439-0.9762-2.1136-1.6038-0.4697-0.6508-0.7046-1.4875-0.7046-2.5102 0-1.2318 0.3053-2.301 0.9159-3.2075 0.6341-0.9297 1.5265-1.6502 2.6773-2.1615 1.1508-0.5114 2.5249-0.767 4.1219-0.767 1.268 0 2.501 0.1975 3.699 0.5927 1.221 0.3951 2.36 1.0575 3.417 1.9872l-2.184 3.4864c-1.057-0.7205-1.997-1.2435-2.819-1.5689-0.822-0.3254-1.62-0.4881-2.395-0.4881-0.399 0-0.763 0.0465-1.092 0.1395-0.329 0.093-0.599 0.2557-0.8104 0.4881-0.1879 0.2092-0.2818 0.4881-0.2818 0.8367 0 0.3487 0.0939 0.6276 0.2818 0.8368 0.2114 0.2091 0.5284 0.3951 0.9514 0.5578 0.446 0.1394 0.998 0.3137 1.655 0.5229 1.527 0.4416 2.795 0.8949 3.805 1.3597 1.01 0.4416 1.761 0.9995 2.255 1.6735 0.516 0.6508 0.775 1.5224 0.775 2.6148 0 1.8594-0.682 3.3237-2.044 4.3928-1.338 1.046-3.17 1.5689-5.495 1.5689z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$fonoster-06",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "h64cb",
"x": 0,
"y": 0,
"name": "Letter on pill 6",
"geometry": "M124.019 32.1444c-0.516 0.2092-1.092 0.4184-1.726 0.6275-0.61 0.2092-1.256 0.3719-1.937 0.4881-0.681 0.1395-1.351 0.2092-2.008 0.2092-0.94 0-1.809-0.1511-2.607-0.4532-0.775-0.3254-1.397-0.8484-1.867-1.5689-0.446-0.7205-0.669-1.6735-0.669-2.8588v-9.5527h-2.361v-4.2186h2.361v-5.82226h5.636v5.82226h3.769v4.2186h-3.769v7.6352c0 0.6043 0.153 1.0459 0.458 1.3248 0.305 0.2557 0.693 0.3835 1.162 0.3835 0.4 0 0.822-0.0697 1.269-0.2092 0.469-0.1394 0.869-0.2905 1.197-0.4532l1.092 4.4277z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$fonoster-06",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "O2iaO",
"x": 0,
"y": 0,
"name": "Letter on pill 7",
"geometry": "M134.851 33.4692c-1.573 0-2.971-0.244-4.192-0.7321-1.221-0.5114-2.266-1.197-3.135-2.057-0.846-0.86-1.491-1.8478-1.938-2.9634-0.446-1.1389-0.669-2.3243-0.669-3.5561 0-1.7665 0.388-3.3702 1.163-4.8113 0.798-1.4643 1.937-2.638 3.417-3.5212 1.479-0.9065 3.264-1.3597 5.354-1.3597 2.09 0 3.863 0.4416 5.32 1.3248 1.479 0.8832 2.606 2.0454 3.381 3.4864 0.775 1.4178 1.163 2.9634 1.163 4.6369 0 0.3254-0.024 0.6508-0.071 0.9762-0.023 0.3022-0.047 0.5694-0.07 0.8019h-13.668c0.07 0.8135 0.293 1.4991 0.669 2.0569 0.399 0.5579 0.904 0.9879 1.515 1.29 0.61 0.2789 1.256 0.4184 1.937 0.4184 0.846 0 1.633-0.1976 2.361-0.5927 0.751-0.3951 1.268-0.9297 1.55-1.6038l4.79 1.3249c-0.469 0.9529-1.139 1.8013-2.007 2.545-0.846 0.7206-1.856 1.29-3.03 1.7084-1.151 0.4183-2.431 0.6275-3.84 0.6275z m-4.086-11.1913h8.032c-0.094-0.767-0.317-1.4294-0.67-1.9872-0.352-0.5811-0.822-1.0227-1.409-1.3249-0.587-0.3254-1.233-0.4881-1.937-0.4881-0.728 0-1.386 0.1627-1.973 0.4881-0.564 0.3022-1.022 0.7438-1.374 1.3249-0.352 0.5578-0.575 1.2202-0.669 1.9872z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$fonoster-06",
"width": 124,
"height": 32
},
{
"type": "path",
"id": "W7fqxO",
"x": 0,
"y": 0,
"name": "Letter on pill 8",
"geometry": "M159 19.5934c-1.362 0-2.595 0.2208-3.699 0.6624-1.104 0.4184-1.902 1.0459-2.395 1.8826v10.9822h-5.637v-18.3036h5.179v3.6956c0.634-1.2319 1.456-2.1964 2.466-2.8937 1.01-0.6973 2.066-1.0576 3.17-1.0808 0.258 0 0.446 0 0.564 0 0.141 0 0.258 0.0116 0.352 0.0349v5.0204z",
"viewBox": [
0,
0,
159,
41
],
"fill": "$fonoster-06",
"width": 124,
"height": 32
}
]
}
]
},
{
"type": "frame",
"id": "arzMH",
"name": "Light preview",
"theme": {
"mode": "light"
},
"fill": "$background",
"padding": 24,
"children": [
{
"id": "b5h0v",
"type": "ref",
"ref": "S4FXr",
"name": "Logo (light)"
}
]
},
{
"type": "frame",
"id": "Gai4K",
"name": "Logo/Mark",
"reusable": true,
"width": 24,
"height": 24,
"layout": "none",
"children": [
{
"type": "path",
"id": "k0kTM",
"x": 0,
"y": 0,
"name": "Bubble",
"geometry": "M0 8a8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8h-8z",
"viewBox": [
0,
0,
16,
16
],
"fill": "$accent",
"width": 24,
"height": 24
}
]
}
]
},
{
"type": "frame",
"id": "aqOKa",
"x": 3200,
"y": -280,
"name": "Dashboard/App shell",
"reusable": true,
"clip": true,
"width": 1440,
"height": 960,
"fill": "$--background",
"children": [
{
"id": "x8qZf",
"type": "ref",
"ref": "d5ZTS",
"name": "Sidebar",
"width": 248,
"height": "fill_container",
"stroke": "$--sidebar-border",
"strokeWidth": {
"right": 1
},
"strokeAlignment": "inner",
"descendants": {
"G3EQQ": {
"type": "frame",
"id": "y42cj",
"name": "Sidebar Header",
"width": "fill_container",
"stroke": "$--sidebar-border",
"strokeWidth": {
"bottom": 1
},
"strokeAlignment": "inner",
"layout": "vertical",
"gap": 16,
"padding": [
24,
20,
20,
20
],
"children": [
{
"type": "frame",
"id": "G5yzu",
"name": "Brand row",
"width": "fill_container",
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"id": "p9Bbm",
"type": "ref",
"ref": "S4FXr",
"name": "Sidebar Logo"
},
{
"type": "frame",
"id": "ICrqs",
"name": "Collapse button",
"width": 32,
"height": 32,
"cornerRadius": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "S2cI2",
"name": "PanelLeftClose",
"width": 18,
"height": 18,
"icon": "panel-left-close",
"library": "lucide",
"fill": "$--sidebar-foreground"
}
]
}
]
},
{
"type": "frame",
"id": "JtwAi",
"name": "Workspace switcher",
"width": "fill_container",
"height": 40,
"cornerRadius": "$--radius-control",
"stroke": "$--sidebar-border",
"strokeWidth": 1,
"strokeAlignment": "inner",
"gap": 10,
"padding": [
0,
10
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "K8CBM",
"name": "Workspace mark",
"width": 24,
"height": 24,
"fill": "$--sidebar-accent",
"cornerRadius": 6,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "v7fxDJ",
"name": "Initials",
"fill": "$--sidebar-accent-foreground",
"content": "AS",
"fontFamily": "$--font-primary",
"fontSize": 10,
"fontWeight": "600"
}
]
},
{
"type": "text",
"id": "QEd3j",
"name": "Workspace name",
"fill": "$--sidebar-accent-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Acme Support",
"fontFamily": "$--font-secondary",
"fontSize": 14,
"fontWeight": "500"
},
{
"type": "icon",
"id": "i4WgM",
"name": "Chevron",
"width": 14,
"height": 14,
"icon": "chevrons-up-down",
"library": "lucide",
"fill": "$--sidebar-foreground"
}
]
}
]
},
"NvL81": {
"gap": 2,
"padding": [
4,
12
],
"children": [
{
"id": "jzgJQ",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Overview",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "space_dashboard",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Overview",
"fontSize": 14
}
}
},
{
"id": "itw6f",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Agents",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "smart_toy",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Agents",
"fontSize": 14
}
}
},
{
"id": "fZcuM",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Streams",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "code",
"width": 20,
"height": 20,
"library": "Material Symbols Sharp"
},
"TXca3": {
"content": "Apps",
"fontSize": 14
}
}
},
{
"id": "u1BV9C",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Calls",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "call_log",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Calls",
"fontSize": 14
}
}
},
{
"id": "X5p5mS",
"type": "ref",
"ref": "h12kK",
"name": "Section SIP network",
"width": "fill_container",
"padding": [
18,
12,
6,
12
],
"descendants": {
"b8JIN": {
"content": "SIP NETWORK",
"fontSize": 11,
"letterSpacing": 1
}
}
},
{
"id": "t1cKU",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Numbers",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "dialpad",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Numbers",
"fontSize": 14
}
}
},
{
"id": "LwoOt",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Trunks",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "lan",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Trunks",
"fontSize": 14
}
}
},
{
"id": "igKVO",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Domains",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "dns",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Domains",
"fontSize": 14
}
}
},
{
"id": "DTGY1",
"type": "ref",
"ref": "X6nwq",
"name": "Nav SIP agents",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "headset_mic",
"width": 20,
"height": 20
},
"TXca3": {
"content": "SIP agents",
"fontSize": 14
}
}
},
{
"id": "ctmor",
"type": "ref",
"ref": "X6nwq",
"name": "Nav ACLs",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "shield",
"width": 20,
"height": 20
},
"TXca3": {
"content": "ACLs",
"fontSize": 14
}
}
},
{
"id": "c8DU7H",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Credentials",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "badge",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Credentials",
"fontSize": 14
}
}
},
{
"id": "Guiot",
"type": "ref",
"ref": "h12kK",
"name": "Section Workspace",
"width": "fill_container",
"padding": [
18,
12,
6,
12
],
"descendants": {
"b8JIN": {
"content": "WORKSPACE",
"fontSize": 11,
"letterSpacing": 1
}
}
},
{
"id": "P3kyM",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Webhooks",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "webhook",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Webhooks",
"fontSize": 14
}
}
},
{
"id": "WLfgQ",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Vendor keys",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "vpn_key",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Vendor keys",
"fontSize": 14
}
}
},
{
"id": "RIyzq",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Secrets",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "lock",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Secrets",
"fontSize": 14
}
}
},
{
"id": "O8FwBY",
"type": "ref",
"ref": "X6nwq",
"name": "Nav API keys",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "key",
"width": 20,
"height": 20
},
"TXca3": {
"content": "API keys",
"fontSize": 14
}
}
},
{
"id": "g6Q2sr",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Usage",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "data_usage",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Usage",
"fontSize": 14
}
}
},
{
"id": "uRkwa",
"type": "ref",
"ref": "X6nwq",
"name": "Nav Settings",
"width": "fill_container",
"padding": [
7,
12
],
"gap": 12,
"cornerRadius": "$--radius-control",
"descendants": {
"xGT5g": {
"icon": "settings",
"width": 20,
"height": 20
},
"TXca3": {
"content": "Settings",
"fontSize": 14
}
}
}
]
},
"3F5am": {
"padding": [
16,
20
]
},
"uiUgV": {
"content": "Pedro Sanders",
"fontSize": 14
},
"eUcmA": {
"content": "Fonoster Inc · Pro",
"fontSize": 12,
"fill": "$--muted-foreground"
}
}
},
{
"type": "frame",
"id": "AaeZA",
"name": "Main",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "o1UV4",
"name": "Topbar",
"width": "fill_container",
"height": 56,
"stroke": "$--border",
"strokeWidth": {
"bottom": 1
},
"strokeAlignment": "inner",
"padding": [
0,
32
],
"justifyContent": "end",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "aJP6M",
"name": "Top actions",
"gap": 16,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "NfVJG",
"name": "Docs",
"fill": "$--muted-foreground",
"content": "Docs",
"fontFamily": "$--font-secondary",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "text",
"id": "tIDWt",
"name": "Support",
"fill": "$--muted-foreground",
"content": "Support",
"fontFamily": "$--font-secondary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "gOtUO",
"name": "Content",
"slot": [],
"width": "fill_container",
"height": "fill_container",
"layout": "vertical"
}
]
}
]
},
{
"type": "frame",
"id": "Z4xcv",
"x": 3200,
"y": 820,
"name": "Canvas/Flow label",
"reusable": true,
"width": 1440,
"stroke": "$--border",
"strokeWidth": {
"bottom": 1
},
"strokeAlignment": "inner",
"layout": "vertical",
"gap": 10,
"padding": [
0,
0,
24,
0
],
"children": [
{
"type": "frame",
"id": "TbJ7S",
"name": "Title row",
"gap": 14,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "E87RGF",
"name": "Title",
"fill": "$--foreground",
"content": "Agents · List",
"fontFamily": "$--font-secondary",
"fontSize": 40,
"fontWeight": "600"
},
{
"type": "frame",
"id": "e1612S",
"name": "Status",
"fill": "$--color-warning",
"cornerRadius": "$--radius-pill",
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "G8OhZ",
"name": "Status text",
"fill": "$--color-warning-foreground",
"content": "Draft",
"fontFamily": "$--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "text",
"id": "SH1DB",
"name": "Route",
"fill": "$--muted-foreground",
"content": "/workspaces/:workspaceId/agents",
"fontFamily": "$--font-primary",
"fontSize": 16,
"fontWeight": "normal"
},
{
"type": "text",
"id": "z4SKuT",
"name": "Notes",
"fill": "$--muted-foreground",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "What this flow covers and open questions.",
"fontFamily": "$--font-secondary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Gagxq",
"x": 4740,
"y": -280,
"name": "Sidebar/Collapsed",
"reusable": true,
"width": 64,
"height": 960,
"fill": "$--sidebar",
"stroke": "$--sidebar-border",
"strokeWidth": {
"right": 1
},
"strokeAlignment": "inner",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "mftjA",
"name": "Sidebar Header",
"width": "fill_container",
"stroke": "$--sidebar-border",
"strokeWidth": {
"bottom": 1
},
"strokeAlignment": "inner",
"layout": "vertical",
"gap": 12,
"padding": [
16,
0
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Q2k8v",
"name": "Expand button",
"width": 32,
"height": 32,
"cornerRadius": 8,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "KJsfJ",
"name": "PanelLeftOpen",
"width": 18,
"height": 18,
"icon": "panel-left-open",
"library": "lucide",
"fill": "$--sidebar-foreground"
}
]
},
{
"id": "GUSIZ",
"type": "ref",
"ref": "Gai4K",
"name": "Logo mark",
"width": 24,
"height": 24
},
{
"type": "frame",
"id": "H201kX",
"name": "Workspace switcher",
"width": 40,
"height": 40,
"fill": "$--sidebar-accent",
"cornerRadius": "$--radius-control",
"stroke": "$--sidebar-border",
"strokeWidth": 1,
"strokeAlignment": "inner",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "PLUTP",
"name": "Initials",
"fill": "$--sidebar-accent-foreground",
"content": "AS",
"fontFamily": "$--font-primary",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "kEr9s",
"name": "Sidebar Content",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"gap": 2,
"padding": [
12,
0
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "QE9at",
"name": "Nav Overview",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "CmfLo",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "space_dashboard",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "hmcAY",
"name": "Nav Agents",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "p3GsN",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "smart_toy",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "IG2uz",
"name": "Nav Apps",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "w0Wszd",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "code",
"library": "Material Symbols Sharp",
"weight": 100,
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "Lt4g0",
"name": "Nav Calls",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "VjcsT",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "call_log",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "DGGXm",
"name": "Section SIP network",
"width": 40,
"height": 17,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "BVoUT",
"name": "Divider",
"fill": "$--sidebar-border",
"width": 24,
"height": 1
}
]
},
{
"type": "frame",
"id": "KnTxs",
"name": "Nav Numbers",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "T5NZsX",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "dialpad",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "VZybt",
"name": "Nav Trunks",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "z1kKZ",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "lan",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "r3UaK",
"name": "Nav Domains",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "a3mHQ",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "dns",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "zx2gN",
"name": "Nav SIP agents",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "a3K9t",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "headset_mic",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "cXxIW",
"name": "Nav ACLs",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "giq0u",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "shield",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "LidV9",
"name": "Nav Credentials",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "HKCPW",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "badge",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "PXdot",
"name": "Section Workspace",
"width": 40,
"height": 17,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "DW53H",
"name": "Divider",
"fill": "$--sidebar-border",
"width": 24,
"height": 1
}
]
},
{
"type": "frame",
"id": "h7hPNh",
"name": "Nav Webhooks",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "a1IXD",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "webhook",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "YJUzX",
"name": "Nav Vendor keys",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "pJ0gH",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "vpn_key",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "JfA28",
"name": "Nav Secrets",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "OAX2L",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "lock",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "UTlsi",
"name": "Nav API keys",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "G9ri6",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "key",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
},
{
"type": "frame",
"id": "TOhiv",
"name": "Nav Settings",
"width": 40,
"height": 40,
"cornerRadius": "$--radius-control",
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "w5i0f",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "settings",
"library": "Material Symbols Sharp",
"fill": "$--sidebar-foreground"
}
]
}
]
},
{
"type": "frame",
"id": "vcfH6",
"name": "Sidebar Footer",
"width": "fill_container",
"stroke": "$--sidebar-border",
"strokeWidth": {
"top": 1
},
"strokeAlignment": "inner",
"padding": [
16,
0
],
"justifyContent": "center",
"children": [
{
"type": "frame",
"id": "s1Xb3k",
"name": "Avatar",
"width": 32,
"height": 32,
"fill": "$--sidebar-accent",
"cornerRadius": 16,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "Jcpwn",
"name": "Initials",
"fill": "$--sidebar-accent-foreground",
"content": "PS",
"fontFamily": "$--font-secondary",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "RMA6d",
"x": 4904,
"y": -280,
"name": "Dashboard/App shell · Collapsed nav",
"reusable": true,
"clip": true,
"width": 1440,
"height": 960,
"fill": "$--background",
"children": [
{
"id": "b7zgMI",
"type": "ref",
"ref": "Gagxq",
"name": "Sidebar",
"height": "fill_container",
"y": 0
},
{
"type": "frame",
"id": "Y5zOdw",
"name": "Main",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "c0Mh7B",
"name": "Topbar",
"width": "fill_container",
"height": 56,
"stroke": "$--border",
"strokeWidth": {
"bottom": 1
},
"strokeAlignment": "inner",
"padding": [
0,
32
],
"justifyContent": "end",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "UWve9",
"name": "Top actions",
"gap": 16,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "hfVg1",
"name": "Docs",
"fill": "$--muted-foreground",
"content": "Docs",
"fontFamily": "$--font-secondary",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "text",
"id": "W2Rq8R",
"name": "Support",
"fill": "$--muted-foreground",
"content": "Support",
"fontFamily": "$--font-secondary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "n8QIar",
"name": "Content",
"slot": [],
"width": "fill_container",
"height": "fill_container",
"layout": "vertical"
}
]
}
]
}
],
"themes": {
"mode": [
"light",
"dark"
]
},
"variables": {
"base-01": {
"type": "color",
"value": "#FFFFFF"
},
"base-02": {
"type": "color",
"value": "#F4F4F4"
},
"base-03": {
"type": "color",
"value": "#E8E8E8"
},
"base-04": {
"type": "color",
"value": "#C2C2C2"
},
"base-05": {
"type": "color",
"value": "#8D8D8D"
},
"base-06": {
"type": "color",
"value": "#555555"
},
"base-07": {
"type": "color",
"value": "#333333"
},
"base-08": {
"type": "color",
"value": "#252525"
},
"fonoster-01": {
"type": "color",
"value": "#FFFFFF"
},
"fonoster-02": {
"type": "color",
"value": "#E6FFF5"
},
"fonoster-03": {
"type": "color",
"value": "#CCEFE1"
},
"fonoster-04": {
"type": "color",
"value": "#39E19E"
},
"fonoster-05": {
"type": "color",
"value": "#008751"
},
"fonoster-06": {
"type": "color",
"value": "#053204"
},
"fonoster-07": {
"type": "color",
"value": "#011900"
},
"neutral-01": {
"type": "color",
"value": [
{
"value": "$base-08",
"theme": {
"mode": "light"
}
},
{
"value": "$base-01",
"theme": {
"mode": "dark"
}
}
]
},
"neutral-02": {
"type": "color",
"value": [
{
"value": "$base-07",
"theme": {
"mode": "light"
}
},
{
"value": "$base-02",
"theme": {
"mode": "dark"
}
}
]
},
"neutral-03": {
"type": "color",
"value": [
{
"value": "$base-06",
"theme": {
"mode": "light"
}
},
{
"value": "$base-03",
"theme": {
"mode": "dark"
}
}
]
},
"neutral-04": {
"type": "color",
"value": [
{
"value": "$base-05",
"theme": {
"mode": "light"
}
},
{
"value": "$base-04",
"theme": {
"mode": "dark"
}
}
]
},
"neutral-05": {
"type": "color",
"value": [
{
"value": "$base-04",
"theme": {
"mode": "light"
}
},
{
"value": "$base-05",
"theme": {
"mode": "dark"
}
}
]
},
"neutral-06": {
"type": "color",
"value": [
{
"value": "$base-03",
"theme": {
"mode": "light"
}
},
{
"value": "$base-06",
"theme": {
"mode": "dark"
}
}
]
},
"neutral-07": {
"type": "color",
"value": [
{
"value": "$base-02",
"theme": {
"mode": "light"
}
},
{
"value": "$base-07",
"theme": {
"mode": "dark"
}
}
]
},
"neutral-08": {
"type": "color",
"value": [
{
"value": "$base-01",
"theme": {
"mode": "light"
}
},
{
"value": "$base-08",
"theme": {
"mode": "dark"
}
}
]
},
"brand-01": {
"type": "color",
"value": [
{
"value": "$fonoster-01",
"theme": {
"mode": "light"
}
},
{
"value": "$fonoster-07",
"theme": {
"mode": "dark"
}
}
]
},
"brand-02": {
"type": "color",
"value": [
{
"value": "$fonoster-02",
"theme": {
"mode": "light"
}
},
{
"value": "$fonoster-06",
"theme": {
"mode": "dark"
}
}
]
},
"brand-03": {
"type": "color",
"value": [
{
"value": "$fonoster-03",
"theme": {
"mode": "light"
}
},
{
"value": "$fonoster-05",
"theme": {
"mode": "dark"
}
}
]
},
"brand-04": {
"type": "color",
"value": [
{
"value": "$fonoster-04",
"theme": {
"mode": "light"
}
},
{
"value": "$fonoster-04",
"theme": {
"mode": "dark"
}
}
]
},
"brand-05": {
"type": "color",
"value": [
{
"value": "$fonoster-05",
"theme": {
"mode": "light"
}
},
{
"value": "$fonoster-03",
"theme": {
"mode": "dark"
}
}
]
},
"brand-06": {
"type": "color",
"value": [
{
"value": "$fonoster-06",
"theme": {
"mode": "light"
}
},
{
"value": "$fonoster-02",
"theme": {
"mode": "dark"
}
}
]
},
"brand-07": {
"type": "color",
"value": [
{
"value": "$fonoster-07",
"theme": {
"mode": "light"
}
},
{
"value": "$fonoster-01",
"theme": {
"mode": "dark"
}
}
]
},
"background": {
"type": "color",
"value": [
{
"value": "#FFFFFF",
"theme": {
"mode": "light"
}
},
{
"value": "#181818",
"theme": {
"mode": "dark"
}
}
]
},
"bg": {
"type": "color",
"value": "$background"
},
"surface": {
"type": "color",
"value": [
{
"value": "$base-02",
"theme": {
"mode": "light"
}
},
{
"value": "#202020",
"theme": {
"mode": "dark"
}
}
]
},
"surface-raised": {
"type": "color",
"value": [
{
"value": "$base-01",
"theme": {
"mode": "light"
}
},
{
"value": "$base-08",
"theme": {
"mode": "dark"
}
}
]
},
"surface-sunken": {
"type": "color",
"value": [
{
"value": "#EFEFEF",
"theme": {
"mode": "light"
}
},
{
"value": "#121212",
"theme": {
"mode": "dark"
}
}
]
},
"border": {
"type": "color",
"value": [
{
"value": "$base-03",
"theme": {
"mode": "light"
}
},
{
"value": "$base-07",
"theme": {
"mode": "dark"
}
}
]
},
"text-primary": {
"type": "color",
"value": "$neutral-01"
},
"text-secondary": {
"type": "color",
"value": "$neutral-03"
},
"text-muted": {
"type": "color",
"value": "$neutral-04"
},
"accent": {
"type": "color",
"value": "$fonoster-04"
},
"on-accent": {
"type": "color",
"value": "$fonoster-07"
},
"accent-text": {
"type": "color",
"value": [
{
"value": "$fonoster-05",
"theme": {
"mode": "light"
}
},
{
"value": "$fonoster-04",
"theme": {
"mode": "dark"
}
}
]
},
"accent-subtle": {
"type": "color",
"value": [
{
"value": "$fonoster-02",
"theme": {
"mode": "light"
}
},
{
"value": "#0B2A1C",
"theme": {
"mode": "dark"
}
}
]
},
"success": {
"type": "color",
"value": [
{
"value": "$fonoster-05",
"theme": {
"mode": "light"
}
},
{
"value": "$fonoster-04",
"theme": {
"mode": "dark"
}
}
]
},
"warning": {
"type": "color",
"value": [
{
"value": "#B45309",
"theme": {
"mode": "light"
}
},
{
"value": "#F5A524",
"theme": {
"mode": "dark"
}
}
]
},
"danger": {
"type": "color",
"value": [
{
"value": "#D92D20",
"theme": {
"mode": "light"
}
},
{
"value": "#F97066",
"theme": {
"mode": "dark"
}
}
]
},
"info": {
"type": "color",
"value": [
{
"value": "#2563EB",
"theme": {
"mode": "light"
}
},
{
"value": "#60A5FA",
"theme": {
"mode": "dark"
}
}
]
},
"--background": {
"type": "color",
"value": [
{
"value": "$base-02",
"theme": {
"mode": "light"
}
},
{
"value": "$background",
"theme": {
"mode": "dark"
}
}
]
},
"--foreground": {
"type": "color",
"value": "$text-primary"
},
"--card": {
"type": "color",
"value": [
{
"value": "$base-01",
"theme": {
"mode": "light"
}
},
{
"value": "#202020",
"theme": {
"mode": "dark"
}
}
]
},
"--card-foreground": {
"type": "color",
"value": "$text-primary"
},
"--popover": {
"type": "color",
"value": [
{
"value": "$base-01",
"theme": {
"mode": "light"
}
},
{
"value": "#202020",
"theme": {
"mode": "dark"
}
}
]
},
"--popover-foreground": {
"type": "color",
"value": "$text-primary"
},
"--primary": {
"type": "color",
"value": "$accent"
},
"--primary-foreground": {
"type": "color",
"value": "$on-accent"
},
"--secondary": {
"type": "color",
"value": [
{
"value": "$base-03",
"theme": {
"mode": "light"
}
},
{
"value": "#2A2A2A",
"theme": {
"mode": "dark"
}
}
]
},
"--secondary-foreground": {
"type": "color",
"value": "$text-primary"
},
"--muted": {
"type": "color",
"value": [
{
"value": "$base-02",
"theme": {
"mode": "light"
}
},
{
"value": "$base-08",
"theme": {
"mode": "dark"
}
}
]
},
"--muted-foreground": {
"type": "color",
"value": [
{
"value": "$base-06",
"theme": {
"mode": "light"
}
},
{
"value": "$base-04",
"theme": {
"mode": "dark"
}
}
]
},
"--accent": {
"type": "color",
"value": [
{
"value": "$base-02",
"theme": {
"mode": "light"
}
},
{
"value": "$base-08",
"theme": {
"mode": "dark"
}
}
]
},
"--accent-foreground": {
"type": "color",
"value": "$text-primary"
},
"--destructive": {
"type": "color",
"value": "$danger"
},
"--border": {
"type": "color",
"value": "$border"
},
"--input": {
"type": "color",
"value": "$border"
},
"--ring": {
"type": "color",
"value": "$accent-text"
},
"--sidebar": {
"type": "color",
"value": "$surface-sunken"
},
"--sidebar-foreground": {
"type": "color",
"value": "$text-secondary"
},
"--sidebar-primary": {
"type": "color",
"value": "$text-primary"
},
"--sidebar-primary-foreground": {
"type": "color",
"value": "$background"
},
"--sidebar-accent": {
"type": "color",
"value": [
{
"value": "$base-03",
"theme": {
"mode": "light"
}
},
{
"value": "#2A2A2A",
"theme": {
"mode": "dark"
}
}
]
},
"--sidebar-accent-foreground": {
"type": "color",
"value": "$text-primary"
},
"--sidebar-border": {
"type": "color",
"value": "$border"
},
"--sidebar-ring": {
"type": "color",
"value": "$accent-text"
},
"--white": {
"type": "color",
"value": "#FFFFFF"
},
"--black": {
"type": "color",
"value": "#000000"
},
"--color-success": {
"type": "color",
"value": "$accent-subtle"
},
"--color-success-foreground": {
"type": "color",
"value": "$accent-text"
},
"--color-warning": {
"type": "color",
"value": [
{
"value": "#FEF3E2",
"theme": {
"mode": "light"
}
},
{
"value": "#2A1D0B",
"theme": {
"mode": "dark"
}
}
]
},
"--color-warning-foreground": {
"type": "color",
"value": "$warning"
},
"--color-error": {
"type": "color",
"value": [
{
"value": "#FDECEA",
"theme": {
"mode": "light"
}
},
{
"value": "#2A1210",
"theme": {
"mode": "dark"
}
}
]
},
"--color-error-foreground": {
"type": "color",
"value": "$danger"
},
"--color-info": {
"type": "color",
"value": [
{
"value": "#E8EFFD",
"theme": {
"mode": "light"
}
},
{
"value": "#111C2E",
"theme": {
"mode": "dark"
}
}
]
},
"--color-info-foreground": {
"type": "color",
"value": "$info"
},
"font-display": {
"type": "string",
"value": "Poppins"
},
"font-mono": {
"type": "string",
"value": "Roboto Mono"
},
"--font-primary": {
"type": "string",
"value": "$font-mono"
},
"--font-secondary": {
"type": "string",
"value": "$font-display"
},
"--radius-none": {
"type": "number",
"value": 0
},
"--radius-control": {
"type": "number",
"value": 10
},
"--radius-m": {
"type": "number",
"value": 16
},
"--radius-pill": {
"type": "number",
"value": 999
},
"logo-ink": {
"type": "color",
"value": [
{
"value": "$fonoster-06",
"theme": {
"mode": "light"
}
},
{
"value": "#FFFFFF",
"theme": {
"mode": "dark"
}
}
]
}
},
"fileToken": "25fba67d-32e7-49ac-b228-586f25dc5a2c"
}