designs/website.pen
Rama main · réplica de lectura del repositorio original.
{
"version": "2.21",
"children": [
{
"type": "frame",
"id": "AjDuf",
"x": 0,
"y": 0,
"name": "Color Palette",
"theme": {
"mode": "light"
},
"clip": true,
"width": 1440,
"fill": "#FFFFFF",
"layout": "vertical",
"gap": 64,
"padding": [
72,
80
],
"children": [
{
"type": "frame",
"id": "pNreh",
"name": "Header",
"width": "fill_container",
"layout": "vertical",
"gap": 12,
"children": [
{
"type": "text",
"id": "d5I6d",
"name": "Eyebrow",
"fill": "#008751",
"content": "FONOSTER · WEBSITE REFRESH",
"fontFamily": "Roboto Mono",
"fontSize": 13,
"fontWeight": "500",
"letterSpacing": 1.5
},
{
"type": "text",
"id": "a669F",
"name": "Title",
"fill": "#252525",
"content": "Color foundations",
"fontFamily": "Poppins",
"fontSize": 48,
"fontWeight": "600",
"letterSpacing": -1
},
{
"type": "text",
"id": "ucImo",
"name": "Intro",
"fill": "#555555",
"textGrowth": "fixed-width",
"width": 860,
"content": "Recreated from the Shared Component Library (Figma › Core Library › Color Styles + Tokens). Primitives and semantic tokens match the source 1:1; website roles and status colors are proposed additions.",
"lineHeight": 1.5,
"fontFamily": "Poppins",
"fontSize": 17,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "woCFp",
"name": "Primitives / Fonoster",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "frame",
"id": "d4F1g",
"name": "Section Header",
"width": "fill_container",
"stroke": "#E8E8E8",
"strokeWidth": {
"bottom": 1
},
"layout": "vertical",
"gap": 6,
"padding": [
0,
0,
16,
0
],
"children": [
{
"type": "text",
"id": "ApRM2",
"name": "Section Title",
"fill": "#252525",
"content": "Primitives · Fonoster green",
"fontFamily": "Poppins",
"fontSize": 22,
"fontWeight": "600"
},
{
"type": "text",
"id": "QvGJ4",
"name": "Section Subtitle",
"fill": "#555555",
"content": "The brand ramp. 04 (mint) is the hero accent; 05 is the accessible green for text and links on light backgrounds.",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "jNgXw",
"name": "Fonoster Ramp",
"width": "fill_container",
"gap": 16,
"children": [
{
"type": "frame",
"id": "ERcoM",
"name": "Fonoster/01",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "QZHNc",
"name": "Chip",
"fill": "$fonoster-01",
"width": "fill_container",
"height": 140,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "TErkM",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "D8TE7K",
"name": "Label",
"fill": "#252525",
"content": "Fonoster/01",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "Bz7gr",
"name": "Hex",
"fill": "#555555",
"content": "#FFFFFF",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "R2aeQ",
"name": "Token",
"fill": "#8D8D8D",
"content": "$fonoster-01",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "W9DicO",
"name": "Fonoster/02",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "L9AfeA",
"name": "Chip",
"fill": "$fonoster-02",
"width": "fill_container",
"height": 140,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "luLTF",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "huYpi",
"name": "Label",
"fill": "#252525",
"content": "Fonoster/02",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "yq8QD",
"name": "Hex",
"fill": "#555555",
"content": "#E6FFF5",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "kPxwb",
"name": "Token",
"fill": "#8D8D8D",
"content": "$fonoster-02",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "AOYUw",
"name": "Fonoster/03",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "h1eTv2",
"name": "Chip",
"fill": "$fonoster-03",
"width": "fill_container",
"height": 140,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "tTvwc",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "B5bMQ",
"name": "Label",
"fill": "#252525",
"content": "Fonoster/03",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "etJCA",
"name": "Hex",
"fill": "#555555",
"content": "#CCEFE1",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "HMGQk",
"name": "Token",
"fill": "#8D8D8D",
"content": "$fonoster-03",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "C0fpnU",
"name": "Fonoster/04",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "X14Hav",
"name": "Chip",
"fill": "$fonoster-04",
"width": "fill_container",
"height": 140,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "CsWBr",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "ReqJP",
"name": "Label",
"fill": "#252525",
"content": "Fonoster/04",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "Xjdc7",
"name": "Hex",
"fill": "#555555",
"content": "#39E19E",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "WlUjX",
"name": "Token",
"fill": "#8D8D8D",
"content": "$fonoster-04",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "N7LyB",
"name": "Fonoster/05",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "jow2b",
"name": "Chip",
"fill": "$fonoster-05",
"width": "fill_container",
"height": 140,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "RRcEu",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "zpOZo",
"name": "Label",
"fill": "#252525",
"content": "Fonoster/05",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "U9jsi",
"name": "Hex",
"fill": "#555555",
"content": "#008751",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "sGpxB",
"name": "Token",
"fill": "#8D8D8D",
"content": "$fonoster-05",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "xAwno",
"name": "Fonoster/06",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "If5pX",
"name": "Chip",
"fill": "$fonoster-06",
"width": "fill_container",
"height": 140,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "f1lhu",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "IUPTe",
"name": "Label",
"fill": "#252525",
"content": "Fonoster/06",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "JU8XV",
"name": "Hex",
"fill": "#555555",
"content": "#053204",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "AU4Cu",
"name": "Token",
"fill": "#8D8D8D",
"content": "$fonoster-06",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "qo13Q",
"name": "Fonoster/07",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "CxSae",
"name": "Chip",
"fill": "$fonoster-07",
"width": "fill_container",
"height": 140,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "a6iPba",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "nQoDx",
"name": "Label",
"fill": "#252525",
"content": "Fonoster/07",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "Rrdan",
"name": "Hex",
"fill": "#555555",
"content": "#011900",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "q7MTU",
"name": "Token",
"fill": "#8D8D8D",
"content": "$fonoster-07",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "d7tvA4",
"name": "Primitives / Base",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "frame",
"id": "IN7Ma",
"name": "Section Header",
"width": "fill_container",
"stroke": "#E8E8E8",
"strokeWidth": {
"bottom": 1
},
"layout": "vertical",
"gap": 6,
"padding": [
0,
0,
16,
0
],
"children": [
{
"type": "text",
"id": "gzpta",
"name": "Section Title",
"fill": "#252525",
"content": "Primitives · Base neutrals",
"fontFamily": "Poppins",
"fontSize": 22,
"fontWeight": "600"
},
{
"type": "text",
"id": "k6gbFk",
"name": "Section Subtitle",
"fill": "#555555",
"content": "Shared gray ramp used by both brands; semantic neutrals invert it between light and dark.",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Ul0xX",
"name": "Base Ramp",
"width": "fill_container",
"gap": 16,
"children": [
{
"type": "frame",
"id": "GSImJ",
"name": "Base/01",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "YtLaX",
"name": "Chip",
"fill": "$base-01",
"width": "fill_container",
"height": 96,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "oyCGi",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "Fjw4y",
"name": "Label",
"fill": "#252525",
"content": "Base/01",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "bCkl6",
"name": "Hex",
"fill": "#555555",
"content": "#FFFFFF",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "eR0l9",
"name": "Token",
"fill": "#8D8D8D",
"content": "$base-01",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "mBFt4",
"name": "Base/02",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "a5I0A",
"name": "Chip",
"fill": "$base-02",
"width": "fill_container",
"height": 96,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "H8zUiL",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "PRwPk",
"name": "Label",
"fill": "#252525",
"content": "Base/02",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "ANzZB",
"name": "Hex",
"fill": "#555555",
"content": "#F4F4F4",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "CXYnB",
"name": "Token",
"fill": "#8D8D8D",
"content": "$base-02",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "MBAHs",
"name": "Base/03",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "T3BZXr",
"name": "Chip",
"fill": "$base-03",
"width": "fill_container",
"height": 96,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "hb57D",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "GVPwz",
"name": "Label",
"fill": "#252525",
"content": "Base/03",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "Jw2xe",
"name": "Hex",
"fill": "#555555",
"content": "#E8E8E8",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "RPge0",
"name": "Token",
"fill": "#8D8D8D",
"content": "$base-03",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "jWmaz",
"name": "Base/04",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "a0aXgt",
"name": "Chip",
"fill": "$base-04",
"width": "fill_container",
"height": 96,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "LMBmE",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "zCw98",
"name": "Label",
"fill": "#252525",
"content": "Base/04",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "zKD1x",
"name": "Hex",
"fill": "#555555",
"content": "#C2C2C2",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "PFrWC",
"name": "Token",
"fill": "#8D8D8D",
"content": "$base-04",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "jkhcE",
"name": "Base/05",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "EuFKx",
"name": "Chip",
"fill": "$base-05",
"width": "fill_container",
"height": 96,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "E9OC2E",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "kdwtw",
"name": "Label",
"fill": "#252525",
"content": "Base/05",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "QXcqF",
"name": "Hex",
"fill": "#555555",
"content": "#8D8D8D",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "Ss7tV",
"name": "Token",
"fill": "#8D8D8D",
"content": "$base-05",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "Nj9Bt",
"name": "Base/06",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "UY3Of",
"name": "Chip",
"fill": "$base-06",
"width": "fill_container",
"height": 96,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "gTKHN",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "p73rV",
"name": "Label",
"fill": "#252525",
"content": "Base/06",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "ILSDK",
"name": "Hex",
"fill": "#555555",
"content": "#555555",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "L3DwzZ",
"name": "Token",
"fill": "#8D8D8D",
"content": "$base-06",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "VdNm7",
"name": "Base/07",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "x6QNk",
"name": "Chip",
"fill": "$base-07",
"width": "fill_container",
"height": 96,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "T3c1v",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "wDEQe",
"name": "Label",
"fill": "#252525",
"content": "Base/07",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "rVoCG",
"name": "Hex",
"fill": "#555555",
"content": "#333333",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "g1bsv6",
"name": "Token",
"fill": "#8D8D8D",
"content": "$base-07",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "JKXqQ",
"name": "Base/08",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "rectangle",
"cornerRadius": 12,
"id": "doasa",
"name": "Chip",
"fill": "$base-08",
"width": "fill_container",
"height": 96,
"stroke": "#00000014",
"strokeWidth": 1
},
{
"type": "frame",
"id": "NLOte",
"name": "Meta",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "K91kmZ",
"name": "Label",
"fill": "#252525",
"content": "Base/08",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
},
{
"type": "text",
"id": "u5Wr1Z",
"name": "Hex",
"fill": "#555555",
"content": "#252525",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "g8rC1q",
"name": "Token",
"fill": "#8D8D8D",
"content": "$base-08",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "o0WW1",
"name": "Semantic",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "frame",
"id": "kF6lW",
"name": "Section Header",
"width": "fill_container",
"stroke": "#E8E8E8",
"strokeWidth": {
"bottom": 1
},
"layout": "vertical",
"gap": 6,
"padding": [
0,
0,
16,
0
],
"children": [
{
"type": "text",
"id": "S0WYK",
"name": "Section Title",
"fill": "#252525",
"content": "Semantic tokens · Light / Dark",
"fontFamily": "Poppins",
"fontSize": 22,
"fontWeight": "600"
},
{
"type": "text",
"id": "Z2vPGU",
"name": "Section Subtitle",
"fill": "#555555",
"content": "Same token name, two modes. Neutrals and brand flip around 04 so components never hard-code a primitive.",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "LVBBB",
"name": "Modes",
"width": "fill_container",
"gap": 24,
"children": [
{
"type": "frame",
"id": "pzhnW",
"name": "Light Mode",
"theme": {
"mode": "light"
},
"width": "fill_container",
"fill": "$background",
"cornerRadius": 16,
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "text",
"id": "W3UaE",
"name": "Mode Title",
"fill": "$text-primary",
"content": "Fonoster / Light",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "600"
},
{
"type": "frame",
"id": "r8Od0t",
"name": "neutral group",
"width": "fill_container",
"layout": "vertical",
"gap": 8,
"children": [
{
"type": "text",
"id": "kBYlA",
"name": "Group Label",
"fill": "$text-secondary",
"content": "Neutrals",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 1
},
{
"type": "frame",
"id": "gYnE3",
"name": "neutral strip",
"width": "fill_container",
"gap": 6,
"children": [
{
"type": "frame",
"id": "n6bHMX",
"name": "neutral-01",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "VQ96H",
"name": "Chip",
"fill": "$neutral-01",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "q45XBz",
"name": "Key",
"fill": "$text-secondary",
"content": "01",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "E0ygWd",
"name": "neutral-02",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "UUhp5",
"name": "Chip",
"fill": "$neutral-02",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "nezDL",
"name": "Key",
"fill": "$text-secondary",
"content": "02",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "XlK2U",
"name": "neutral-03",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "X739Z",
"name": "Chip",
"fill": "$neutral-03",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "Y5t7ax",
"name": "Key",
"fill": "$text-secondary",
"content": "03",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "C6u9Q",
"name": "neutral-04",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "Z07oq",
"name": "Chip",
"fill": "$neutral-04",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "F1xCZ",
"name": "Key",
"fill": "$text-secondary",
"content": "04",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "qe3H8",
"name": "neutral-05",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "wPcvd",
"name": "Chip",
"fill": "$neutral-05",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "K4kER",
"name": "Key",
"fill": "$text-secondary",
"content": "05",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "N8McCi",
"name": "neutral-06",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "Q0532",
"name": "Chip",
"fill": "$neutral-06",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "c4KDKQ",
"name": "Key",
"fill": "$text-secondary",
"content": "06",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "G7T9w",
"name": "neutral-07",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "c95e0",
"name": "Chip",
"fill": "$neutral-07",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "v1zgp",
"name": "Key",
"fill": "$text-secondary",
"content": "07",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "kxrKF",
"name": "neutral-08",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "fMDwC",
"name": "Chip",
"fill": "$neutral-08",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "IudcB",
"name": "Key",
"fill": "$text-secondary",
"content": "08",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "sxhG3",
"name": "brand group",
"width": "fill_container",
"layout": "vertical",
"gap": 8,
"children": [
{
"type": "text",
"id": "qY5mL",
"name": "Group Label",
"fill": "$text-secondary",
"content": "Brand",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 1
},
{
"type": "frame",
"id": "pUMO7",
"name": "brand strip",
"width": "fill_container",
"gap": 6,
"children": [
{
"type": "frame",
"id": "c0xMzB",
"name": "brand-01",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "vSHSZ",
"name": "Chip",
"fill": "$brand-01",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "kUbnu",
"name": "Key",
"fill": "$text-secondary",
"content": "01",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "G5wavh",
"name": "brand-02",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "B9dqA",
"name": "Chip",
"fill": "$brand-02",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "LlbLh",
"name": "Key",
"fill": "$text-secondary",
"content": "02",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "TClZb",
"name": "brand-03",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "b9IpS7",
"name": "Chip",
"fill": "$brand-03",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "eeRj0",
"name": "Key",
"fill": "$text-secondary",
"content": "03",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "V7VoI",
"name": "brand-04",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "TbWDJ",
"name": "Chip",
"fill": "$brand-04",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "lj8rX",
"name": "Key",
"fill": "$text-secondary",
"content": "04",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Xbm0y",
"name": "brand-05",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "NW7JN",
"name": "Chip",
"fill": "$brand-05",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "jpJqx",
"name": "Key",
"fill": "$text-secondary",
"content": "05",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Brg9K",
"name": "brand-06",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "olEIR",
"name": "Chip",
"fill": "$brand-06",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "p9uNV",
"name": "Key",
"fill": "$text-secondary",
"content": "06",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "bMjA6",
"name": "brand-07",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "PXi5c",
"name": "Chip",
"fill": "$brand-07",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "XmI6H",
"name": "Key",
"fill": "$text-secondary",
"content": "07",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "oNbob",
"name": "Background",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "qjs7p",
"name": "Chip",
"fill": "$background",
"width": 28,
"height": 28,
"stroke": "$text-muted",
"strokeWidth": 1
},
{
"type": "text",
"id": "cJEep",
"name": "Bg Label",
"fill": "$text-secondary",
"content": "$background #FFFFFF",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "RWfOE",
"name": "Dark Mode",
"theme": {
"mode": "dark"
},
"width": "fill_container",
"fill": "$background",
"cornerRadius": 16,
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "text",
"id": "p1lRB2",
"name": "Mode Title",
"fill": "$text-primary",
"content": "Fonoster / Dark",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "600"
},
{
"type": "frame",
"id": "ET3ya",
"name": "neutral group",
"width": "fill_container",
"layout": "vertical",
"gap": 8,
"children": [
{
"type": "text",
"id": "R2gMX",
"name": "Group Label",
"fill": "$text-secondary",
"content": "Neutrals",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 1
},
{
"type": "frame",
"id": "S4K7cI",
"name": "neutral strip",
"width": "fill_container",
"gap": 6,
"children": [
{
"type": "frame",
"id": "mnPAk",
"name": "neutral-01",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "Y4oZ9w",
"name": "Chip",
"fill": "$neutral-01",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "IbMxd",
"name": "Key",
"fill": "$text-secondary",
"content": "01",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Jdm4X",
"name": "neutral-02",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "kI7Gx",
"name": "Chip",
"fill": "$neutral-02",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "vlVnx",
"name": "Key",
"fill": "$text-secondary",
"content": "02",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "kM6JQ",
"name": "neutral-03",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "Mpc3g",
"name": "Chip",
"fill": "$neutral-03",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "vJB92",
"name": "Key",
"fill": "$text-secondary",
"content": "03",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "WuKby",
"name": "neutral-04",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "JoVp4",
"name": "Chip",
"fill": "$neutral-04",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "IClAt",
"name": "Key",
"fill": "$text-secondary",
"content": "04",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "p1lt3W",
"name": "neutral-05",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "ocJoN",
"name": "Chip",
"fill": "$neutral-05",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "latly",
"name": "Key",
"fill": "$text-secondary",
"content": "05",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "bMAvX",
"name": "neutral-06",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "A9SMJ",
"name": "Chip",
"fill": "$neutral-06",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "lxmR3",
"name": "Key",
"fill": "$text-secondary",
"content": "06",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "yGGLw",
"name": "neutral-07",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "EGZLb",
"name": "Chip",
"fill": "$neutral-07",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "I8Y4vs",
"name": "Key",
"fill": "$text-secondary",
"content": "07",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "FmH13",
"name": "neutral-08",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "HVY6f",
"name": "Chip",
"fill": "$neutral-08",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "FyARt",
"name": "Key",
"fill": "$text-secondary",
"content": "08",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "miF02",
"name": "brand group",
"width": "fill_container",
"layout": "vertical",
"gap": 8,
"children": [
{
"type": "text",
"id": "zzvKC",
"name": "Group Label",
"fill": "$text-secondary",
"content": "Brand",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 1
},
{
"type": "frame",
"id": "WbY3g",
"name": "brand strip",
"width": "fill_container",
"gap": 6,
"children": [
{
"type": "frame",
"id": "eh5CB",
"name": "brand-01",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "DL9Tm",
"name": "Chip",
"fill": "$brand-01",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "H1WiHe",
"name": "Key",
"fill": "$text-secondary",
"content": "01",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "HZ17f",
"name": "brand-02",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "EezLB",
"name": "Chip",
"fill": "$brand-02",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "SOWN5",
"name": "Key",
"fill": "$text-secondary",
"content": "02",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "i45IZs",
"name": "brand-03",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "PfI7J",
"name": "Chip",
"fill": "$brand-03",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "Ct1j1",
"name": "Key",
"fill": "$text-secondary",
"content": "03",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "q126i",
"name": "brand-04",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "g3MOK",
"name": "Chip",
"fill": "$brand-04",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "Kj5uj",
"name": "Key",
"fill": "$text-secondary",
"content": "04",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Irmpf",
"name": "brand-05",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "FbWBy",
"name": "Chip",
"fill": "$brand-05",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "y54TAe",
"name": "Key",
"fill": "$text-secondary",
"content": "05",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "twHLr",
"name": "brand-06",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "AbXl6",
"name": "Chip",
"fill": "$brand-06",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "zMYR4",
"name": "Key",
"fill": "$text-secondary",
"content": "06",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "cIQnE",
"name": "brand-07",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "rectangle",
"cornerRadius": 8,
"id": "tkQlw",
"name": "Chip",
"fill": "$brand-07",
"width": "fill_container",
"height": 56,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "bRdqW",
"name": "Key",
"fill": "$text-secondary",
"content": "07",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "OFLnc",
"name": "Background",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "e4XRQ0",
"name": "Chip",
"fill": "$background",
"width": 28,
"height": 28,
"stroke": "$text-muted",
"strokeWidth": 1
},
{
"type": "text",
"id": "Jppz8",
"name": "Bg Label",
"fill": "$text-secondary",
"content": "$background #181818",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "cilfq",
"name": "Website Roles",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "frame",
"id": "LVYaS",
"name": "Section Header",
"width": "fill_container",
"stroke": "#E8E8E8",
"strokeWidth": {
"bottom": 1
},
"layout": "vertical",
"gap": 6,
"padding": [
0,
0,
16,
0
],
"children": [
{
"type": "text",
"id": "akHEd",
"name": "Section Title",
"fill": "#252525",
"content": "Website roles · proposed",
"fontFamily": "Poppins",
"fontSize": 22,
"fontWeight": "600"
},
{
"type": "text",
"id": "b25Rkd",
"name": "Section Subtitle",
"fill": "#555555",
"content": "Role names the site will use, aliased onto the tokens above. Status colors follow the conventions people already know (green ok, amber warn, red error, blue info).",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "K5tfp",
"name": "Previews",
"width": "fill_container",
"gap": 24,
"children": [
{
"type": "frame",
"id": "e9Xm2b",
"name": "dark preview",
"theme": {
"mode": "dark"
},
"width": "fill_container",
"fill": "$bg",
"cornerRadius": 16,
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 28,
"padding": 36,
"children": [
{
"type": "frame",
"id": "u9VaO",
"name": "Hero Sample",
"width": "fill_container",
"layout": "vertical",
"gap": 14,
"children": [
{
"type": "frame",
"id": "igYnT",
"name": "Badge",
"fill": "$accent-subtle",
"cornerRadius": 999,
"gap": 8,
"padding": [
6,
12
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "i4azq",
"name": "Dot",
"fill": "$accent",
"width": 8,
"height": 8
},
{
"type": "text",
"id": "apSin",
"name": "Badge Label",
"fill": "$accent-text",
"content": "Open source · MIT",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "text",
"id": "mCCQI",
"name": "Headline",
"fill": "$text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Voice AI you can run anywhere",
"lineHeight": 1.15,
"fontFamily": "Poppins",
"fontSize": 34,
"fontWeight": "600",
"letterSpacing": -0.8
},
{
"type": "text",
"id": "m1lxk",
"name": "Subhead",
"fill": "$text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Programmable telecom and voice agents. Our cloud, or your own servers.",
"lineHeight": 1.5,
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "CwjM8",
"name": "CTAs",
"gap": 12,
"padding": [
8,
0,
0,
0
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Q2Rhi",
"name": "Primary Button",
"fill": "$accent",
"cornerRadius": 10,
"padding": [
12,
20
],
"children": [
{
"type": "text",
"id": "U1HzMo",
"name": "Label",
"fill": "$on-accent",
"content": "Start free",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "w4Up0r",
"name": "Secondary Button",
"fill": "$surface",
"cornerRadius": 10,
"stroke": "$border",
"strokeWidth": 1,
"padding": [
12,
20
],
"children": [
{
"type": "text",
"id": "W82Fk",
"name": "Label",
"fill": "$text-primary",
"content": "Self-host",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "text",
"id": "K0UUI",
"name": "Link",
"fill": "$accent-text",
"content": "Talk to an agent →",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "500"
}
]
}
]
},
{
"type": "frame",
"id": "epDOQ",
"name": "Code Sample",
"width": "fill_container",
"fill": "$surface",
"cornerRadius": 10,
"stroke": "$border",
"strokeWidth": 1,
"padding": 16,
"children": [
{
"type": "text",
"id": "KOpJQ",
"name": "Code",
"fill": "$text-primary",
"content": "$ docker compose up -d ",
"fontFamily": "Roboto Mono",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "text",
"id": "THqhD",
"name": "Comment",
"fill": "$text-muted",
"content": "# ready on :50051",
"fontFamily": "Roboto Mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "iRiMh",
"name": "Role Swatches",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "y9Odg",
"name": "Role Row",
"width": "fill_container",
"gap": 10,
"children": [
{
"type": "frame",
"id": "OO38E",
"name": "bg",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "Zegbz",
"name": "Chip",
"fill": "$bg",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "oIZou",
"name": "Role",
"fill": "$text-secondary",
"content": "bg",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "dSD7B",
"name": "surface",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "m8a6C",
"name": "Chip",
"fill": "$surface",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "tLSuR",
"name": "Role",
"fill": "$text-secondary",
"content": "surface",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "I6Xer",
"name": "border",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "ERhbr",
"name": "Chip",
"fill": "$border",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "oJPpH",
"name": "Role",
"fill": "$text-secondary",
"content": "border",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "PgwCZ",
"name": "text-primary",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "qTkPw",
"name": "Chip",
"fill": "$text-primary",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "hrXGK",
"name": "Role",
"fill": "$text-secondary",
"content": "text-primary",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "j7ErS",
"name": "Role Row",
"width": "fill_container",
"gap": 10,
"children": [
{
"type": "frame",
"id": "Bd9Ji",
"name": "text-secondary",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "qMXdq",
"name": "Chip",
"fill": "$text-secondary",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "O65iK5",
"name": "Role",
"fill": "$text-secondary",
"content": "text-secondary",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "m2jyD",
"name": "accent",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "wkwcv",
"name": "Chip",
"fill": "$accent",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "q7lxh",
"name": "Role",
"fill": "$text-secondary",
"content": "accent",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "luQxE",
"name": "accent-text",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "rUw5X",
"name": "Chip",
"fill": "$accent-text",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "oc8L9",
"name": "Role",
"fill": "$text-secondary",
"content": "accent-text",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "F9Lup",
"name": "accent-subtle",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "am8Si",
"name": "Chip",
"fill": "$accent-subtle",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "rEPkf",
"name": "Role",
"fill": "$text-secondary",
"content": "accent-subtle",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "dbiSp",
"name": "Role Row",
"width": "fill_container",
"gap": 10,
"children": [
{
"type": "frame",
"id": "ippTE",
"name": "success",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "d2S5pU",
"name": "Chip",
"fill": "$success",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "N1FLIk",
"name": "Role",
"fill": "$text-secondary",
"content": "success",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "KRczo",
"name": "warning",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "puqYB",
"name": "Chip",
"fill": "$warning",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "RQfJr",
"name": "Role",
"fill": "$text-secondary",
"content": "warning",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "e9gA1x",
"name": "danger",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "JGqfY",
"name": "Chip",
"fill": "$danger",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "U7bgJ",
"name": "Role",
"fill": "$text-secondary",
"content": "danger",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "KuITu",
"name": "info",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "KMaCt",
"name": "Chip",
"fill": "$info",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "u3Z66D",
"name": "Role",
"fill": "$text-secondary",
"content": "info",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "o65BC",
"name": "light preview",
"theme": {
"mode": "light"
},
"width": "fill_container",
"fill": "$bg",
"cornerRadius": 16,
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 28,
"padding": 36,
"children": [
{
"type": "frame",
"id": "WG9Rm",
"name": "Hero Sample",
"width": "fill_container",
"layout": "vertical",
"gap": 14,
"children": [
{
"type": "frame",
"id": "sybF5",
"name": "Badge",
"fill": "$accent-subtle",
"cornerRadius": 999,
"gap": 8,
"padding": [
6,
12
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "NuDly",
"name": "Dot",
"fill": "$accent",
"width": 8,
"height": 8
},
{
"type": "text",
"id": "xGojl",
"name": "Badge Label",
"fill": "$accent-text",
"content": "Open source · MIT",
"fontFamily": "Roboto Mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "text",
"id": "td9BK",
"name": "Headline",
"fill": "$text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Voice AI you can run anywhere",
"lineHeight": 1.15,
"fontFamily": "Poppins",
"fontSize": 34,
"fontWeight": "600",
"letterSpacing": -0.8
},
{
"type": "text",
"id": "EAN6Y",
"name": "Subhead",
"fill": "$text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Programmable telecom and voice agents. Our cloud, or your own servers.",
"lineHeight": 1.5,
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "PBcit",
"name": "CTAs",
"gap": 12,
"padding": [
8,
0,
0,
0
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Z5Mwu5",
"name": "Primary Button",
"fill": "$accent",
"cornerRadius": 10,
"padding": [
12,
20
],
"children": [
{
"type": "text",
"id": "YG67x",
"name": "Label",
"fill": "$on-accent",
"content": "Start free",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "YdZ5P",
"name": "Secondary Button",
"fill": "$surface",
"cornerRadius": 10,
"stroke": "$border",
"strokeWidth": 1,
"padding": [
12,
20
],
"children": [
{
"type": "text",
"id": "R9Fz3",
"name": "Label",
"fill": "$text-primary",
"content": "Self-host",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "text",
"id": "hYRJp",
"name": "Link",
"fill": "$accent-text",
"content": "Talk to an agent →",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "500"
}
]
}
]
},
{
"type": "frame",
"id": "QIps0",
"name": "Code Sample",
"width": "fill_container",
"fill": "$surface",
"cornerRadius": 10,
"stroke": "$border",
"strokeWidth": 1,
"padding": 16,
"children": [
{
"type": "text",
"id": "xjGUl",
"name": "Code",
"fill": "$text-primary",
"content": "$ docker compose up -d ",
"fontFamily": "Roboto Mono",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "text",
"id": "YiEYX",
"name": "Comment",
"fill": "$text-muted",
"content": "# ready on :50051",
"fontFamily": "Roboto Mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "u4YWmL",
"name": "Role Swatches",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "CVWx9",
"name": "Role Row",
"width": "fill_container",
"gap": 10,
"children": [
{
"type": "frame",
"id": "A0Ttg",
"name": "bg",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "MmqMU",
"name": "Chip",
"fill": "$bg",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "Ieox5",
"name": "Role",
"fill": "$text-secondary",
"content": "bg",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "FUC6h",
"name": "surface",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "UqYRR",
"name": "Chip",
"fill": "$surface",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "zcz8x",
"name": "Role",
"fill": "$text-secondary",
"content": "surface",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "n9FGDB",
"name": "border",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "gSZ8o",
"name": "Chip",
"fill": "$border",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "b0YQeQ",
"name": "Role",
"fill": "$text-secondary",
"content": "border",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "xlh2O",
"name": "text-primary",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "NkKhR",
"name": "Chip",
"fill": "$text-primary",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "C6QCz",
"name": "Role",
"fill": "$text-secondary",
"content": "text-primary",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "qFTb8",
"name": "Role Row",
"width": "fill_container",
"gap": 10,
"children": [
{
"type": "frame",
"id": "h6NMO",
"name": "text-secondary",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "Y5fnj",
"name": "Chip",
"fill": "$text-secondary",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "dXJDc",
"name": "Role",
"fill": "$text-secondary",
"content": "text-secondary",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "K4EoPj",
"name": "accent",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "Zm9zY",
"name": "Chip",
"fill": "$accent",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "Nl1Y6",
"name": "Role",
"fill": "$text-secondary",
"content": "accent",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "up23h",
"name": "accent-text",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "ix5jR",
"name": "Chip",
"fill": "$accent-text",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "HZNqg",
"name": "Role",
"fill": "$text-secondary",
"content": "accent-text",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Tk3Ck",
"name": "accent-subtle",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "SQ2G9",
"name": "Chip",
"fill": "$accent-subtle",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "t8XSK",
"name": "Role",
"fill": "$text-secondary",
"content": "accent-subtle",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "m6JwJ",
"name": "Role Row",
"width": "fill_container",
"gap": 10,
"children": [
{
"type": "frame",
"id": "Xgr5Z",
"name": "success",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "iDAO2",
"name": "Chip",
"fill": "$success",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "aWYXf",
"name": "Role",
"fill": "$text-secondary",
"content": "success",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Fu5EI",
"name": "warning",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "LpIBR",
"name": "Chip",
"fill": "$warning",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "Q2ecOn",
"name": "Role",
"fill": "$text-secondary",
"content": "warning",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "N7W8m",
"name": "danger",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "myLeG",
"name": "Chip",
"fill": "$danger",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "Xab3f",
"name": "Role",
"fill": "$text-secondary",
"content": "danger",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "L92tK",
"name": "info",
"width": "fill_container",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 6,
"id": "n3hXL",
"name": "Chip",
"fill": "$info",
"width": 22,
"height": 22,
"stroke": "$border",
"strokeWidth": 1
},
{
"type": "text",
"id": "TDkZa",
"name": "Role",
"fill": "$text-secondary",
"content": "info",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "sQnKo",
"name": "Rules",
"width": "fill_container",
"fill": "#F4F4F4",
"cornerRadius": 12,
"layout": "vertical",
"gap": 8,
"padding": 20,
"children": [
{
"type": "text",
"id": "i4e4q",
"name": "Rule",
"fill": "#333333",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "• Mint #39E19E is a fill, not light-mode text (≈1.7:1 on white). On light, text/links use #008751 (≈4.6:1).",
"lineHeight": 1.5,
"fontFamily": "Poppins",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "text",
"id": "M2xLd",
"name": "Rule",
"fill": "#333333",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "• Text on mint is always Fonoster/07 #011900 — never white.",
"lineHeight": 1.5,
"fontFamily": "Poppins",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "text",
"id": "mDuZZ",
"name": "Rule",
"fill": "#333333",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "• Dark is the default marketing mode (category norm: Vapi, LiveKit, Pipecat). Light mode for docs/long reads.",
"lineHeight": 1.5,
"fontFamily": "Poppins",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "text",
"id": "dIcKU",
"name": "Rule",
"fill": "#333333",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "• Status colors and surface/accent-subtle dark values are proposals — not yet in the Figma library.",
"lineHeight": 1.5,
"fontFamily": "Poppins",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "SfFt0",
"x": 1560,
"y": 0,
"name": "Components",
"theme": {
"mode": "dark"
},
"fill": "$bg",
"gap": 32,
"padding": 40,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "a0qbdn",
"name": "Logo",
"reusable": true,
"width": 124,
"height": 32,
"fill": {
"type": "image",
"enabled": true,
"url": "assets/logo-dark.png",
"mode": "contain"
}
},
{
"type": "frame",
"id": "fDmf2",
"name": "Button/Primary",
"reusable": true,
"fill": "$accent",
"cornerRadius": 10,
"gap": 8,
"padding": [
14,
22
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "Vw1mL",
"name": "Label",
"fill": "$on-accent",
"content": "Start building",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "b8zCvf",
"name": "Button/Secondary",
"reusable": true,
"fill": "$surface",
"cornerRadius": 10,
"stroke": "$border",
"strokeWidth": 1,
"gap": 8,
"padding": [
14,
22
],
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "s8cqE",
"x": 22,
"y": 16.5,
"name": "Icon",
"enabled": false,
"width": 16,
"height": 16,
"icon": "terminal",
"library": "lucide",
"fill": "$text-secondary"
},
{
"type": "text",
"id": "q2wj8",
"name": "Label",
"fill": "$text-primary",
"content": "Contact sales",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "G1XZe",
"name": "Preferences",
"reusable": true,
"cornerRadius": 999,
"stroke": "$border",
"strokeWidth": 1,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "tBJnD",
"name": "Language Select",
"gap": 6,
"padding": [
7,
12
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "F6iIK",
"name": "Icon",
"width": 14,
"height": 14,
"icon": "globe",
"library": "lucide",
"fill": "#8D8D8D"
},
{
"type": "text",
"id": "ZaXaP",
"name": "Value",
"fill": "$text-muted",
"content": "English",
"fontFamily": "Poppins",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "icon",
"id": "DLW0z",
"name": "Chevron",
"width": 12,
"height": 12,
"icon": "chevron-down",
"library": "lucide",
"fill": "#8D8D8D"
}
]
},
{
"type": "rectangle",
"id": "u1w4Xg",
"name": "Divider",
"fill": "$border",
"width": 1,
"height": 14
},
{
"type": "frame",
"id": "TjaMP",
"name": "Theme Select",
"gap": 6,
"padding": [
7,
12
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "wsVA4",
"name": "Icon",
"width": 14,
"height": 14,
"icon": "moon",
"library": "lucide",
"fill": "#8D8D8D"
},
{
"type": "text",
"id": "KSM8U",
"name": "Value",
"fill": "$text-muted",
"content": "Dark",
"fontFamily": "Poppins",
"fontSize": 12,
"fontWeight": "500"
},
{
"type": "icon",
"id": "uz4SA",
"name": "Chevron",
"width": 12,
"height": 12,
"icon": "chevron-down",
"library": "lucide",
"fill": "#8D8D8D"
}
]
}
]
},
{
"type": "frame",
"id": "ALu5N",
"name": "Preferences / Open (reference)",
"layout": "vertical",
"gap": 8,
"children": [
{
"type": "frame",
"id": "alT9s",
"name": "Language Menu",
"width": 168,
"fill": "$surface-raised",
"cornerRadius": 12,
"stroke": "$border",
"strokeWidth": 1,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000080",
"offset": {
"x": 0,
"y": 12
},
"blur": 32
},
"layout": "vertical",
"padding": 4,
"children": [
{
"type": "frame",
"id": "zre4B",
"name": "English",
"width": "fill_container",
"fill": "#FFFFFF0F",
"cornerRadius": 8,
"gap": 8,
"padding": [
8,
10
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "DFndn",
"name": "Label",
"fill": "$text-primary",
"content": "English",
"fontFamily": "Poppins",
"fontSize": 13,
"fontWeight": "500"
},
{
"type": "icon",
"id": "mo0pW",
"name": "Check",
"width": 14,
"height": 14,
"icon": "check",
"library": "lucide",
"fill": "$text-primary"
}
]
},
{
"type": "frame",
"id": "nVevc",
"name": "Español",
"width": "fill_container",
"fill": "#FFFFFF00",
"cornerRadius": 8,
"gap": 8,
"padding": [
8,
10
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "DsCsu",
"name": "Label",
"fill": "$text-muted",
"content": "Español",
"fontFamily": "Poppins",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"id": "riks1",
"type": "ref",
"ref": "G1XZe",
"name": "Preferences"
}
]
}
]
},
{
"type": "frame",
"id": "S7Ysd8",
"x": 2903,
"y": 0,
"name": "Home / Desktop",
"theme": {
"mode": "dark"
},
"clip": true,
"width": 1440,
"fill": "$bg",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "EIxEG",
"name": "Nav",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"bottom": 1
},
"padding": [
20,
80
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"id": "uuoKO",
"type": "ref",
"ref": "a0qbdn",
"name": "Logo"
},
{
"type": "frame",
"id": "Kmefr",
"name": "Links",
"gap": 36,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "OGvEz",
"name": "Products",
"fill": "$text-secondary",
"content": "Products ⌄",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
},
{
"type": "text",
"id": "y3dccE",
"x": 104,
"y": 0,
"name": "Pricing",
"enabled": false,
"fill": "$text-secondary",
"content": "Use cases",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
},
{
"type": "text",
"id": "jYSTB",
"name": "Community",
"fill": "$text-secondary",
"content": "Docs",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
},
{
"type": "text",
"id": "q2Xhb",
"name": "Pricing",
"fill": "$text-secondary",
"content": "Pricing",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "a7Xm2U",
"name": "Actions",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "x81NvF",
"name": "GitHub Stars",
"cornerRadius": 10,
"stroke": "$border",
"strokeWidth": 1,
"gap": 8,
"padding": [
10,
14
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "CqebX",
"name": "GitHub",
"width": 16,
"height": 16,
"icon": "github",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "icon",
"id": "iw41r",
"name": "Star",
"width": 14,
"height": 14,
"icon": "star",
"library": "lucide",
"fill": "$text-secondary"
},
{
"type": "text",
"id": "uJEPu",
"name": "Count",
"fill": "$text-primary",
"content": "8.1K",
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"id": "K8IWs",
"type": "ref",
"ref": "fDmf2",
"name": "Start free",
"padding": [
10,
18
]
}
]
}
]
},
{
"type": "frame",
"id": "f0UFeO",
"name": "Hero",
"width": "fill_container",
"fill": {
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
},
"gap": 64,
"padding": [
72,
80,
88,
80
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "GHcSY",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 28,
"children": [
{
"type": "frame",
"id": "wUV0B",
"name": "Badge",
"fill": "$surface",
"cornerRadius": 999,
"stroke": "$border",
"strokeWidth": 1,
"gap": 8,
"padding": [
7,
14
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "pKlwT",
"name": "Dot",
"fill": "$text-secondary",
"width": 8,
"height": 8
},
{
"type": "text",
"id": "vRDFT",
"name": "Label",
"fill": "$text-secondary",
"content": "New · Multilingual code-switching →",
"fontFamily": "Poppins",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "text",
"id": "m1XE9e",
"name": "Headline",
"fill": "$text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "AI that answers\nthe phone.",
"lineHeight": 1.02,
"fontFamily": "Poppins",
"fontSize": 88,
"fontWeight": "600",
"letterSpacing": -3
},
{
"type": "text",
"id": "t4eJi0",
"name": "Subhead",
"fill": "$text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Build, test, and run voice agents on real phone lines.",
"lineHeight": 1.5,
"fontFamily": "Poppins",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "kORZi",
"name": "CTAs",
"gap": 12,
"padding": [
8,
0,
0,
0
],
"alignItems": "center",
"children": [
{
"id": "V5NGXm",
"type": "ref",
"ref": "fDmf2",
"name": "Start free"
},
{
"id": "ZLwPR",
"type": "ref",
"ref": "b8zCvf",
"name": "Self-host"
}
]
}
]
},
{
"type": "frame",
"id": "f2jEcm",
"name": "Call Demo",
"width": 560,
"height": 584,
"layout": "none",
"children": [
{
"type": "ellipse",
"id": "XVW5i",
"x": 20,
"y": 10,
"name": "Glow",
"fill": {
"type": "gradient",
"gradientType": "radial",
"enabled": true,
"rotation": 0,
"size": {
"width": 1,
"height": 1
},
"colors": [
{
"color": "#FFFFFF12",
"position": 0
},
{
"color": "#FFFFFF00",
"position": 0.65
}
]
},
"width": 520,
"height": 520
},
{
"type": "frame",
"id": "cufgL",
"x": 140,
"y": 0,
"name": "Phone",
"width": 280,
"height": 580,
"fill": {
"type": "gradient",
"gradientType": "linear",
"enabled": true,
"rotation": 180,
"size": {
"height": 1
},
"colors": [
{
"color": "#2C2C2C",
"position": 0
},
{
"color": "#1C1C1C",
"position": 1
}
]
},
"cornerRadius": 48,
"stroke": "#FFFFFF26",
"strokeWidth": 1,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000099",
"offset": {
"x": 0,
"y": 40
},
"blur": 80
},
"layout": "none",
"children": [
{
"type": "frame",
"id": "PJ83G",
"x": 8,
"y": 8,
"name": "Screen",
"clip": true,
"width": 264,
"height": 564,
"fill": [
"#121212",
{
"type": "gradient",
"gradientType": "radial",
"enabled": true,
"rotation": 0,
"size": {
"width": 1.4,
"height": 0.7
},
"colors": [
{
"color": "#FFFFFF14",
"position": 0
},
{
"color": "#FFFFFF00",
"position": 1
}
],
"center": {
"y": 0.22
}
}
],
"cornerRadius": 41,
"layout": "vertical",
"padding": [
14,
20,
84,
20
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "N45W7i",
"layoutPosition": "absolute",
"x": 92,
"y": 11,
"name": "Island",
"width": 80,
"height": 22,
"fill": "#000000",
"cornerRadius": 11
},
{
"type": "frame",
"id": "xCuzg",
"name": "Status Bar",
"width": "fill_container",
"padding": [
2,
10,
0,
10
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "text",
"id": "aTOHr",
"name": "Time",
"fill": "$text-primary",
"content": "9:41",
"fontFamily": "Poppins",
"fontSize": 13,
"fontWeight": "600"
},
{
"type": "frame",
"id": "X7BKj",
"name": "Icons",
"gap": 5,
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "nX928",
"name": "signal",
"width": 14,
"height": 14,
"icon": "signal",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "icon",
"id": "GnPJk",
"name": "wifi",
"width": 14,
"height": 14,
"icon": "wifi",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "icon",
"id": "biKT6",
"name": "battery-full",
"width": 14,
"height": 14,
"icon": "battery-full",
"library": "lucide",
"fill": "$text-primary"
}
]
}
]
},
{
"type": "frame",
"id": "h3tGP",
"name": "Spacer",
"width": 10,
"height": 34
},
{
"type": "frame",
"id": "M6JfZw",
"name": "Avatar",
"width": 104,
"height": 104,
"layout": "none",
"children": [
{
"type": "ellipse",
"id": "tCOh9",
"x": 0,
"y": 0,
"name": "Ring",
"width": 104,
"height": 104,
"stroke": "#FFFFFF1A",
"strokeWidth": 1
},
{
"type": "frame",
"id": "EBoiA",
"x": 14,
"y": 14,
"name": "Core",
"width": 76,
"height": 76,
"fill": "$base-08",
"cornerRadius": 38,
"stroke": "#FFFFFF40",
"strokeWidth": 1,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#FFFFFF1F",
"blur": 30
},
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "vkZok",
"name": "Icon",
"width": 30,
"height": 30,
"icon": "audio-lines",
"library": "lucide",
"fill": "$text-primary"
}
]
}
]
},
{
"type": "frame",
"id": "hxUdD",
"name": "Spacer",
"width": 10,
"height": 14
},
{
"type": "text",
"id": "hHQQo",
"name": "Name",
"fill": "$text-primary",
"content": "Fonoster Agent",
"fontFamily": "Poppins",
"fontSize": 19,
"fontWeight": "600"
},
{
"type": "text",
"id": "qbfpH",
"name": "Timer",
"fill": "$text-secondary",
"content": "00:42",
"fontFamily": "Roboto Mono",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "TyuqS",
"name": "Spacer",
"width": 10,
"height": 26
},
{
"type": "frame",
"id": "MYeNz",
"name": "Live Caption",
"width": "fill_container",
"fill": "#FFFFFF0A",
"cornerRadius": 16,
"stroke": "#FFFFFF14",
"strokeWidth": 1,
"layout": "vertical",
"gap": 10,
"padding": 14,
"children": [
{
"type": "text",
"id": "u6dng",
"name": "Text",
"fill": "$text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "I can move you to Friday at 10. Does that work?",
"lineHeight": 1.45,
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "ypn7G",
"name": "Waveform",
"height": 18,
"gap": 3,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "SEEK0",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "sQW7N",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 8
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "XaWAA",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 12
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "tN7Tn",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 6
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "TNGck",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 14
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "XqkSR",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 10
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "zXvzj",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 16
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "yde6T",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 8
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "QOvHC",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 12
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "Yl4RO",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 18
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "ILMCW",
"name": "Bar",
"fill": "#FFFFFFB3",
"width": 3,
"height": 10
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "qiVqG",
"name": "Bar",
"fill": "#FFFFFF40",
"width": 3,
"height": 6
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "fjSJL",
"name": "Bar",
"fill": "#FFFFFF40",
"width": 3,
"height": 12
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "XrAVm",
"name": "Bar",
"fill": "#FFFFFF40",
"width": 3,
"height": 8
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "ujrCH",
"name": "Bar",
"fill": "#FFFFFF40",
"width": 3,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "yC7eZ",
"name": "Bar",
"fill": "#FFFFFF40",
"width": 3,
"height": 10
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "SJZnp",
"name": "Bar",
"fill": "#FFFFFF40",
"width": 3,
"height": 6
},
{
"type": "rectangle",
"cornerRadius": 1.5,
"id": "OZj0z",
"name": "Bar",
"fill": "#FFFFFF40",
"width": 3,
"height": 3
}
]
}
]
},
{
"type": "frame",
"id": "odlFm",
"name": "Flex",
"width": 10,
"height": "fill_container"
},
{
"type": "frame",
"id": "kutoH",
"name": "Controls",
"gap": 22,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "awGLI",
"name": "mic-off",
"width": 50,
"height": 50,
"fill": "#FFFFFF14",
"cornerRadius": 25,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "twfeu",
"name": "Icon",
"width": 19,
"height": 19,
"icon": "mic-off",
"library": "lucide",
"fill": "$text-primary"
}
]
},
{
"type": "frame",
"id": "s6urj",
"name": "phone-off",
"width": 60,
"height": 60,
"fill": "$danger",
"cornerRadius": 30,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "VZB2I",
"name": "Icon",
"width": 22.8,
"height": 22.8,
"icon": "phone-off",
"library": "lucide",
"fill": "$text-primary"
}
]
},
{
"type": "frame",
"id": "d1hhA",
"name": "volume-2",
"width": 50,
"height": 50,
"fill": "#FFFFFF14",
"cornerRadius": 25,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "Q8nQBu",
"name": "Icon",
"width": 19,
"height": 19,
"icon": "volume-2",
"library": "lucide",
"fill": "$text-primary"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "YlSyV",
"x": 70,
"y": 516,
"name": "Call Me Dock",
"width": 420,
"height": 64,
"fill": "#262626F2",
"cornerRadius": 32,
"stroke": "#FFFFFF2E",
"strokeWidth": 1,
"effect": [
{
"type": "background_blur",
"radius": 20
},
{
"type": "shadow",
"shadowType": "outer",
"color": "#00000080",
"offset": {
"x": 0,
"y": 20
},
"blur": 40
}
],
"gap": 12,
"padding": [
8,
8,
8,
20
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "rSHqL",
"name": "Country",
"gap": 4,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "zv3YU",
"name": "Code",
"fill": "$text-primary",
"content": "+1",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "500"
},
{
"type": "icon",
"id": "h4KMqR",
"name": "Chevron",
"width": 14,
"height": 14,
"icon": "chevron-down",
"library": "lucide",
"fill": "$text-secondary"
}
]
},
{
"type": "rectangle",
"id": "lbgyL",
"name": "Divider",
"fill": "#FFFFFF26",
"width": 1,
"height": 22
},
{
"type": "text",
"id": "G8OSuy",
"name": "Placeholder",
"fill": "#8D8D8D",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Your phone number",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "m40b5",
"name": "Call Me",
"height": "fill_container",
"fill": "#FFFFFF",
"cornerRadius": 24,
"gap": 8,
"padding": [
0,
18
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "wCYW3",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "phone",
"library": "lucide",
"fill": "#181818"
},
{
"type": "text",
"id": "Dx2qA",
"name": "Label",
"fill": "#181818",
"content": "Call me",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "600"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "CdIE9",
"name": "Numbers",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"top": 1,
"bottom": 1
},
"padding": [
0,
80
],
"children": [
{
"type": "frame",
"id": "y1D1E",
"name": "GitHub stars",
"width": "fill_container",
"stroke": "$border",
"layout": "vertical",
"gap": 8,
"padding": [
56,
0
],
"children": [
{
"type": "text",
"id": "jsPDx",
"name": "Value",
"fill": "$text-primary",
"content": "10K+",
"lineHeight": 1,
"fontFamily": "Poppins",
"fontSize": 72,
"fontWeight": "600",
"letterSpacing": -2.5
},
{
"type": "text",
"id": "r5i4s",
"name": "Label",
"fill": "$text-secondary",
"content": "GitHub stars across projects",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "j0Zc4h",
"name": "contributors",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 8,
"padding": [
56,
40
],
"children": [
{
"type": "text",
"id": "K0brPU",
"name": "Value",
"fill": "$text-primary",
"content": "1M+",
"lineHeight": 1,
"fontFamily": "Poppins",
"fontSize": 72,
"fontWeight": "600",
"letterSpacing": -2.5
},
{
"type": "text",
"id": "GxKbQ",
"name": "Label",
"fill": "$text-secondary",
"content": "Docker pulls",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "iVpGv",
"name": "shipping since",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 8,
"padding": [
56,
40
],
"children": [
{
"type": "text",
"id": "UwWOb",
"name": "Value",
"fill": "$text-primary",
"content": "275",
"lineHeight": 1,
"fontFamily": "Poppins",
"fontSize": 72,
"fontWeight": "600",
"letterSpacing": -2.5
},
{
"type": "text",
"id": "M9JH5",
"name": "Label",
"fill": "$text-secondary",
"content": "releases shipped",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "oC8i8",
"name": "platform fee, self-hosted",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 8,
"padding": [
56,
40
],
"children": [
{
"type": "text",
"id": "vm9My",
"name": "Value",
"fill": "$text-primary",
"content": "2018",
"lineHeight": 1,
"fontFamily": "Poppins",
"fontSize": 72,
"fontWeight": "600",
"letterSpacing": -2.5
},
{
"type": "text",
"id": "Iz586",
"name": "Label",
"fill": "$text-secondary",
"content": "building since",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "eaLFv",
"name": "Use Cases",
"width": "fill_container",
"layout": "vertical",
"gap": 48,
"padding": [
128,
80
],
"children": [
{
"type": "frame",
"id": "RRnO1",
"name": "Header",
"width": "fill_container",
"justifyContent": "space_between",
"alignItems": "end",
"children": [
{
"type": "text",
"id": "zQkho",
"name": "Title",
"fill": "$text-primary",
"content": "Built for real calls.",
"fontFamily": "Poppins",
"fontSize": 56,
"fontWeight": "600",
"letterSpacing": -1.5
},
{
"type": "frame",
"id": "jIZZo",
"name": "Tabs",
"fill": "$surface",
"cornerRadius": 12,
"stroke": "$border",
"strokeWidth": 1,
"gap": 4,
"padding": 4,
"children": [
{
"type": "frame",
"id": "v3LGst",
"name": "Tab Support",
"fill": "#00000000",
"cornerRadius": 9,
"padding": [
10,
18
],
"children": [
{
"type": "text",
"id": "o3YQlP",
"name": "Label",
"fill": "$text-muted",
"content": "Support",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "dgb7w",
"name": "Tab Scheduling",
"fill": "$base-07",
"cornerRadius": 9,
"padding": [
10,
18
],
"children": [
{
"type": "text",
"id": "LuEDN",
"name": "Label",
"fill": "$text-primary",
"content": "Scheduling",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "nE7fW",
"name": "Tab Collections",
"fill": "#00000000",
"cornerRadius": 9,
"padding": [
10,
18
],
"children": [
{
"type": "text",
"id": "Jdd59",
"name": "Label",
"fill": "$text-muted",
"content": "Collections",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "VLCGe",
"name": "Tab Sales",
"fill": "#00000000",
"cornerRadius": 9,
"padding": [
10,
18
],
"children": [
{
"type": "text",
"id": "GiKaO",
"name": "Label",
"fill": "$text-muted",
"content": "Sales",
"fontFamily": "Poppins",
"fontSize": 14,
"fontWeight": "500"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "ThcUc",
"name": "Example",
"width": "fill_container",
"gap": 64,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "IxJhb",
"name": "Call Card",
"clip": true,
"width": 720,
"fill": "$surface",
"cornerRadius": 20,
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "a9By1b",
"name": "Call Header",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"bottom": 1
},
"padding": [
18,
24
],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "HdUWM",
"name": "Who",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "a8Il7i",
"name": "Avatar",
"width": 36,
"height": 36,
"fill": "$base-07",
"cornerRadius": 18,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "hfPrv",
"name": "Icon",
"width": 16,
"height": 16,
"icon": "phone-outgoing",
"library": "lucide",
"fill": "$text-primary"
}
]
},
{
"type": "frame",
"id": "Z4rpx",
"name": "Text",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "ZZfqM",
"name": "Name",
"fill": "$text-primary",
"content": "Lumen Dental → Ana R.",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "600"
},
{
"type": "text",
"id": "MT5t6",
"name": "Meta",
"fill": "$text-muted",
"content": "Outbound · Spanish / English",
"fontFamily": "Poppins",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "a3Nw3E",
"name": "Live",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "EP8US",
"name": "Dot",
"fill": "#F97066",
"width": 8,
"height": 8
},
{
"type": "text",
"id": "M1lRli",
"name": "Timer",
"fill": "$text-secondary",
"content": "01:12",
"fontFamily": "Roboto Mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "GqE0R",
"name": "Transcript",
"width": "fill_container",
"layout": "vertical",
"gap": 14,
"padding": 28,
"children": [
{
"type": "frame",
"id": "l50nI0",
"name": "Agent",
"width": "fill_container",
"children": [
{
"type": "frame",
"id": "x1yyI",
"name": "Bubble",
"fill": "$base-07",
"cornerRadius": [
4,
14,
14,
14
],
"stroke": "#00000000",
"strokeWidth": 1,
"layout": "vertical",
"gap": 4,
"padding": [
12,
16
],
"children": [
{
"type": "text",
"id": "m4e1n",
"name": "Who",
"fill": "$text-muted",
"content": "Agent",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
},
{
"type": "text",
"id": "j2QLX",
"name": "Text",
"fill": "$text-primary",
"content": "Hi Ana — calling to confirm Thursday at 3 PM.",
"lineHeight": 1.4,
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "n7rPlc",
"name": "Caller",
"width": "fill_container",
"justifyContent": "end",
"children": [
{
"type": "frame",
"id": "D96Jr",
"name": "Bubble",
"fill": "#FFFFFF0A",
"cornerRadius": [
14,
4,
14,
14
],
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 4,
"padding": [
12,
16
],
"children": [
{
"type": "text",
"id": "WNLZK",
"name": "Who",
"fill": "$text-muted",
"content": "Ana",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
},
{
"type": "text",
"id": "OFD1W",
"name": "Text",
"fill": "$text-primary",
"content": "¿Podemos pasarlo al viernes en la mañana?",
"lineHeight": 1.4,
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "pueFY",
"name": "Tool Call",
"fill": "$bg",
"cornerRadius": 10,
"stroke": "$border",
"strokeWidth": 1,
"gap": 10,
"padding": [
10,
14
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "a8R8Hp",
"name": "Icon",
"width": 14,
"height": 14,
"icon": "wrench",
"library": "lucide",
"fill": "$text-muted"
},
{
"type": "text",
"id": "MzSNy",
"name": "Call",
"fill": "$text-secondary",
"content": "calendar.reschedule(\"fri 10:00\")",
"fontFamily": "Roboto Mono",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "icon",
"id": "j2mCVq",
"name": "Done",
"width": 14,
"height": 14,
"icon": "check",
"library": "lucide",
"fill": "$text-primary"
}
]
},
{
"type": "frame",
"id": "d3TIv1",
"name": "Agent",
"width": "fill_container",
"children": [
{
"type": "frame",
"id": "eEiIW",
"name": "Bubble",
"fill": "$base-07",
"cornerRadius": [
4,
14,
14,
14
],
"stroke": "#00000000",
"strokeWidth": 1,
"layout": "vertical",
"gap": 4,
"padding": [
12,
16
],
"children": [
{
"type": "text",
"id": "t8huNF",
"name": "Who",
"fill": "$text-muted",
"content": "Agent",
"fontFamily": "Roboto Mono",
"fontSize": 11,
"fontWeight": "normal"
},
{
"type": "text",
"id": "WYg8e",
"name": "Text",
"fill": "$text-primary",
"content": "¡Listo! Viernes a las 10 AM. Nos vemos.",
"lineHeight": 1.4,
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "aHFXs",
"name": "Side",
"width": "fill_container",
"layout": "vertical",
"gap": 28,
"children": [
{
"type": "text",
"id": "xjS7B",
"name": "Lead",
"fill": "$text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Confirms, reschedules, and books — in the caller's language.",
"lineHeight": 1.3,
"fontFamily": "Poppins",
"fontSize": 28,
"fontWeight": "500",
"letterSpacing": -0.5
},
{
"type": "frame",
"id": "pR4qF",
"name": "Uses",
"layout": "vertical",
"gap": 14,
"children": [
{
"type": "frame",
"id": "WIg1Q",
"name": "Outbound calls",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "t5RwBM",
"name": "Icon",
"width": 18,
"height": 18,
"icon": "phone-outgoing",
"library": "lucide",
"fill": "$text-secondary"
},
{
"type": "text",
"id": "B3yWRO",
"name": "Label",
"fill": "$text-secondary",
"content": "Outbound calls",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "mCnTz",
"name": "Custom tools",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "zX9yY",
"name": "Icon",
"width": 18,
"height": 18,
"icon": "wrench",
"library": "lucide",
"fill": "$text-secondary"
},
{
"type": "text",
"id": "P0dki",
"name": "Label",
"fill": "$text-secondary",
"content": "Custom tools",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "wkO92",
"name": "Code-switching",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "k2Wf4p",
"name": "Icon",
"width": 18,
"height": 18,
"icon": "languages",
"library": "lucide",
"fill": "$text-secondary"
},
{
"type": "text",
"id": "ztN3b",
"name": "Label",
"fill": "$text-secondary",
"content": "Code-switching",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "F8xjNN",
"name": "Link",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "text",
"id": "h744D6",
"name": "Label",
"fill": "$text-primary",
"content": "See the example",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "500"
},
{
"type": "icon",
"id": "oDF2h",
"name": "Arrow",
"width": 16,
"height": 16,
"icon": "arrow-right",
"library": "lucide",
"fill": "$text-primary"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "E40A2",
"name": "Capabilities",
"width": "fill_container",
"layout": "vertical",
"gap": 48,
"padding": [
0,
80,
128,
80
],
"children": [
{
"type": "text",
"id": "o2Ak1l",
"name": "Title",
"fill": "$text-primary",
"content": "Everything a phone call needs.",
"fontFamily": "Poppins",
"fontSize": 40,
"fontWeight": "600",
"letterSpacing": -1
},
{
"type": "frame",
"id": "N2cC5",
"name": "Grid",
"clip": true,
"width": "fill_container",
"cornerRadius": 20,
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "aco5z",
"name": "Row",
"width": "fill_container",
"stroke": "$border",
"children": [
{
"type": "frame",
"id": "Fi1tB",
"name": "Phone numbers",
"width": "fill_container",
"stroke": "$border",
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "twi2Y",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "hash",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "n3DgCj",
"name": "Label",
"fill": "$text-primary",
"content": "Phone numbers",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "pil1q",
"name": "SIP trunking",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "u4DL1m",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "network",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "ktrYw",
"name": "Label",
"fill": "$text-primary",
"content": "SIP trunking",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "J5m7XL",
"name": "Call transfer",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "RkJHC",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "phone-forwarded",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "OaehR",
"name": "Label",
"fill": "$text-primary",
"content": "Call transfer",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "u8BDG7",
"name": "Voicemail detection",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "Z7QoS8",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "voicemail",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "KlxKR",
"name": "Label",
"fill": "$text-primary",
"content": "Voicemail detection",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
}
]
},
{
"type": "frame",
"id": "zbDBO",
"name": "Row",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"top": 1
},
"children": [
{
"type": "frame",
"id": "hjqkF",
"name": "Barge-in",
"width": "fill_container",
"stroke": "$border",
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "CYIhg",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "mic",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "O2tF9",
"name": "Label",
"fill": "$text-primary",
"content": "Barge-in",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "Kp80h",
"name": "Multilingual",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "jMGTY",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "languages",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "o42pUp",
"name": "Label",
"fill": "$text-primary",
"content": "Multilingual",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "kybpL",
"name": "Knowledge base",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "wzYAh",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "book-open",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "ZUFmI",
"name": "Label",
"fill": "$text-primary",
"content": "Knowledge base",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "pROuN",
"name": "Custom tools",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "epoLY",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "wrench",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "c7hgu2",
"name": "Label",
"fill": "$text-primary",
"content": "Custom tools",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
}
]
},
{
"type": "frame",
"id": "V4GoPW",
"name": "Row",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"top": 1
},
"children": [
{
"type": "frame",
"id": "xBuWT",
"name": "MCP server",
"width": "fill_container",
"stroke": "$border",
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "vW5eU",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "plug",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "h3i8W",
"name": "Label",
"fill": "$text-primary",
"content": "MCP server",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "igeJH",
"name": "Call recording",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "FumQm",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "circle-dot",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "gX12a",
"name": "Label",
"fill": "$text-primary",
"content": "Call recording",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "ytqsZ",
"name": "Noise filtering",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "L0OEV",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "audio-waveform",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "gzcA5",
"name": "Label",
"fill": "$text-primary",
"content": "Noise filtering",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
},
{
"type": "frame",
"id": "P2Yin",
"name": "Events & webhooks",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"left": 1
},
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "icon",
"id": "zqHxy",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "webhook",
"library": "lucide",
"fill": "$text-primary"
},
{
"type": "text",
"id": "LjKg0",
"name": "Label",
"fill": "$text-primary",
"content": "Events & webhooks",
"fontFamily": "Poppins",
"fontSize": 16,
"fontWeight": "500"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "zuVET",
"name": "Pipeline",
"width": "fill_container",
"layout": "vertical",
"gap": 56,
"padding": [
32,
80,
128,
80
],
"children": [
{
"type": "frame",
"id": "PdCvf",
"name": "Header",
"width": "fill_container",
"layout": "vertical",
"gap": 12,
"children": [
{
"type": "text",
"id": "RpSgJ",
"name": "Title",
"fill": "$text-primary",
"content": "Any model. Any carrier.",
"fontFamily": "Poppins",
"fontSize": 56,
"fontWeight": "600",
"letterSpacing": -1.5
},
{
"type": "text",
"id": "sY9zJ",
"name": "Sub",
"fill": "$text-secondary",
"content": "Swap providers with one line. No lock-in.",
"fontFamily": "Poppins",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "n2T3h",
"name": "Flow",
"width": "fill_container",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "lLKxC",
"name": "Call",
"width": "fill_container",
"height": 240,
"fill": "$surface",
"cornerRadius": 20,
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "frame",
"id": "htE3b",
"name": "Icon Box",
"width": 52,
"height": 52,
"fill": "#FFFFFF0F",
"cornerRadius": 14,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "I64CR2",
"name": "Icon",
"width": 26,
"height": 26,
"icon": "phone-call",
"library": "lucide",
"fill": "$text-primary"
}
]
},
{
"type": "text",
"id": "FeVGK",
"name": "Step",
"fill": "$text-primary",
"content": "Call",
"fontFamily": "Poppins",
"fontSize": 28,
"fontWeight": "600",
"letterSpacing": -0.5
},
{
"type": "text",
"id": "C2XcDn",
"name": "Vendors",
"fill": "$text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "PSTN · SIP · WebRTC",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "U3aAG",
"name": "Link",
"width": 56,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "qdzPu",
"name": "Line",
"fill": "#FFFFFF26",
"width": "fill_container",
"height": 2
},
{
"type": "ellipse",
"id": "gN7oj",
"name": "Pulse",
"fill": "$text-muted",
"width": 10,
"height": 10
}
]
},
{
"type": "frame",
"id": "Y0Jzmc",
"name": "Hear",
"width": "fill_container",
"height": 240,
"fill": "$surface",
"cornerRadius": 20,
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "frame",
"id": "p2kRV",
"name": "Icon Box",
"width": 52,
"height": 52,
"fill": "#FFFFFF0F",
"cornerRadius": 14,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "XHpJR",
"name": "Icon",
"width": 26,
"height": 26,
"icon": "ear",
"library": "lucide",
"fill": "$text-primary"
}
]
},
{
"type": "text",
"id": "H9EXSe",
"name": "Step",
"fill": "$text-primary",
"content": "Hear",
"fontFamily": "Poppins",
"fontSize": 28,
"fontWeight": "600",
"letterSpacing": -0.5
},
{
"type": "text",
"id": "uHUom",
"name": "Vendors",
"fill": "$text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Deepgram · Google",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "PmhcR",
"name": "Link",
"width": 56,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "R5BUC6",
"name": "Line",
"fill": "#FFFFFF26",
"width": "fill_container",
"height": 2
},
{
"type": "ellipse",
"id": "hpjpx",
"name": "Pulse",
"fill": "$text-muted",
"width": 10,
"height": 10
}
]
},
{
"type": "frame",
"id": "uHQwm",
"name": "Think",
"width": "fill_container",
"height": 240,
"fill": "$surface",
"cornerRadius": 20,
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "frame",
"id": "T4bAX2",
"name": "Icon Box",
"width": 52,
"height": 52,
"fill": "#FFFFFF0F",
"cornerRadius": 14,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "OBrEf",
"name": "Icon",
"width": 26,
"height": 26,
"icon": "sparkles",
"library": "lucide",
"fill": "$text-primary"
}
]
},
{
"type": "text",
"id": "K4aJ2E",
"name": "Step",
"fill": "$text-primary",
"content": "Think",
"fontFamily": "Poppins",
"fontSize": 28,
"fontWeight": "600",
"letterSpacing": -0.5
},
{
"type": "text",
"id": "DSHfv",
"name": "Vendors",
"fill": "$text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "OpenAI · Anthropic\nGemini · Groq · Ollama",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "AWkzH",
"name": "Link",
"width": 56,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "w14Iv",
"name": "Line",
"fill": "#FFFFFF26",
"width": "fill_container",
"height": 2
},
{
"type": "ellipse",
"id": "G0ElvC",
"name": "Pulse",
"fill": "$text-muted",
"width": 10,
"height": 10
}
]
},
{
"type": "frame",
"id": "Q5RAmH",
"name": "Speak",
"width": "fill_container",
"height": 240,
"fill": "$surface",
"cornerRadius": 20,
"stroke": "$border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 20,
"padding": 28,
"children": [
{
"type": "frame",
"id": "YMcuU",
"name": "Icon Box",
"width": 52,
"height": 52,
"fill": "#FFFFFF0F",
"cornerRadius": 14,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "bzhPp",
"name": "Icon",
"width": 26,
"height": 26,
"icon": "audio-lines",
"library": "lucide",
"fill": "$text-primary"
}
]
},
{
"type": "text",
"id": "kbAiD",
"name": "Step",
"fill": "$text-primary",
"content": "Speak",
"fontFamily": "Poppins",
"fontSize": 28,
"fontWeight": "600",
"letterSpacing": -0.5
},
{
"type": "text",
"id": "U931F",
"name": "Vendors",
"fill": "$text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "ElevenLabs · Azure\nDeepgram · Google",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "Vhk3N",
"name": "Code",
"width": "fill_container",
"fill": "$surface",
"stroke": "$border",
"strokeWidth": {
"top": 1,
"bottom": 1
},
"gap": 80,
"padding": [
128,
80
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "NzDHB",
"name": "Copy",
"width": 440,
"layout": "vertical",
"gap": 20,
"children": [
{
"type": "frame",
"id": "uPgxx",
"name": "Eyebrow",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "H1U3T",
"name": "Icon",
"width": 16,
"height": 16,
"icon": "bot",
"library": "lucide",
"fill": "$text-secondary"
},
{
"type": "text",
"id": "c7x8P",
"name": "Label",
"fill": "$text-secondary",
"content": "AUTOPILOT",
"fontFamily": "Roboto Mono",
"fontSize": 13,
"fontWeight": "500",
"letterSpacing": 1.5
}
]
},
{
"type": "text",
"id": "ez3UE",
"name": "Title",
"fill": "$text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Your agent is a YAML file.",
"lineHeight": 1.08,
"fontFamily": "Poppins",
"fontSize": 56,
"fontWeight": "600",
"letterSpacing": -1.5
},
{
"type": "text",
"id": "qOW79",
"name": "Sub",
"fill": "$text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Pick the voice, the model, and the prompt. Deploy with one command.",
"lineHeight": 1.5,
"fontFamily": "Poppins",
"fontSize": 17,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "xmjI8",
"name": "Learn More",
"gap": 8,
"padding": [
8,
0,
0,
0
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "zdb9J",
"name": "Label",
"fill": "$text-primary",
"content": "Learn more about Autopilot",
"fontFamily": "Poppins",
"fontSize": 15,
"fontWeight": "500"
},
{
"type": "icon",
"id": "QKAJM",
"name": "Arrow",
"width": 16,
"height": 16,
"icon": "arrow-right",
"library": "lucide",
"fill": "$text-primary"
}
]
}
]
},
{
"type": "frame",
"id": "o9OoXA",
"name": "Editor",
"clip": true,
"width": "fill_container",
"fill": "$bg",
"cornerRadius": 16,
"stroke": "$border",
"strokeWidth": 1,
"effect": {
"type": "shadow",
"shadowType": "outer",
"color": "#00000066",
"offset": {
"x": 0,
"y": 24
},
"blur": 64
},
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "wXT61",
"name": "Title Bar",
"width": "fill_container",
"stroke": "$border",
"strokeWidth": {
"bottom": 1
},
"gap": 8,
"padding": [
14,
18
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "LWvzm",
"name": "Dot",
"fill": "#F9706699",
"width": 10,
"height": 10
},
{
"type": "ellipse",
"id": "TXa6Y",
"name": "Dot",
"fill": "#F5A52499",
"width": 10,
"height": 10
},
{
"type": "ellipse",
"id": "N9bkzl",
"name": "Dot",
"fill": "#39E19E99",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "Kb6un",
"name": "File",
"fill": "$text-muted",
"content": " agent.yaml",
"fontFamily": "Roboto Mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "E0824c",
"name": "Body",
"width": "fill_container",
"layout": "vertical",
"gap": 2,
"padding": [
24,
28
],
"children": [
{
"type": "frame",
"id": "xyPp6",
"name": "Line 1",
"gap": 20,
"children": [
{
"type": "text",
"id": "oG4TF",
"name": "No",
"fill": "#555555",
"content": " 1",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "PuMhH",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "BF6Xr",
"name": "Tok",
"fill": "#82AAFF",
"content": "name",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "X9ncT",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "QvUF8",
"name": "Tok",
"fill": "#E8C07D",
"content": " front-desk",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "h6ooj",
"name": "Line 2",
"gap": 20,
"children": [
{
"type": "text",
"id": "OazoV",
"name": "No",
"fill": "#555555",
"content": " 2",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "gvLuP",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "d6Wzn",
"name": "Tok",
"fill": "#82AAFF",
"content": "type",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "k9pvP",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "wzpN9",
"name": "Tok",
"fill": "#E8C07D",
"content": " AUTOPILOT",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "l5ELR",
"name": "Line 3",
"gap": 20,
"children": [
{
"type": "text",
"id": "v9WZW",
"name": "No",
"fill": "#555555",
"content": " 3",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "D6AmC",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "bw3uR",
"name": "Tok",
"fill": "#82AAFF",
"content": "speechToText",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "ioGxQ",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "AabCG",
"name": "Line 4",
"gap": 20,
"children": [
{
"type": "text",
"id": "fdfJa",
"name": "No",
"fill": "#555555",
"content": " 4",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "hZESy",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "ndBam",
"name": "Tok",
"fill": "#82AAFF",
"content": " productRef",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "gp25y",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "bE5eF",
"name": "Tok",
"fill": "#E8C07D",
"content": " stt.deepgram",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "VIiSP",
"name": "Line 5",
"gap": 20,
"children": [
{
"type": "text",
"id": "CF1TP",
"name": "No",
"fill": "#555555",
"content": " 5",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "j281ln",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "zxL05",
"name": "Tok",
"fill": "#82AAFF",
"content": " config",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "DkMLt",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "hIbB3",
"name": "Tok",
"fill": "#8D8D8D",
"content": " { ",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "U1JGLv",
"name": "Tok",
"fill": "#82AAFF",
"content": "model",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "BPBJ1",
"name": "Tok",
"fill": "#8D8D8D",
"content": ": ",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "KR16w",
"name": "Tok",
"fill": "#E8C07D",
"content": "nova-3",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "Dix7b",
"name": "Tok",
"fill": "#8D8D8D",
"content": ", ",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "lT6V7",
"name": "Tok",
"fill": "#82AAFF",
"content": "languageCode",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "ZYi35",
"name": "Tok",
"fill": "#8D8D8D",
"content": ": ",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "BvmfD",
"name": "Tok",
"fill": "#E8C07D",
"content": "multi",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "oI7GA",
"name": "Tok",
"fill": "#8D8D8D",
"content": " }",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "poSua",
"name": "Line 6",
"gap": 20,
"children": [
{
"type": "text",
"id": "miX5L",
"name": "No",
"fill": "#555555",
"content": " 6",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "mqJ9G",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "PJJj4",
"name": "Tok",
"fill": "#82AAFF",
"content": "textToSpeech",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "AMBfI",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "EyLRa",
"name": "Line 7",
"gap": 20,
"children": [
{
"type": "text",
"id": "S9xgVb",
"name": "No",
"fill": "#555555",
"content": " 7",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "MlJWV",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "XfSSf",
"name": "Tok",
"fill": "#82AAFF",
"content": " productRef",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "Y5JOc",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "weaky",
"name": "Tok",
"fill": "#E8C07D",
"content": " tts.deepgram",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "FLs9j",
"name": "Line 8",
"gap": 20,
"children": [
{
"type": "text",
"id": "i1RJh",
"name": "No",
"fill": "#555555",
"content": " 8",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "hvntR",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "k3xw6",
"name": "Tok",
"fill": "#82AAFF",
"content": " config",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "mXQnf",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "U4VSm",
"name": "Tok",
"fill": "#8D8D8D",
"content": " { ",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "G0SgP",
"name": "Tok",
"fill": "#82AAFF",
"content": "voice",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "x8sdmf",
"name": "Tok",
"fill": "#8D8D8D",
"content": ": ",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "IJm4t",
"name": "Tok",
"fill": "#E8C07D",
"content": "aura-asteria-en",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "RVMAA",
"name": "Tok",
"fill": "#8D8D8D",
"content": " }",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "ZnKDT",
"name": "Line 9",
"gap": 20,
"children": [
{
"type": "text",
"id": "pDoIX",
"name": "No",
"fill": "#555555",
"content": " 9",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "oi2sM",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "ZOVkt",
"name": "Tok",
"fill": "#82AAFF",
"content": "intelligence",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "jH9HR",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "i9mmKD",
"name": "Line 10",
"gap": 20,
"children": [
{
"type": "text",
"id": "fCWsk",
"name": "No",
"fill": "#555555",
"content": "10",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "QDu03",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "F4bWrM",
"name": "Tok",
"fill": "#82AAFF",
"content": " productRef",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "Y9SHLy",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "ZMjH5",
"name": "Tok",
"fill": "#E8C07D",
"content": " llm.openai",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "m4ziR",
"name": "Line 11",
"gap": 20,
"children": [
{
"type": "text",
"id": "Z3nCH",
"name": "No",
"fill": "#555555",
"content": "11",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "uTTLS",
"name": "Tokens",
"children": [
{
"type": "text",
"id": "zqnGl",
"name": "Tok",
"fill": "#82AAFF",
"content": " config",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
},
{
"type": "text",
"id": "x7fC7Y",
"name": "Tok",
"fill": "#8D8D8D",
"content": ":",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "aLiDT",
"name": "Line 12",
"gap": 20,
"children": [
{
"type": "text",
"id": "Dgv27",
"name": "No",
"fill": "#555555",
"content": "12",
"lineHeight": 1.6,
"fontFamily": "Roboto Mono",
"fontSize": 14,