designs/docs.pen
Rama main · réplica de lectura del repositorio original.
{
"version": "2.21",
"children": [
{
"type": "frame",
"id": "XzPmi",
"x": 0,
"y": 0,
"name": "Docs / Self-hosting / Banner / Dark",
"theme": {
"ui:mode": "dark"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface-raised",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "IR4Qa",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "m1gdkM",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "SELF-HOSTING",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "WYYSo",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Fonoster on your own servers.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "i3wubo",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "From download to dashboard in three commands.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "t1echm",
"name": "Terminal",
"clip": true,
"width": 720,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "kZ22H",
"name": "Title bar",
"width": "fill_container",
"stroke": "$ui:border",
"strokeWidth": {
"bottom": 1
},
"gap": 10,
"padding": [
18,
24
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "h57Rw",
"name": "Dot 1",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "TwozK",
"name": "Dot 2",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "V9wsUJ",
"name": "Dot 3",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "text",
"id": "DvzfK",
"name": "Path",
"fill": "$ui:text-muted",
"content": "~/fonoster",
"fontFamily": "$ui:--font-primary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "X8EOU",
"name": "Lines",
"width": "fill_container",
"layout": "vertical",
"gap": 18,
"padding": [
32,
32,
36,
32
],
"children": [
{
"type": "frame",
"id": "Z1HXEv",
"name": "Command 1",
"gap": 14,
"children": [
{
"type": "text",
"id": "p9CXpI",
"name": "Prompt",
"fill": "$ui:text-muted",
"content": "$",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "text",
"id": "HwmYz",
"name": "Text",
"fill": "$ui:text-primary",
"content": "curl -fsSL …/fonoster-0.30.0.tar.gz | tar xz",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "PZY4B",
"name": "Command 2",
"gap": 14,
"children": [
{
"type": "text",
"id": "ZUB9a",
"name": "Prompt",
"fill": "$ui:text-muted",
"content": "$",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "text",
"id": "A3AbTU",
"name": "Text",
"fill": "$ui:text-primary",
"content": "npx -p @fonoster/common fonoster-config init",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Fvym7",
"name": "Command 3",
"gap": 14,
"children": [
{
"type": "text",
"id": "LrKTh",
"name": "Prompt",
"fill": "$ui:text-muted",
"content": "$",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "text",
"id": "HGPBN",
"name": "Text",
"fill": "$ui:text-primary",
"content": "docker compose up -d",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "rpPYk",
"name": "Result",
"gap": 14,
"padding": [
10,
0,
0,
0
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "hkgCd",
"name": "Check",
"width": 22,
"height": 22,
"icon": "circle-check",
"library": "lucide",
"fill": "$ui:accent"
},
{
"type": "text",
"id": "XRt8D",
"name": "Text",
"fill": "$ui:text-secondary",
"content": "Dashboard http://192.0.2.10:8449",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "xB0Kp",
"x": 0,
"y": 700,
"name": "Docs / Self-hosting / Banner / Light",
"theme": {
"ui:mode": "light"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "WKrOF",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "pKgUD",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "SELF-HOSTING",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "hyjPP",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Fonoster on your own servers.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "xaXWQ",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "From download to dashboard in three commands.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "s9ddRT",
"name": "Terminal",
"clip": true,
"width": 720,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "Zug9A",
"name": "Title bar",
"width": "fill_container",
"stroke": "$ui:border",
"strokeWidth": {
"bottom": 1
},
"gap": 10,
"padding": [
18,
24
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "S8B07n",
"name": "Dot 1",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "dbvNH",
"name": "Dot 2",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "K1jyz",
"name": "Dot 3",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "text",
"id": "lgzdi",
"name": "Path",
"fill": "$ui:text-muted",
"content": "~/fonoster",
"fontFamily": "$ui:--font-primary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "lvV4z",
"name": "Lines",
"width": "fill_container",
"layout": "vertical",
"gap": 18,
"padding": [
32,
32,
36,
32
],
"children": [
{
"type": "frame",
"id": "MfDme",
"name": "Command 1",
"gap": 14,
"children": [
{
"type": "text",
"id": "itHuA",
"name": "Prompt",
"fill": "$ui:text-muted",
"content": "$",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "text",
"id": "ueWEh",
"name": "Text",
"fill": "$ui:text-primary",
"content": "curl -fsSL …/fonoster-0.30.0.tar.gz | tar xz",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "FbbAB",
"name": "Command 2",
"gap": 14,
"children": [
{
"type": "text",
"id": "j4nAW",
"name": "Prompt",
"fill": "$ui:text-muted",
"content": "$",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "text",
"id": "CO1Oc",
"name": "Text",
"fill": "$ui:text-primary",
"content": "npx -p @fonoster/common fonoster-config init",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "rQV6d",
"name": "Command 3",
"gap": 14,
"children": [
{
"type": "text",
"id": "OeN8o",
"name": "Prompt",
"fill": "$ui:text-muted",
"content": "$",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "text",
"id": "iqc46",
"name": "Text",
"fill": "$ui:text-primary",
"content": "docker compose up -d",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "BnGGz",
"name": "Result",
"gap": 14,
"padding": [
10,
0,
0,
0
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "pL2lS",
"name": "Check",
"width": 22,
"height": 22,
"icon": "circle-check",
"library": "lucide",
"fill": "$ui:accent"
},
{
"type": "text",
"id": "veDs8",
"name": "Text",
"fill": "$ui:text-secondary",
"content": "Dashboard http://192.0.2.10:8449",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "zetxQ",
"x": 1700,
"y": 0,
"name": "Docs / Install with Docker Compose / Banner / Dark",
"theme": {
"ui:mode": "dark"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface-raised",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "aNeC1",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "f70BTZ",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "DOCKER COMPOSE",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "K1Q7EV",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "One machine. Every service.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "bRQi2",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "The voice path, the API, the dashboard and Autopilot, started with one command.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "TRO91",
"name": "Terminal",
"clip": true,
"width": 720,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "jIr2i",
"name": "Title bar",
"width": "fill_container",
"stroke": "$ui:border",
"strokeWidth": {
"bottom": 1
},
"gap": 10,
"padding": [
18,
24
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "w1RjrL",
"name": "Dot 1",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "Oh7cs",
"name": "Dot 2",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "y4SHL5",
"name": "Dot 3",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "text",
"id": "U0OnT",
"name": "Path",
"fill": "$ui:text-muted",
"content": "~/fonoster",
"fontFamily": "$ui:--font-primary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "enI2F",
"name": "Lines",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"padding": [
28,
32,
32,
32
],
"children": [
{
"type": "frame",
"id": "Olna3",
"name": "Command",
"gap": 14,
"padding": [
0,
0,
8,
0
],
"children": [
{
"type": "text",
"id": "AE6p4",
"name": "Prompt",
"fill": "$ui:text-muted",
"content": "$",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "text",
"id": "UVIUv",
"name": "Text",
"fill": "$ui:text-primary",
"content": "docker compose ps",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "e2nDkm",
"name": "Services",
"width": "fill_container",
"gap": 56,
"children": [
{
"type": "frame",
"id": "fjXi4",
"name": "Column 1",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "x9b99P",
"name": "apiserver",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "As1RN",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "bSOQw",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "apiserver",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "u9Vxaz",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "OpU1j",
"name": "autopilot",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "DD8Dj",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "a8Dev",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "autopilot",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "oLiul",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "iUn45",
"name": "dashboard",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "G34hP",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "gWQ6g",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "dashboard",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "MHdaR",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "EZqvI",
"name": "envoy",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "ZStIr",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "iQCD1",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "envoy",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "i8lPsD",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "C0MbY",
"name": "gateway",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "IbiID",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "nYzgg",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "appbridge",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "Ex3mS",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "oefZ4",
"name": "roomr",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "nV7kx",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "mMaqg",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "roomr",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "t16H2",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "QPFQu",
"name": "Column 2",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "QjL2I",
"name": "minio",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "TOzUx",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "vFz4F",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "minio",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "l2vXM",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "EDUkz",
"name": "nats",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "W0APQM",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "FtzWx",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "nats",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "sqxIK",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "kfQxZ",
"name": "postgres",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "GezB0",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "SCoIo",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "postgres",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "ZiQea",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "vCYUM",
"name": "routr",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "y57pE",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "f9jS00",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "routr",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "zZV1D",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "egRoo",
"name": "rtpengine",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "YJexw",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "dUFom",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "rtpengine",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "Z33MCN",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "ibh1W",
"x": 1700,
"y": 700,
"name": "Docs / Install with Docker Compose / Banner / Light",
"theme": {
"ui:mode": "light"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Xc8to",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "AzmdY",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "DOCKER COMPOSE",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "DRsJ9",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "One machine. Every service.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "Hvipw",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "The voice path, the API, the dashboard and Autopilot, started with one command.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "g5rbc",
"name": "Terminal",
"clip": true,
"width": 720,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "wgg6J",
"name": "Title bar",
"width": "fill_container",
"stroke": "$ui:border",
"strokeWidth": {
"bottom": 1
},
"gap": 10,
"padding": [
18,
24
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "KF8l2",
"name": "Dot 1",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "u5yiwa",
"name": "Dot 2",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "LQtp2",
"name": "Dot 3",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "text",
"id": "y25LN",
"name": "Path",
"fill": "$ui:text-muted",
"content": "~/fonoster",
"fontFamily": "$ui:--font-primary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "saM6g",
"name": "Lines",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"padding": [
28,
32,
32,
32
],
"children": [
{
"type": "frame",
"id": "NwtDp",
"name": "Command",
"gap": 14,
"padding": [
0,
0,
8,
0
],
"children": [
{
"type": "text",
"id": "p8M4g",
"name": "Prompt",
"fill": "$ui:text-muted",
"content": "$",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "text",
"id": "U5Kvw",
"name": "Text",
"fill": "$ui:text-primary",
"content": "docker compose ps",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "QgkCi",
"name": "Services",
"width": "fill_container",
"gap": 56,
"children": [
{
"type": "frame",
"id": "sr4DS",
"name": "Column 1",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "s4SAFm",
"name": "apiserver",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "Bh10E",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "IVuIC",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "apiserver",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "bWRzg",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "MxUuY",
"name": "autopilot",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "k4wTz",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "FujmK",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "autopilot",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "hAWfe",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Jly6P",
"name": "dashboard",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "KOKuv",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "AK0fU",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "dashboard",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "GmvN0",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "G5RFu",
"name": "envoy",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "bg1CL",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "kjfJ4",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "envoy",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "EAhLu",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "sDbQm",
"name": "gateway",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "GgKgm",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "DvFjW",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "appbridge",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "D4kMeR",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "PmDDN",
"name": "roomr",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "RscXt",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "tKxkd",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "roomr",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "Wbbvw",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "isLl3",
"name": "Column 2",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "bD51Q",
"name": "minio",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "Z48Rqn",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "OhZHL",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "minio",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "e1VeU5",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "nVHRY",
"name": "nats",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "DsWBL",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "uPpxT",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "nats",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "MdUQy",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "HmxW2",
"name": "postgres",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "vOSb9",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "NJ0fK",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "postgres",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "LPMGD",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "azqWi",
"name": "routr",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "CHnhw",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "Y8dXX",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "routr",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "AQLzf",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "I1O6E",
"name": "rtpengine",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "wL6Ne",
"name": "Status",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "Zh1dE",
"name": "Name",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": 120,
"content": "rtpengine",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
},
{
"type": "text",
"id": "r9MS6u",
"name": "State",
"fill": "$ui:text-muted",
"content": "Up",
"fontFamily": "$ui:--font-primary",
"fontSize": 18,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "JbV94",
"x": 3400,
"y": 0,
"name": "Docs / Hacking Fonoster / Banner / Dark",
"theme": {
"ui:mode": "dark"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface-raised",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "KwI1h",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "xTdJO",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "HACKING FONOSTER",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "stSwo",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Fonoster, from source.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "C2mDc",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Open the dev container. Every component reloads as you save.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "x7KuUs",
"name": "Terminal",
"clip": true,
"width": 720,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "lh6gm",
"name": "Title bar",
"width": "fill_container",
"stroke": "$ui:border",
"strokeWidth": {
"bottom": 1
},
"gap": 10,
"padding": [
18,
24
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "p1OXDj",
"name": "Dot 1",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "Dxp0G",
"name": "Dot 2",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "IhHyk",
"name": "Dot 3",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "text",
"id": "mANB2",
"name": "Path",
"fill": "$ui:text-muted",
"content": "~/fonoster",
"fontFamily": "$ui:--font-primary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "oP0Cp",
"name": "Lines",
"width": "fill_container",
"layout": "vertical",
"gap": 12,
"padding": [
28,
32,
32,
32
],
"children": [
{
"type": "frame",
"id": "f6dQ9",
"name": "Command",
"gap": 14,
"padding": [
0,
0,
6,
0
],
"children": [
{
"type": "text",
"id": "bBden",
"name": "Prompt",
"fill": "$ui:text-muted",
"content": "$",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "text",
"id": "YvY8M",
"name": "Text",
"fill": "$ui:text-primary",
"content": "npm run dev",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "msj2J",
"name": "Log apiserver",
"gap": 12,
"children": [
{
"type": "text",
"id": "q1Vb7E",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[apiserver]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "tNn4W",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "migrations applied, listening",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "m9E57n",
"name": "Log gateway",
"gap": 12,
"children": [
{
"type": "text",
"id": "s4crpH",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[gateway]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "ohRRh",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "ready",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "nhnLA",
"name": "Log autopilot",
"gap": 12,
"children": [
{
"type": "text",
"id": "ShbVu",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[autopilot]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "FekHn",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "ready",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "x1VzQ7",
"name": "Log roomr",
"gap": 12,
"children": [
{
"type": "text",
"id": "CxyDF",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[roomr]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "A3Ndw",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "built, listening",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "nZqWp",
"name": "Log dashboard",
"gap": 12,
"children": [
{
"type": "text",
"id": "X8svQ",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[dashboard]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "CKPnb",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "Vite ready",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "fbPR5",
"name": "Log gateway",
"gap": 12,
"children": [
{
"type": "text",
"id": "QApPg",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[gateway]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "Rcu5m",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "reloaded (Call.ts)",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "bmkIB",
"x": 3400,
"y": 700,
"name": "Docs / Hacking Fonoster / Banner / Light",
"theme": {
"ui:mode": "light"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Zgg5c",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "CyOdJ",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "HACKING FONOSTER",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "BtMCS",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Fonoster, from source.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "vIo3Q",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Open the dev container. Every component reloads as you save.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "xZyz9",
"name": "Terminal",
"clip": true,
"width": 720,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "xFg8w",
"name": "Title bar",
"width": "fill_container",
"stroke": "$ui:border",
"strokeWidth": {
"bottom": 1
},
"gap": 10,
"padding": [
18,
24
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "i9B3c9",
"name": "Dot 1",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "NnD0j",
"name": "Dot 2",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "rrisc",
"name": "Dot 3",
"fill": "$ui:border",
"width": 12,
"height": 12
},
{
"type": "text",
"id": "tKnbz",
"name": "Path",
"fill": "$ui:text-muted",
"content": "~/fonoster",
"fontFamily": "$ui:--font-primary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "j2ZoF",
"name": "Lines",
"width": "fill_container",
"layout": "vertical",
"gap": 12,
"padding": [
28,
32,
32,
32
],
"children": [
{
"type": "frame",
"id": "RReFh",
"name": "Command",
"gap": 14,
"padding": [
0,
0,
6,
0
],
"children": [
{
"type": "text",
"id": "hLshI",
"name": "Prompt",
"fill": "$ui:text-muted",
"content": "$",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
},
{
"type": "text",
"id": "XT77g",
"name": "Text",
"fill": "$ui:text-primary",
"content": "npm run dev",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "sNjHY",
"name": "Log apiserver",
"gap": 12,
"children": [
{
"type": "text",
"id": "Vhq2X",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[apiserver]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "FY2rJ",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "migrations applied, listening",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "dupxp",
"name": "Log gateway",
"gap": 12,
"children": [
{
"type": "text",
"id": "KJJ8F",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[gateway]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "uH2NQ",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "ready",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "llnc4",
"name": "Log autopilot",
"gap": 12,
"children": [
{
"type": "text",
"id": "CYNUE",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[autopilot]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "jb878",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "ready",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "k0AwW",
"name": "Log roomr",
"gap": 12,
"children": [
{
"type": "text",
"id": "j4VJJf",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[roomr]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "hv6Bn",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "built, listening",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "qJPzv",
"name": "Log dashboard",
"gap": 12,
"children": [
{
"type": "text",
"id": "UAJ5U",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[dashboard]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "Ml5x5",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "Vite ready",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ta4EP",
"name": "Log gateway",
"gap": 12,
"children": [
{
"type": "text",
"id": "Ru77Q",
"name": "Prefix",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": 150,
"content": "[gateway]",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
},
{
"type": "text",
"id": "lnFej",
"name": "Message",
"fill": "$ui:text-secondary",
"content": "reloaded (Call.ts)",
"fontFamily": "$ui:--font-primary",
"fontSize": 19,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "LQHpg",
"x": 0,
"y": 1500,
"name": "Docs / Hacking Fonoster / Dev container / Dark",
"theme": {
"ui:mode": "dark"
},
"clip": true,
"width": 1600,
"height": 900,
"fill": "$ui:surface-raised",
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"layout": "none",
"children": [
{
"type": "text",
"id": "p8IT2",
"x": 48,
"y": 40,
"name": "The dev container",
"fill": "$ui:text-primary",
"content": "The dev container",
"fontFamily": "$ui:--font-secondary",
"fontSize": 30,
"fontWeight": "600"
},
{
"type": "text",
"id": "tUa53",
"x": 48,
"y": 82,
"name": "Dependencies run as containers. Your code runs from source in the workspace.",
"fill": "$ui:text-secondary",
"content": "Dependencies run as containers. Your code runs from source in the workspace.",
"fontFamily": "$ui:--font-secondary",
"fontSize": 17,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "pUJFD",
"x": 48,
"y": 150,
"name": "Your machine",
"width": 272,
"height": 690,
"fill": "$ui:surface-raised",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none"
},
{
"type": "text",
"id": "mJWc5",
"x": 72,
"y": 170,
"name": "YOUR MACHINE",
"fill": "$ui:text-muted",
"content": "YOUR MACHINE",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 1.6
},
{
"type": "frame",
"id": "h7wsiZ",
"x": 72,
"y": 214,
"name": "VS Code",
"width": 224,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "icon",
"id": "b0IUw",
"x": 18,
"y": 18,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "code",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "qpI71",
"x": 52,
"y": 17,
"name": "VS Code",
"fill": "$ui:text-primary",
"content": "VS Code",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "RERnE",
"x": 52,
"y": 41,
"name": "edit · npm run dev",
"fill": "$ui:text-muted",
"content": "edit · npm run dev",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "nfcji",
"x": 72,
"y": 420,
"name": "Browser",
"width": 224,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "icon",
"id": "U8teLe",
"x": 18,
"y": 18,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "globe",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "JXXZP",
"x": 52,
"y": 17,
"name": "Browser",
"fill": "$ui:text-primary",
"content": "Browser",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "Hh7dl",
"x": 52,
"y": 41,
"name": "localhost:8449",
"fill": "$ui:text-muted",
"content": "localhost:8449",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "jSXrS",
"x": 72,
"y": 640,
"name": "Softphone",
"width": 224,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "icon",
"id": "d0ZPc5",
"x": 18,
"y": 18,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "phone",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "fo8IS",
"x": 52,
"y": 17,
"name": "Softphone",
"fill": "$ui:text-primary",
"content": "Softphone",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "BUWmD",
"x": 52,
"y": 41,
"name": "optional · SIP 5060",
"fill": "$ui:text-muted",
"content": "optional · SIP 5060",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "su0cf",
"x": 376,
"y": 150,
"name": "Dev container",
"width": 1176,
"height": 690,
"fill": "$ui:surface-raised",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none"
},
{
"type": "text",
"id": "MXqJQ",
"x": 400,
"y": 170,
"name": "DEV CONTAINER · DOCKER COMPOSE",
"fill": "$ui:text-muted",
"content": "DEV CONTAINER · DOCKER COMPOSE",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 1.6
},
{
"type": "frame",
"id": "L63Cer",
"x": 400,
"y": 420,
"name": "Envoy",
"width": 250,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "icon",
"id": "u775U",
"x": 18,
"y": 18,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "network",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "p1Oo72",
"x": 52,
"y": 17,
"name": "Envoy",
"fill": "$ui:text-primary",
"content": "Envoy",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "UoBlG",
"x": 52,
"y": 41,
"name": ":8449 → API · UI · /sip",
"fill": "$ui:text-muted",
"content": ":8449 → API · UI · /sip",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "lg2yX",
"x": 400,
"y": 600,
"name": "Routr",
"width": 250,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "icon",
"id": "L62frD",
"x": 18,
"y": 18,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "phone-forwarded",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "h9MTvH",
"x": 52,
"y": 17,
"name": "Routr",
"fill": "$ui:text-primary",
"content": "Routr",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "h1lx4v",
"x": 52,
"y": 41,
"name": "SIP signaling",
"fill": "$ui:text-muted",
"content": "SIP signaling",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "G5Xbsu",
"x": 400,
"y": 730,
"name": "RTPEngine",
"width": 250,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "icon",
"id": "Z9zoc",
"x": 18,
"y": 18,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "audio-waveform",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "HEMki",
"x": 52,
"y": 17,
"name": "RTPEngine",
"fill": "$ui:text-primary",
"content": "RTPEngine",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "XTfm6",
"x": 52,
"y": 41,
"name": "RTP 10000–10999",
"fill": "$ui:text-muted",
"content": "RTP 10000–10999",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "c5CCkk",
"x": 712,
"y": 214,
"name": "Workspace",
"width": 520,
"height": 326,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"layout": "none"
},
{
"type": "text",
"id": "m04Z9w",
"x": 736,
"y": 234,
"name": "WORKSPACE · YOUR SOURCE, LIVE RELOAD",
"fill": "$ui:accent-text",
"content": "WORKSPACE · YOUR SOURCE, LIVE RELOAD",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 1.6
},
{
"type": "frame",
"id": "el3pf",
"x": 736,
"y": 282,
"name": "apiserver",
"width": 152,
"height": 64,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"layout": "none",
"children": [
{
"type": "icon",
"id": "Di8uL",
"x": 14,
"y": 21,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "server",
"library": "lucide",
"fill": "$ui:accent"
},
{
"type": "text",
"id": "X17Fs",
"x": 44,
"y": 20,
"name": "apiserver",
"fill": "$ui:text-primary",
"content": "apiserver",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "iXMWp",
"x": 896,
"y": 282,
"name": "dashboard",
"width": 152,
"height": 64,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"layout": "none",
"children": [
{
"type": "icon",
"id": "kX81x",
"x": 14,
"y": 21,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "layout-dashboard",
"library": "lucide",
"fill": "$ui:accent"
},
{
"type": "text",
"id": "W4XlPo",
"x": 44,
"y": 20,
"name": "dashboard",
"fill": "$ui:text-primary",
"content": "dashboard",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "AISzR",
"x": 736,
"y": 442,
"name": "gateway",
"width": 228,
"height": 64,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"layout": "none",
"children": [
{
"type": "icon",
"id": "V1QovO",
"x": 18,
"y": 21,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "git-merge",
"library": "lucide",
"fill": "$ui:accent"
},
{
"type": "text",
"id": "RjT5s",
"x": 52,
"y": 20,
"name": "gateway",
"fill": "$ui:text-primary",
"content": "gateway",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "a7sSGo",
"x": 980,
"y": 442,
"name": "autopilot",
"width": 228,
"height": 64,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"layout": "none",
"children": [
{
"type": "icon",
"id": "G13aPn",
"x": 18,
"y": 21,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "bot",
"library": "lucide",
"fill": "$ui:accent"
},
{
"type": "text",
"id": "NKNPr",
"x": 52,
"y": 20,
"name": "autopilot",
"fill": "$ui:text-primary",
"content": "autopilot",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "mk7AD",
"x": 1056,
"y": 282,
"name": "fakes",
"width": 152,
"height": 64,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"layout": "none",
"children": [
{
"type": "icon",
"id": "q2wIOz",
"x": 14,
"y": 21,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "flask-conical",
"library": "lucide",
"fill": "$ui:accent"
},
{
"type": "text",
"id": "RVhRY",
"x": 44,
"y": 20,
"name": "fakes",
"fill": "$ui:text-primary",
"content": "fakes",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
}
]
},
{
"type": "text",
"id": "hcRwD",
"x": 1272,
"y": 214,
"name": "DATA",
"fill": "$ui:text-muted",
"content": "DATA",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 1.6
},
{
"type": "frame",
"id": "i1yEc",
"x": 1272,
"y": 250,
"name": "Postgres",
"width": 256,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "icon",
"id": "XvED5",
"x": 18,
"y": 18,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "database",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "X9r66H",
"x": 52,
"y": 17,
"name": "Postgres",
"fill": "$ui:text-primary",
"content": "Postgres",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "xlvhf",
"x": 52,
"y": 41,
"name": "state",
"fill": "$ui:text-muted",
"content": "state",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "C8yESI",
"x": 1272,
"y": 350,
"name": "NATS",
"width": 256,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "icon",
"id": "L7JoR",
"x": 18,
"y": 18,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "radio-tower",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "cBbol",
"x": 52,
"y": 17,
"name": "NATS",
"fill": "$ui:text-primary",
"content": "NATS",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "w0CdAa",
"x": 52,
"y": 41,
"name": "events",
"fill": "$ui:text-muted",
"content": "events",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "l31yU",
"x": 1272,
"y": 450,
"name": "MinIO",
"width": 256,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "icon",
"id": "TQYdl",
"x": 18,
"y": 18,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "hard-drive",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "Dj1mp",
"x": 52,
"y": 17,
"name": "MinIO",
"fill": "$ui:text-primary",
"content": "MinIO",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "FzWIx",
"x": 52,
"y": 41,
"name": "recordings",
"fill": "$ui:text-muted",
"content": "recordings",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "rectangle",
"id": "X0mdK",
"x": 296,
"y": 251,
"name": "Edge",
"fill": "$ui:accent",
"width": 416,
"height": 2
},
{
"type": "path",
"id": "RZfpz",
"x": 702,
"y": 246,
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:accent",
"width": 10,
"height": 12
},
{
"type": "frame",
"id": "RzW3u",
"x": 470,
"y": 236,
"name": "Pill your source",
"fill": "$ui:surface-raised",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1,
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "vLKtO",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "your source",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "rectangle",
"id": "GCe3U",
"x": 296,
"y": 457,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 104,
"height": 2
},
{
"type": "path",
"id": "dVm9I",
"x": 390,
"y": 452,
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:text-muted",
"width": 10,
"height": 12
},
{
"type": "frame",
"id": "fWsoX",
"x": 318,
"y": 426,
"name": "Pill http",
"fill": "$ui:surface-raised",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1,
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "e7l0zV",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "http",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "rectangle",
"id": "b556U7",
"x": 650,
"y": 457,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 62,
"height": 2
},
{
"type": "path",
"id": "b5ifz",
"x": 702,
"y": 452,
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:text-muted",
"width": 10,
"height": 12
},
{
"type": "frame",
"id": "M0uHM",
"x": 640,
"y": 470,
"name": "Pill API · UI",
"fill": "$ui:surface-raised",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1,
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "N1j3r",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "API · UI",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "rectangle",
"id": "FmooP",
"x": 524,
"y": 496,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 2,
"height": 104
},
{
"type": "path",
"id": "rdEBG",
"x": 519,
"y": 590,
"name": "Arrow",
"geometry": "M0 0l12 0-6 10z",
"viewBox": [
0,
0,
12,
10
],
"fill": "$ui:text-muted",
"width": 12,
"height": 10
},
{
"type": "frame",
"id": "r9yEu",
"x": 536,
"y": 534,
"name": "Pill /sip",
"fill": "$ui:surface-raised",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1,
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "vu2Nk",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "/sip",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "rectangle",
"id": "dWbaR",
"x": 296,
"y": 657,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 104,
"height": 2
},
{
"type": "path",
"id": "hHptT",
"x": 390,
"y": 652,
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:text-muted",
"width": 10,
"height": 12
},
{
"type": "frame",
"id": "quDaD",
"x": 322,
"y": 626,
"name": "Pill SIP",
"fill": "$ui:surface-raised",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1,
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "xXnEz",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "SIP",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "rectangle",
"id": "DWUZo",
"x": 650,
"y": 637,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 75,
"height": 2
},
{
"type": "path",
"id": "FwgoH",
"x": 715,
"y": 632,
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:text-muted",
"width": 10,
"height": 12
},
{
"type": "frame",
"id": "MS0xe",
"x": 657,
"y": 606,
"name": "Pill calls",
"fill": "$ui:surface-raised",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1,
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "fkFDF",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "calls",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "rectangle",
"id": "BXKot",
"x": 650,
"y": 767,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 200,
"height": 2
},
{
"type": "rectangle",
"id": "O3qWAf",
"x": 849,
"y": 676,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 2,
"height": 92
},
{
"type": "path",
"id": "b6JkR",
"x": 844,
"y": 676,
"name": "Arrow",
"geometry": "M0 10l12 0-6-10z",
"viewBox": [
0,
0,
12,
10
],
"fill": "$ui:text-muted",
"width": 12,
"height": 10
},
{
"type": "frame",
"id": "k2M7e",
"x": 664,
"y": 778,
"name": "Pill RTP media",
"fill": "$ui:surface-raised",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1,
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "x9bFm",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "RTP media",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "rectangle",
"id": "vvfLm",
"x": 849,
"y": 506,
"name": "Edge",
"fill": "$ui:accent",
"width": 2,
"height": 94
},
{
"type": "path",
"id": "B5C425",
"x": 844,
"y": 590,
"name": "Arrow",
"geometry": "M0 0l12 0-6 10z",
"viewBox": [
0,
0,
12,
10
],
"fill": "$ui:accent",
"width": 12,
"height": 10
},
{
"type": "path",
"id": "Y0MlI",
"x": 844,
"y": 506,
"name": "Arrow",
"geometry": "M0 10l12 0-6-10z",
"viewBox": [
0,
0,
12,
10
],
"fill": "$ui:accent",
"width": 12,
"height": 10
},
{
"type": "rectangle",
"id": "zLH94",
"x": 964,
"y": 473,
"name": "Edge",
"fill": "$ui:accent",
"width": 16,
"height": 2
},
{
"type": "rectangle",
"id": "U4g6t6",
"x": 1232,
"y": 387,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 20,
"height": 2
},
{
"type": "rectangle",
"id": "iFd03",
"x": 1251,
"y": 288,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 2,
"height": 200
},
{
"type": "rectangle",
"id": "k4Jfd9",
"x": 1252,
"y": 287,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 20,
"height": 2
},
{
"type": "path",
"id": "t2a44B",
"x": 1262,
"y": 282,
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:text-muted",
"width": 10,
"height": 12
},
{
"type": "rectangle",
"id": "R1YOPF",
"x": 1252,
"y": 387,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 20,
"height": 2
},
{
"type": "path",
"id": "NgtY9",
"x": 1262,
"y": 382,
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:text-muted",
"width": 10,
"height": 12
},
{
"type": "rectangle",
"id": "OmdqC",
"x": 1252,
"y": 487,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 20,
"height": 2
},
{
"type": "path",
"id": "NA3bM",
"x": 1262,
"y": 482,
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:text-muted",
"width": 10,
"height": 12
},
{
"type": "frame",
"id": "yZ78d",
"x": 1272,
"y": 690,
"name": "Legend",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "crOqV",
"name": "Legend runs from your source",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "r1Ae01",
"name": "Swatch",
"fill": "$ui:accent",
"width": 22,
"height": 3
},
{
"type": "text",
"id": "RZL4h",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "runs from your source",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "hafkC",
"name": "Legend container you don't edit",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "f86A0",
"name": "Swatch",
"fill": "$ui:text-muted",
"width": 22,
"height": 3
},
{
"type": "text",
"id": "P8SDhl",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "container you don't edit",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "NlyYM",
"x": 725,
"y": 600,
"name": "Roomr",
"width": 250,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "icon",
"id": "pdOG5",
"x": 18,
"y": 18,
"name": "Icon",
"width": 22,
"height": 22,
"icon": "cpu",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "HFAsW",
"x": 52,
"y": 17,
"name": "Roomr",
"fill": "$ui:text-primary",
"content": "Roomr",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "UneJI",
"x": 52,
"y": 41,
"name": "pinned image",
"fill": "$ui:text-muted",
"content": "pinned image",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "fdbKR",
"x": 0,
"y": 3500,
"name": "Docs / Diagram Kit",
"theme": {
"ui:mode": "dark"
},
"width": 1600,
"height": 420,
"fill": "$ui:surface-raised",
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"layout": "none",
"children": [
{
"type": "text",
"id": "GFuAa",
"x": 48,
"y": 36,
"name": "Kit title",
"fill": "$ui:text-primary",
"content": "Diagram Kit · v1",
"fontFamily": "$ui:--font-secondary",
"fontSize": 30,
"fontWeight": "600"
},
{
"type": "text",
"id": "klbok",
"x": 48,
"y": 80,
"name": "Kit note",
"fill": "$ui:text-secondary",
"content": "Instance these in every docs diagram. Colors are $ui tokens; set the diagram frame's ui:mode theme for light or dark.",
"fontFamily": "$ui:--font-secondary",
"fontSize": 17,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "sEKX6",
"x": 48,
"y": 150,
"name": "Diagram/Node",
"reusable": true,
"width": 260,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 14,
"padding": [
16,
18
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "a5CMZ",
"name": "Icon",
"width": 22,
"height": 22,
"icon": "phone",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "frame",
"id": "Y5ua0",
"name": "Text",
"width": "fill_container",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "ezwBW",
"name": "Title",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Node title",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "wOD17",
"name": "Sub",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "sub-label",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "pifOQ",
"x": 340,
"y": 150,
"name": "Diagram/Node Accent",
"reusable": true,
"width": 260,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"gap": 14,
"padding": [
16,
18
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "RcIXt",
"name": "Icon",
"width": 22,
"height": 22,
"icon": "bot",
"library": "lucide",
"fill": "$ui:accent"
},
{
"type": "frame",
"id": "x4WJDQ",
"name": "Text",
"width": "fill_container",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "Z1grMG",
"name": "Title",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Node title",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "RXa3g",
"name": "Sub",
"fill": "$ui:text-muted",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "sub-label",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "V8p0b",
"x": 640,
"y": 160,
"name": "Diagram/Pill",
"reusable": true,
"fill": "$ui:surface-raised",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1,
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "r2EmG9",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "edge label",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "PHmh8",
"x": 640,
"y": 210,
"name": "Diagram/Chip",
"reusable": true,
"fill": "$ui:surface",
"cornerRadius": 8,
"stroke": "$ui:border",
"strokeWidth": 1,
"padding": [
4,
8
],
"children": [
{
"type": "text",
"id": "goZxA",
"name": "Label",
"fill": "$ui:accent-text",
"content": "call.started",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "path",
"id": "oSkeo",
"x": 820,
"y": 160,
"name": "Diagram/Arrow R",
"reusable": true,
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:text-muted",
"width": 10,
"height": 12
},
{
"type": "path",
"id": "AdWAH",
"x": 860,
"y": 160,
"name": "Diagram/Arrow D",
"reusable": true,
"geometry": "M0 0l12 0-6 10z",
"viewBox": [
0,
0,
12,
10
],
"fill": "$ui:text-muted",
"width": 12,
"height": 10
},
{
"type": "frame",
"id": "np3qG",
"x": 940,
"y": 150,
"name": "Diagram/Group",
"reusable": true,
"width": 300,
"height": 180,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "text",
"id": "djCne",
"x": 24,
"y": 20,
"name": "Label",
"fill": "$ui:text-muted",
"content": "GROUP",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 1.6
}
]
},
{
"type": "text",
"id": "ATQtt",
"x": 48,
"y": 360,
"name": "Kit legend",
"fill": "$ui:text-muted",
"content": "Node · Node Accent (the call path / our subject) · Pill (edge label) · Chip (tag, event) · Arrow R / D · Group (boundary with label). Edges are 2px rectangles: $ui:accent = call path, $ui:text-muted = other.",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "qOjTY",
"x": 1700,
"y": 1500,
"name": "Docs / How Fonoster works / Call path / Dark",
"theme": {
"ui:mode": "dark"
},
"clip": true,
"width": 1600,
"height": 900,
"fill": "$ui:surface-raised",
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "text",
"id": "IttqJ",
"x": 48,
"y": 36,
"name": "Title",
"fill": "$ui:text-primary",
"content": "How a call moves through Fonoster",
"fontFamily": "$ui:--font-secondary",
"fontSize": 30,
"fontWeight": "600"
},
{
"type": "text",
"id": "dcEOD",
"x": 48,
"y": 80,
"name": "Subtitle",
"fill": "$ui:text-secondary",
"content": "It enters through a number, a SIP agent or the API, reaches one application, and leaves a signed record.",
"fontFamily": "$ui:--font-secondary",
"fontSize": 17,
"fontWeight": "normal"
},
{
"id": "Z8Aia",
"type": "ref",
"ref": "np3qG",
"name": "Region",
"x": 350,
"y": 128,
"width": 968,
"height": 740,
"fill": "$ui:surface-raised",
"descendants": {
"djCne": {
"content": "REGION"
}
}
},
{
"id": "qPmiO",
"type": "ref",
"ref": "np3qG",
"name": "Workspace",
"x": 370,
"y": 172,
"width": 926,
"height": 676,
"descendants": {
"djCne": {
"content": "WORKSPACE"
}
}
},
{
"id": "LMzPc",
"type": "ref",
"ref": "np3qG",
"name": "Domain",
"x": 384,
"y": 530,
"width": 226,
"height": 150,
"fill": "$ui:surface",
"descendants": {
"djCne": {
"content": "DOMAIN"
}
}
},
{
"id": "RTYB4",
"type": "ref",
"ref": "np3qG",
"name": "Application",
"x": 732,
"y": 280,
"width": 254,
"height": 538,
"stroke": "$ui:accent",
"strokeWidth": 2,
"fill": "$ui:surface-raised",
"descendants": {
"djCne": {
"content": "APPLICATION",
"fill": "$ui:accent-text"
}
}
},
{
"type": "rectangle",
"id": "Y3sef7",
"x": 977,
"y": 706,
"name": "Edge",
"fill": "$ui:accent",
"width": 383,
"height": 2
},
{
"id": "v3fzd",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 1350,
"y": 701,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "k3bb2",
"x": 1274,
"y": 548,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 86,
"height": 2
},
{
"id": "zNGeJ",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 1350,
"y": 543,
"fill": "$ui:text-muted"
},
{
"type": "rectangle",
"id": "iOicn",
"x": 1181,
"y": 410,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 2,
"height": 42
},
{
"id": "P3A16v",
"type": "ref",
"ref": "AdWAH",
"name": "Arrow",
"x": 1176,
"y": 442,
"fill": "$ui:text-muted"
},
{
"type": "rectangle",
"id": "r5fYS",
"x": 986,
"y": 338,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 104,
"height": 2
},
{
"id": "KkU7O",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 1080,
"y": 333,
"fill": "$ui:text-muted"
},
{
"type": "rectangle",
"id": "JNVv1",
"x": 600,
"y": 777,
"name": "Edge",
"fill": "$ui:accent",
"width": 132,
"height": 2
},
{
"id": "r2stN",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 722,
"y": 772,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "gHFJg",
"x": 600,
"y": 437,
"name": "Edge",
"fill": "$ui:accent",
"width": 132,
"height": 2
},
{
"id": "l1sam0",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 722,
"y": 432,
"fill": "$ui:accent"
},
{
"id": "xpTiO",
"type": "ref",
"ref": "AdWAH",
"name": "Arrow",
"x": 491,
"y": 570,
"fill": "$ui:text-muted"
},
{
"type": "rectangle",
"id": "McWEq",
"x": 496,
"y": 564,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "K0mhn",
"x": 496,
"y": 553,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "NgxZS",
"x": 496,
"y": 542,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "U7MKT",
"x": 496,
"y": 531,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "h9wKq",
"x": 496,
"y": 520,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "GOK8E",
"x": 496,
"y": 509,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "V6ioa",
"x": 496,
"y": 498,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "RlyyX",
"x": 496,
"y": 487,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "b1X4a",
"x": 496,
"y": 476,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "D0ISy",
"x": 496,
"y": 356,
"name": "Edge",
"fill": "$ui:accent",
"width": 2,
"height": 44
},
{
"id": "IVEZQ",
"type": "ref",
"ref": "AdWAH",
"name": "Arrow",
"x": 491,
"y": 390,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "pS0XW",
"x": 879,
"y": 233,
"name": "Edge",
"fill": "$ui:accent",
"width": 2,
"height": 167
},
{
"id": "uoXSJ",
"type": "ref",
"ref": "AdWAH",
"name": "Arrow",
"x": 874,
"y": 390,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "GcXSb",
"x": 226,
"y": 233,
"name": "Edge",
"fill": "$ui:accent",
"width": 655,
"height": 2
},
{
"type": "rectangle",
"id": "l36WMi",
"x": 226,
"y": 777,
"name": "Edge",
"fill": "$ui:accent",
"width": 168,
"height": 2
},
{
"id": "OGU2S",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 384,
"y": 772,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "httuk",
"x": 226,
"y": 617,
"name": "Edge",
"fill": "$ui:accent",
"width": 168,
"height": 2
},
{
"id": "QT9oN",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 384,
"y": 612,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "Zwf28",
"x": 226,
"y": 317,
"name": "Edge",
"fill": "$ui:accent",
"width": 168,
"height": 2
},
{
"id": "oQghY",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 384,
"y": 312,
"fill": "$ui:accent"
},
{
"id": "nEAfc",
"type": "ref",
"ref": "sEKX6",
"name": "Browser",
"x": 40,
"y": 196,
"width": 186,
"descendants": {
"a5CMZ": {
"icon": "globe"
},
"ezwBW": {
"content": "Browser"
},
"wOD17": {
"content": "Talk to agent"
}
}
},
{
"id": "SrvQP",
"type": "ref",
"ref": "sEKX6",
"name": "Phone",
"x": 40,
"y": 280,
"width": 186,
"descendants": {
"a5CMZ": {
"icon": "phone"
},
"ezwBW": {
"content": "Phone"
},
"wOD17": {
"content": "PSTN caller"
}
}
},
{
"id": "f8W6t",
"type": "ref",
"ref": "sEKX6",
"name": "Softphone",
"x": 40,
"y": 580,
"width": 186,
"descendants": {
"a5CMZ": {
"icon": "headset"
},
"ezwBW": {
"content": "Softphone"
},
"wOD17": {
"content": "or desk phone"
}
}
},
{
"id": "V0MqgY",
"type": "ref",
"ref": "sEKX6",
"name": "Your code",
"x": 40,
"y": 740,
"width": 186,
"descendants": {
"a5CMZ": {
"icon": "code"
},
"ezwBW": {
"content": "Your code"
},
"wOD17": {
"content": "API, SDK, CLI"
}
}
},
{
"id": "R7Mj3k",
"type": "ref",
"ref": "sEKX6",
"name": "Trunk",
"x": 394,
"y": 280,
"width": 206,
"fill": "$ui:surface-raised",
"descendants": {
"a5CMZ": {
"icon": "cable"
},
"ezwBW": {
"content": "Trunk"
},
"wOD17": {
"content": "carrier link"
}
}
},
{
"id": "ucsjp",
"type": "ref",
"ref": "sEKX6",
"name": "Number",
"x": 394,
"y": 400,
"width": 206,
"fill": "$ui:surface-raised",
"descendants": {
"a5CMZ": {
"icon": "hash"
},
"ezwBW": {
"content": "Number"
},
"wOD17": {
"content": "callers dial it"
}
}
},
{
"id": "W8Gg2k",
"type": "ref",
"ref": "sEKX6",
"name": "SIP agent",
"x": 394,
"y": 580,
"width": 206,
"fill": "$ui:surface-raised",
"descendants": {
"a5CMZ": {
"icon": "user-round"
},
"ezwBW": {
"content": "SIP agent"
},
"wOD17": {
"content": "signed in"
}
}
},
{
"id": "JILAT",
"type": "ref",
"ref": "sEKX6",
"name": "Outbound call",
"x": 394,
"y": 740,
"width": 206,
"fill": "$ui:surface-raised",
"descendants": {
"a5CMZ": {
"icon": "phone-outgoing"
},
"ezwBW": {
"content": "Outbound call"
},
"wOD17": {
"content": "Fonoster dials"
}
}
},
{
"id": "jhT35",
"type": "ref",
"ref": "pifOQ",
"name": "Autopilot agent",
"x": 741,
"y": 400,
"width": 236,
"descendants": {
"RcIXt": {
"icon": "bot"
},
"Z1grMG": {
"content": "Autopilot agent"
},
"RXa3g": {
"content": "hosted by Fonoster"
}
}
},
{
"type": "frame",
"id": "RraoH",
"x": 741,
"y": 650,
"name": "Stream",
"width": 236,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"layout": "vertical",
"gap": 12,
"padding": [
16,
18
],
"children": [
{
"type": "frame",
"id": "k6DGgA",
"name": "Row",
"width": "fill_container",
"gap": 14,
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "wFL1B",
"name": "Icon",
"width": 22,
"height": 22,
"icon": "radio-tower",
"library": "lucide",
"fill": "$ui:accent"
},
{
"type": "frame",
"id": "Nlb9t",
"name": "Text",
"width": "fill_container",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "BE9r1",
"name": "Title",
"fill": "$ui:text-primary",
"content": "Stream",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "frgEb",
"name": "Sub",
"fill": "$ui:text-muted",
"content": "your WebSocket server",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "Qflpo",
"name": "Protocols",
"gap": 8,
"padding": [
0,
0,
0,
36
],
"children": [
{
"id": "b1sG8",
"type": "ref",
"ref": "PHmh8",
"name": "Chip fonoster",
"descendants": {
"goZxA": {
"content": "fonoster"
}
}
},
{
"id": "M00DYQ",
"type": "ref",
"ref": "PHmh8",
"name": "Chip twilio",
"descendants": {
"goZxA": {
"content": "twilio"
}
}
}
]
}
]
},
{
"type": "frame",
"id": "EP0xF",
"x": 741,
"y": 556,
"name": "Or",
"width": 236,
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "BLMk0",
"name": "Rule",
"fill": "$ui:border",
"width": "fill_container",
"height": 1
},
{
"type": "text",
"id": "k04ynN",
"name": "Or",
"fill": "$ui:text-muted",
"content": "or",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "rectangle",
"id": "VCEjJ",
"name": "Rule",
"fill": "$ui:border",
"width": "fill_container",
"height": 1
}
]
},
{
"id": "AAvP1",
"type": "ref",
"ref": "sEKX6",
"name": "Call record",
"x": 1090,
"y": 300,
"width": 184,
"fill": "$ui:surface-raised",
"descendants": {
"a5CMZ": {
"icon": "file-check"
},
"ezwBW": {
"content": "Call record"
},
"wOD17": {
"content": "signed, with transcript and recording"
}
}
},
{
"type": "frame",
"id": "lbONz",
"x": 1090,
"y": 452,
"name": "Webhooks",
"width": 184,
"fill": "$ui:surface-raised",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 8,
"padding": [
16,
18
],
"children": [
{
"type": "frame",
"id": "beood",
"name": "Row",
"gap": 14,
"padding": [
0,
0,
4,
0
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "w9F2N",
"name": "Icon",
"width": 22,
"height": 22,
"icon": "webhook",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "ylWHs",
"name": "Title",
"fill": "$ui:text-primary",
"content": "Webhooks",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
}
]
},
{
"id": "XxsBQ",
"type": "ref",
"ref": "PHmh8",
"name": "Chip call.started",
"descendants": {
"goZxA": {
"content": "call.started"
}
}
},
{
"id": "N3TR8S",
"type": "ref",
"ref": "PHmh8",
"name": "Chip call.ended",
"descendants": {
"goZxA": {
"content": "call.ended"
}
}
},
{
"id": "tfgxg",
"type": "ref",
"ref": "PHmh8",
"name": "Chip call.failed",
"descendants": {
"goZxA": {
"content": "call.failed"
}
}
},
{
"id": "JE1XJ",
"type": "ref",
"ref": "PHmh8",
"name": "Chip call_record.sealed",
"descendants": {
"goZxA": {
"content": "call_record.sealed"
}
}
}
]
},
{
"id": "m8EWS",
"type": "ref",
"ref": "sEKX6",
"name": "Your systems",
"x": 1360,
"y": 511,
"width": 200,
"descendants": {
"a5CMZ": {
"icon": "building-2"
},
"ezwBW": {
"content": "Your systems"
},
"wOD17": {
"content": "your HTTPS endpoint"
}
}
},
{
"id": "mLT7z",
"type": "ref",
"ref": "sEKX6",
"name": "Your server",
"x": 1360,
"y": 669,
"width": 200,
"descendants": {
"a5CMZ": {
"icon": "server"
},
"ezwBW": {
"content": "Your server"
},
"wOD17": {
"content": "runs your agent"
}
}
},
{
"id": "OsUPK",
"type": "ref",
"ref": "V8p0b",
"name": "Pill carrier, SIP",
"x": 231,
"y": 306,
"descendants": {
"r2EmG9": {
"content": "carrier, SIP"
}
}
},
{
"id": "ZnloY",
"type": "ref",
"ref": "V8p0b",
"name": "Pill signs in",
"x": 247,
"y": 606,
"descendants": {
"r2EmG9": {
"content": "signs in"
}
}
},
{
"id": "JWEqW",
"type": "ref",
"ref": "V8p0b",
"name": "Pill test call",
"x": 243,
"y": 222,
"descendants": {
"r2EmG9": {
"content": "test call"
}
}
},
{
"id": "S1fF1Y",
"type": "ref",
"ref": "V8p0b",
"name": "Pill or rings",
"x": 456,
"y": 493,
"descendants": {
"r2EmG9": {
"content": "or rings"
}
}
},
{
"id": "McRGL",
"type": "ref",
"ref": "V8p0b",
"name": "Pill routes to",
"x": 621,
"y": 426,
"descendants": {
"r2EmG9": {
"content": "routes to"
}
}
},
{
"id": "DDp6t",
"type": "ref",
"ref": "V8p0b",
"name": "Pill connects to",
"x": 613,
"y": 766,
"descendants": {
"r2EmG9": {
"content": "connects to"
}
}
},
{
"id": "ECoxV",
"type": "ref",
"ref": "V8p0b",
"name": "Pill at hangup",
"x": 993,
"y": 302,
"descendants": {
"r2EmG9": {
"content": "at hangup"
}
}
},
{
"id": "b7OK63",
"type": "ref",
"ref": "V8p0b",
"name": "Pill signed WebSocket",
"x": 1096,
"y": 695,
"descendants": {
"r2EmG9": {
"content": "signed WebSocket"
}
}
},
{
"type": "frame",
"id": "Mk75c",
"x": 1300,
"y": 44,
"name": "Legend",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "bYpIU",
"name": "Legend the call",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "VpZ1r",
"name": "Swatch",
"fill": "$ui:accent",
"width": 22,
"height": 3
},
{
"type": "text",
"id": "r70VCK",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "the call",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "WMJSg",
"name": "Legend after the call",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "RoFij",
"name": "Swatch",
"fill": "$ui:text-muted",
"width": 22,
"height": 3
},
{
"type": "text",
"id": "YtmR3",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "after the call",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "Xj5vj",
"x": 1700,
"y": 2500,
"name": "Docs / How Fonoster works / Call path / Light",
"theme": {
"ui:mode": "light"
},
"clip": true,
"width": 1600,
"height": 900,
"fill": "$ui:surface",
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "text",
"id": "rCRfk",
"x": 48,
"y": 36,
"name": "Title",
"fill": "$ui:text-primary",
"content": "How a call moves through Fonoster",
"fontFamily": "$ui:--font-secondary",
"fontSize": 30,
"fontWeight": "600"
},
{
"type": "text",
"id": "GlfT4",
"x": 48,
"y": 80,
"name": "Subtitle",
"fill": "$ui:text-secondary",
"content": "It enters through a number, a SIP agent or the API, reaches one application, and leaves a signed record.",
"fontFamily": "$ui:--font-secondary",
"fontSize": 17,
"fontWeight": "normal"
},
{
"id": "TLdu4",
"type": "ref",
"ref": "np3qG",
"name": "Region",
"x": 350,
"y": 128,
"width": 968,
"height": 740,
"fill": "$ui:surface-raised",
"descendants": {
"djCne": {
"content": "REGION"
}
}
},
{
"id": "A0cJxi",
"type": "ref",
"ref": "np3qG",
"name": "Workspace",
"x": 370,
"y": 172,
"width": 926,
"height": 676,
"descendants": {
"djCne": {
"content": "WORKSPACE"
}
}
},
{
"id": "QKZDo",
"type": "ref",
"ref": "np3qG",
"name": "Domain",
"x": 384,
"y": 530,
"width": 226,
"height": 150,
"fill": "$ui:surface",
"descendants": {
"djCne": {
"content": "DOMAIN"
}
}
},
{
"id": "RCD1x",
"type": "ref",
"ref": "np3qG",
"name": "Application",
"x": 732,
"y": 280,
"width": 254,
"height": 538,
"stroke": "$ui:accent",
"strokeWidth": 2,
"fill": "$ui:surface-raised",
"descendants": {
"djCne": {
"content": "APPLICATION",
"fill": "$ui:accent-text"
}
}
},
{
"type": "rectangle",
"id": "vtNN6",
"x": 977,
"y": 706,
"name": "Edge",
"fill": "$ui:accent",
"width": 383,
"height": 2
},
{
"id": "Nm56H",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 1350,
"y": 701,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "QpJt7",
"x": 1274,
"y": 548,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 86,
"height": 2
},
{
"id": "IoO4R",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 1350,
"y": 543,
"fill": "$ui:text-muted"
},
{
"type": "rectangle",
"id": "lc58n",
"x": 1181,
"y": 410,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 2,
"height": 42
},
{
"id": "a1ofYb",
"type": "ref",
"ref": "AdWAH",
"name": "Arrow",
"x": 1176,
"y": 442,
"fill": "$ui:text-muted"
},
{
"type": "rectangle",
"id": "JPKNd",
"x": 986,
"y": 338,
"name": "Edge",
"fill": "$ui:text-muted",
"width": 104,
"height": 2
},
{
"id": "xkdwe",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 1080,
"y": 333,
"fill": "$ui:text-muted"
},
{
"type": "rectangle",
"id": "C5WeJ",
"x": 600,
"y": 777,
"name": "Edge",
"fill": "$ui:accent",
"width": 132,
"height": 2
},
{
"id": "SEARO",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 722,
"y": 772,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "LCyPd",
"x": 600,
"y": 437,
"name": "Edge",
"fill": "$ui:accent",
"width": 132,
"height": 2
},
{
"id": "VWyzA",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 722,
"y": 432,
"fill": "$ui:accent"
},
{
"id": "be0oE",
"type": "ref",
"ref": "AdWAH",
"name": "Arrow",
"x": 491,
"y": 570,
"fill": "$ui:text-muted"
},
{
"type": "rectangle",
"id": "p3b30",
"x": 496,
"y": 564,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "Y8hvf",
"x": 496,
"y": 553,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "VH7q9",
"x": 496,
"y": 542,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "J7ZmS",
"x": 496,
"y": 531,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "v66Hh",
"x": 496,
"y": 520,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "d714x",
"x": 496,
"y": 509,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "l6c82",
"x": 496,
"y": 498,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "Ee2aL",
"x": 496,
"y": 487,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "kJ4dz",
"x": 496,
"y": 476,
"name": "Edge dash",
"fill": "$ui:text-muted",
"width": 2,
"height": 6
},
{
"type": "rectangle",
"id": "JQ3qr",
"x": 496,
"y": 356,
"name": "Edge",
"fill": "$ui:accent",
"width": 2,
"height": 44
},
{
"id": "l7pOe",
"type": "ref",
"ref": "AdWAH",
"name": "Arrow",
"x": 491,
"y": 390,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "HzddP",
"x": 879,
"y": 233,
"name": "Edge",
"fill": "$ui:accent",
"width": 2,
"height": 167
},
{
"id": "ZvIxL",
"type": "ref",
"ref": "AdWAH",
"name": "Arrow",
"x": 874,
"y": 390,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "EVZaY",
"x": 226,
"y": 233,
"name": "Edge",
"fill": "$ui:accent",
"width": 655,
"height": 2
},
{
"type": "rectangle",
"id": "p1qZU",
"x": 226,
"y": 777,
"name": "Edge",
"fill": "$ui:accent",
"width": 168,
"height": 2
},
{
"id": "CwNP6",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 384,
"y": 772,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "CR5jv",
"x": 226,
"y": 617,
"name": "Edge",
"fill": "$ui:accent",
"width": 168,
"height": 2
},
{
"id": "TSSif",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 384,
"y": 612,
"fill": "$ui:accent"
},
{
"type": "rectangle",
"id": "k6Vdw",
"x": 226,
"y": 317,
"name": "Edge",
"fill": "$ui:accent",
"width": 168,
"height": 2
},
{
"id": "i9SJA",
"type": "ref",
"ref": "oSkeo",
"name": "Arrow",
"x": 384,
"y": 312,
"fill": "$ui:accent"
},
{
"id": "V0OCjD",
"type": "ref",
"ref": "sEKX6",
"name": "Browser",
"x": 40,
"y": 196,
"width": 186,
"descendants": {
"a5CMZ": {
"icon": "globe"
},
"ezwBW": {
"content": "Browser"
},
"wOD17": {
"content": "Talk to agent"
}
}
},
{
"id": "KOtQO",
"type": "ref",
"ref": "sEKX6",
"name": "Phone",
"x": 40,
"y": 280,
"width": 186,
"descendants": {
"a5CMZ": {
"icon": "phone"
},
"ezwBW": {
"content": "Phone"
},
"wOD17": {
"content": "PSTN caller"
}
}
},
{
"id": "H60tJd",
"type": "ref",
"ref": "sEKX6",
"name": "Softphone",
"x": 40,
"y": 580,
"width": 186,
"descendants": {
"a5CMZ": {
"icon": "headset"
},
"ezwBW": {
"content": "Softphone"
},
"wOD17": {
"content": "or desk phone"
}
}
},
{
"id": "hRtxB",
"type": "ref",
"ref": "sEKX6",
"name": "Your code",
"x": 40,
"y": 740,
"width": 186,
"descendants": {
"a5CMZ": {
"icon": "code"
},
"ezwBW": {
"content": "Your code"
},
"wOD17": {
"content": "API, SDK, CLI"
}
}
},
{
"id": "ZT0gJ",
"type": "ref",
"ref": "sEKX6",
"name": "Trunk",
"x": 394,
"y": 280,
"width": 206,
"fill": "$ui:surface-raised",
"descendants": {
"a5CMZ": {
"icon": "cable"
},
"ezwBW": {
"content": "Trunk"
},
"wOD17": {
"content": "carrier link"
}
}
},
{
"id": "yDubR",
"type": "ref",
"ref": "sEKX6",
"name": "Number",
"x": 394,
"y": 400,
"width": 206,
"fill": "$ui:surface-raised",
"descendants": {
"a5CMZ": {
"icon": "hash"
},
"ezwBW": {
"content": "Number"
},
"wOD17": {
"content": "callers dial it"
}
}
},
{
"id": "d0aif",
"type": "ref",
"ref": "sEKX6",
"name": "SIP agent",
"x": 394,
"y": 580,
"width": 206,
"fill": "$ui:surface-raised",
"descendants": {
"a5CMZ": {
"icon": "user-round"
},
"ezwBW": {
"content": "SIP agent"
},
"wOD17": {
"content": "signed in"
}
}
},
{
"id": "njGnM",
"type": "ref",
"ref": "sEKX6",
"name": "Outbound call",
"x": 394,
"y": 740,
"width": 206,
"fill": "$ui:surface-raised",
"descendants": {
"a5CMZ": {
"icon": "phone-outgoing"
},
"ezwBW": {
"content": "Outbound call"
},
"wOD17": {
"content": "Fonoster dials"
}
}
},
{
"id": "sTxJL",
"type": "ref",
"ref": "pifOQ",
"name": "Autopilot agent",
"x": 741,
"y": 400,
"width": 236,
"descendants": {
"RcIXt": {
"icon": "bot"
},
"Z1grMG": {
"content": "Autopilot agent"
},
"RXa3g": {
"content": "hosted by Fonoster"
}
}
},
{
"type": "frame",
"id": "ClUro",
"x": 741,
"y": 650,
"name": "Stream",
"width": 236,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"layout": "vertical",
"gap": 12,
"padding": [
16,
18
],
"children": [
{
"type": "frame",
"id": "b2nTzB",
"name": "Row",
"width": "fill_container",
"gap": 14,
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "W9meI",
"name": "Icon",
"width": 22,
"height": 22,
"icon": "radio-tower",
"library": "lucide",
"fill": "$ui:accent"
},
{
"type": "frame",
"id": "Z4PP7f",
"name": "Text",
"width": "fill_container",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "h5DQS",
"name": "Title",
"fill": "$ui:text-primary",
"content": "Stream",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
},
{
"type": "text",
"id": "ntnWV",
"name": "Sub",
"fill": "$ui:text-muted",
"content": "your WebSocket server",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "WCVMv",
"name": "Protocols",
"gap": 8,
"padding": [
0,
0,
0,
36
],
"children": [
{
"id": "LBDJ2",
"type": "ref",
"ref": "PHmh8",
"name": "Chip fonoster",
"descendants": {
"goZxA": {
"content": "fonoster"
}
}
},
{
"id": "wJh65",
"type": "ref",
"ref": "PHmh8",
"name": "Chip twilio",
"descendants": {
"goZxA": {
"content": "twilio"
}
}
}
]
}
]
},
{
"type": "frame",
"id": "wqDuk",
"x": 741,
"y": 556,
"name": "Or",
"width": 236,
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "qvQ3X",
"name": "Rule",
"fill": "$ui:border",
"width": "fill_container",
"height": 1
},
{
"type": "text",
"id": "Y6YHuj",
"name": "Or",
"fill": "$ui:text-muted",
"content": "or",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "rectangle",
"id": "Zluzl",
"name": "Rule",
"fill": "$ui:border",
"width": "fill_container",
"height": 1
}
]
},
{
"id": "OQ9XS",
"type": "ref",
"ref": "sEKX6",
"name": "Call record",
"x": 1090,
"y": 300,
"width": 184,
"fill": "$ui:surface-raised",
"descendants": {
"a5CMZ": {
"icon": "file-check"
},
"ezwBW": {
"content": "Call record"
},
"wOD17": {
"content": "signed, with transcript and recording"
}
}
},
{
"type": "frame",
"id": "A4mdx7",
"x": 1090,
"y": 452,
"name": "Webhooks",
"width": 184,
"fill": "$ui:surface-raised",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 8,
"padding": [
16,
18
],
"children": [
{
"type": "frame",
"id": "p5a1k",
"name": "Row",
"gap": 14,
"padding": [
0,
0,
4,
0
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "nWDxh",
"name": "Icon",
"width": 22,
"height": 22,
"icon": "webhook",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "text",
"id": "qIlcu",
"name": "Title",
"fill": "$ui:text-primary",
"content": "Webhooks",
"fontFamily": "$ui:--font-secondary",
"fontSize": 18,
"fontWeight": "600"
}
]
},
{
"id": "YZ30t",
"type": "ref",
"ref": "PHmh8",
"name": "Chip call.started",
"descendants": {
"goZxA": {
"content": "call.started"
}
}
},
{
"id": "KEDSu",
"type": "ref",
"ref": "PHmh8",
"name": "Chip call.ended",
"descendants": {
"goZxA": {
"content": "call.ended"
}
}
},
{
"id": "LbmbI",
"type": "ref",
"ref": "PHmh8",
"name": "Chip call.failed",
"descendants": {
"goZxA": {
"content": "call.failed"
}
}
},
{
"id": "P2WCNS",
"type": "ref",
"ref": "PHmh8",
"name": "Chip call_record.sealed",
"descendants": {
"goZxA": {
"content": "call_record.sealed"
}
}
}
]
},
{
"id": "T10G1s",
"type": "ref",
"ref": "sEKX6",
"name": "Your systems",
"x": 1360,
"y": 511,
"width": 200,
"descendants": {
"a5CMZ": {
"icon": "building-2"
},
"ezwBW": {
"content": "Your systems"
},
"wOD17": {
"content": "your HTTPS endpoint"
}
}
},
{
"id": "NLbWV",
"type": "ref",
"ref": "sEKX6",
"name": "Your server",
"x": 1360,
"y": 669,
"width": 200,
"descendants": {
"a5CMZ": {
"icon": "server"
},
"ezwBW": {
"content": "Your server"
},
"wOD17": {
"content": "runs your agent"
}
}
},
{
"id": "uXjJi",
"type": "ref",
"ref": "V8p0b",
"name": "Pill carrier, SIP",
"x": 231,
"y": 306,
"descendants": {
"r2EmG9": {
"content": "carrier, SIP"
}
}
},
{
"id": "z6bVjU",
"type": "ref",
"ref": "V8p0b",
"name": "Pill signs in",
"x": 247,
"y": 606,
"descendants": {
"r2EmG9": {
"content": "signs in"
}
}
},
{
"id": "iuGiB",
"type": "ref",
"ref": "V8p0b",
"name": "Pill test call",
"x": 243,
"y": 222,
"descendants": {
"r2EmG9": {
"content": "test call"
}
}
},
{
"id": "EL1lI",
"type": "ref",
"ref": "V8p0b",
"name": "Pill or rings",
"x": 456,
"y": 493,
"descendants": {
"r2EmG9": {
"content": "or rings"
}
}
},
{
"id": "A6CMur",
"type": "ref",
"ref": "V8p0b",
"name": "Pill routes to",
"x": 621,
"y": 426,
"descendants": {
"r2EmG9": {
"content": "routes to"
}
}
},
{
"id": "qlbrJ",
"type": "ref",
"ref": "V8p0b",
"name": "Pill connects to",
"x": 613,
"y": 766,
"descendants": {
"r2EmG9": {
"content": "connects to"
}
}
},
{
"id": "W6hEy",
"type": "ref",
"ref": "V8p0b",
"name": "Pill at hangup",
"x": 993,
"y": 302,
"descendants": {
"r2EmG9": {
"content": "at hangup"
}
}
},
{
"id": "Kstxq",
"type": "ref",
"ref": "V8p0b",
"name": "Pill signed WebSocket",
"x": 1096,
"y": 695,
"descendants": {
"r2EmG9": {
"content": "signed WebSocket"
}
}
},
{
"type": "frame",
"id": "UYNjw",
"x": 1300,
"y": 44,
"name": "Legend",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "lwW00",
"name": "Legend the call",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "AzEYC",
"name": "Swatch",
"fill": "$ui:accent",
"width": 22,
"height": 3
},
{
"type": "text",
"id": "tb4sv",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "the call",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "j7pOdh",
"name": "Legend after the call",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "j7F4M",
"name": "Swatch",
"fill": "$ui:text-muted",
"width": 22,
"height": 3
},
{
"type": "text",
"id": "ZSSsr",
"name": "Label",
"fill": "$ui:text-secondary",
"content": "after the call",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "FfKOU",
"x": 5100,
"y": 0,
"name": "Docs / Introduction / Banner / Dark",
"theme": {
"ui:mode": "dark"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface-raised",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "YWp2k",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "ehY5R",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "FONOSTER",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "dGccW",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "The AI that answers the phone.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "KYJDU",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Build, test and run voice agents on real phone lines.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "rx0ne",
"name": "Call",
"clip": true,
"width": 720,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "meDgg",
"name": "Header",
"width": "fill_container",
"stroke": "$ui:border",
"strokeWidth": {
"bottom": 1
},
"gap": 18,
"padding": [
24,
28
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "mz3eS",
"name": "Avatar",
"width": 52,
"height": 52,
"fill": "$ui:surface",
"cornerRadius": 999,
"stroke": "$ui:accent",
"strokeWidth": 2,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "M0mdp",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "phone-incoming",
"library": "lucide",
"fill": "$ui:accent"
}
]
},
{
"type": "frame",
"id": "lBRlj",
"name": "Who",
"width": "fill_container",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "UALFO",
"name": "Number",
"fill": "$ui:text-primary",
"content": "+1 (555) 010-4477",
"fontFamily": "$ui:--font-primary",
"fontSize": 22,
"fontWeight": "normal"
},
{
"type": "text",
"id": "dgjel",
"name": "Answered",
"fill": "$ui:text-muted",
"content": "Answered by Front desk",
"fontFamily": "$ui:--font-primary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "h3YiKC",
"name": "Live",
"fill": "$ui:surface",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 10,
"padding": [
8,
14
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "TB9sH",
"name": "Dot",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "o8KQR",
"name": "Timer",
"fill": "$ui:text-secondary",
"content": "00:12",
"fontFamily": "$ui:--font-primary",
"fontSize": 17,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "paqZI",
"name": "Transcript",
"width": "fill_container",
"layout": "vertical",
"gap": 16,
"padding": [
28,
28,
32,
28
],
"children": [
{
"type": "frame",
"id": "ib0na",
"name": "Agent line",
"width": "fill_container",
"children": [
{
"type": "frame",
"id": "FZ8vt",
"name": "Bubble",
"width": 470,
"fill": "$ui:surface",
"cornerRadius": 14,
"stroke": "$ui:accent",
"strokeWidth": 1,
"layout": "vertical",
"gap": 6,
"padding": [
14,
18
],
"children": [
{
"type": "text",
"id": "i8bVXZ",
"name": "Speaker",
"fill": "$ui:accent-text",
"content": "Front desk",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "normal",
"letterSpacing": 0.6
},
{
"type": "text",
"id": "vn56V",
"name": "Text",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Hi, thanks for calling. How can I help?",
"lineHeight": 1.35,
"fontFamily": "$ui:--font-secondary",
"fontSize": 20,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "lOR06",
"name": "Caller line",
"width": "fill_container",
"justifyContent": "end",
"children": [
{
"type": "frame",
"id": "gZpxi",
"name": "Bubble",
"width": 470,
"fill": "$ui:surface-raised",
"cornerRadius": 14,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 6,
"padding": [
14,
18
],
"children": [
{
"type": "text",
"id": "MhxvK",
"name": "Speaker",
"fill": "$ui:text-muted",
"content": "Caller",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "normal",
"letterSpacing": 0.6
},
{
"type": "text",
"id": "LQi6K",
"name": "Text",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Can I move my appointment to Friday?",
"lineHeight": 1.35,
"fontFamily": "$ui:--font-secondary",
"fontSize": 20,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "b5yl3",
"name": "Agent line",
"width": "fill_container",
"children": [
{
"type": "frame",
"id": "FUWob",
"name": "Bubble",
"width": 470,
"fill": "$ui:surface",
"cornerRadius": 14,
"stroke": "$ui:accent",
"strokeWidth": 1,
"layout": "vertical",
"gap": 6,
"padding": [
14,
18
],
"children": [
{
"type": "text",
"id": "Ipi6O",
"name": "Speaker",
"fill": "$ui:accent-text",
"content": "Front desk",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "normal",
"letterSpacing": 0.6
},
{
"type": "text",
"id": "iWzgY",
"name": "Text",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Sure. Friday at 10 or at 3?",
"lineHeight": 1.35,
"fontFamily": "$ui:--font-secondary",
"fontSize": 20,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "ZTAsS",
"x": 5100,
"y": 700,
"name": "Docs / Introduction / Banner / Light",
"theme": {
"ui:mode": "light"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "J60Jt",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "uADZn",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "FONOSTER",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "ZPQdm",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "The AI that answers the phone.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "t79oH",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Build, test and run voice agents on real phone lines.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "t1diNh",
"name": "Call",
"clip": true,
"width": 720,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "FunWM",
"name": "Header",
"width": "fill_container",
"stroke": "$ui:border",
"strokeWidth": {
"bottom": 1
},
"gap": 18,
"padding": [
24,
28
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "a8cb4",
"name": "Avatar",
"width": 52,
"height": 52,
"fill": "$ui:surface",
"cornerRadius": 999,
"stroke": "$ui:accent",
"strokeWidth": 2,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "v2mNO",
"name": "Icon",
"width": 24,
"height": 24,
"icon": "phone-incoming",
"library": "lucide",
"fill": "$ui:accent"
}
]
},
{
"type": "frame",
"id": "d4wWe",
"name": "Who",
"width": "fill_container",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "k6q0Yt",
"name": "Number",
"fill": "$ui:text-primary",
"content": "+1 (555) 010-4477",
"fontFamily": "$ui:--font-primary",
"fontSize": 22,
"fontWeight": "normal"
},
{
"type": "text",
"id": "ybExI",
"name": "Answered",
"fill": "$ui:text-muted",
"content": "Answered by Front desk",
"fontFamily": "$ui:--font-primary",
"fontSize": 16,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "tvKy3",
"name": "Live",
"fill": "$ui:surface",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 10,
"padding": [
8,
14
],
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "j9prrR",
"name": "Dot",
"fill": "$ui:accent",
"width": 10,
"height": 10
},
{
"type": "text",
"id": "DWLN5",
"name": "Timer",
"fill": "$ui:text-secondary",
"content": "00:12",
"fontFamily": "$ui:--font-primary",
"fontSize": 17,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "x6mvks",
"name": "Transcript",
"width": "fill_container",
"layout": "vertical",
"gap": 16,
"padding": [
28,
28,
32,
28
],
"children": [
{
"type": "frame",
"id": "aNqkn",
"name": "Agent line",
"width": "fill_container",
"children": [
{
"type": "frame",
"id": "v8fvev",
"name": "Bubble",
"width": 470,
"fill": "$ui:surface",
"cornerRadius": 14,
"stroke": "$ui:accent",
"strokeWidth": 1,
"layout": "vertical",
"gap": 6,
"padding": [
14,
18
],
"children": [
{
"type": "text",
"id": "nyeez",
"name": "Speaker",
"fill": "$ui:accent-text",
"content": "Front desk",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "normal",
"letterSpacing": 0.6
},
{
"type": "text",
"id": "SarGR",
"name": "Text",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Hi, thanks for calling. How can I help?",
"lineHeight": 1.35,
"fontFamily": "$ui:--font-secondary",
"fontSize": 20,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "KnqZf",
"name": "Caller line",
"width": "fill_container",
"justifyContent": "end",
"children": [
{
"type": "frame",
"id": "Ffg19",
"name": "Bubble",
"width": 470,
"fill": "$ui:surface-raised",
"cornerRadius": 14,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 6,
"padding": [
14,
18
],
"children": [
{
"type": "text",
"id": "pjD00",
"name": "Speaker",
"fill": "$ui:text-muted",
"content": "Caller",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "normal",
"letterSpacing": 0.6
},
{
"type": "text",
"id": "KjFE3",
"name": "Text",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Can I move my appointment to Friday?",
"lineHeight": 1.35,
"fontFamily": "$ui:--font-secondary",
"fontSize": 20,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "R11Px",
"name": "Agent line",
"width": "fill_container",
"children": [
{
"type": "frame",
"id": "TOwLR",
"name": "Bubble",
"width": 470,
"fill": "$ui:surface",
"cornerRadius": 14,
"stroke": "$ui:accent",
"strokeWidth": 1,
"layout": "vertical",
"gap": 6,
"padding": [
14,
18
],
"children": [
{
"type": "text",
"id": "z60qyQ",
"name": "Speaker",
"fill": "$ui:accent-text",
"content": "Front desk",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "normal",
"letterSpacing": 0.6
},
{
"type": "text",
"id": "pvsNA",
"name": "Text",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Sure. Friday at 10 or at 3?",
"lineHeight": 1.35,
"fontFamily": "$ui:--font-secondary",
"fontSize": 20,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "XdHCv",
"x": 6800,
"y": 0,
"name": "Docs / How Fonoster works / Banner / Dark",
"theme": {
"ui:mode": "dark"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface-raised",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "MRwEI",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "m6ba2j",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "HOW FONOSTER WORKS",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "a9cI8I",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "One path for every call.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "AaMV8",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "A call reaches your workspace, and Fonoster hands it to your agent.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "hbPfB",
"name": "Flow",
"width": 720,
"height": 400,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 16,
"padding": [
0,
36
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "I6KCXb",
"name": "Caller",
"layout": "vertical",
"gap": 14,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "g5KvT",
"name": "Circle",
"width": 76,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 2,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "xTC2S",
"name": "Icon",
"width": 32,
"height": 32,
"icon": "phone",
"library": "lucide",
"fill": "$ui:text-secondary"
}
]
},
{
"type": "text",
"id": "BJFwK",
"name": "Label",
"fill": "$ui:text-primary",
"content": "Caller",
"fontFamily": "$ui:--font-secondary",
"fontSize": 20,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "I0dCHh",
"name": "Edge",
"width": "fill_container",
"padding": [
0,
0,
42,
0
],
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "cF2DY",
"name": "Line",
"fill": "$ui:accent",
"width": "fill_container",
"height": 2
},
{
"type": "path",
"id": "BJfIE",
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:accent",
"width": 10,
"height": 12
}
]
},
{
"type": "frame",
"id": "JdEfW",
"name": "Workspace",
"width": 250,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"layout": "vertical",
"gap": 12,
"padding": [
20,
20,
22,
20
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "EvO50",
"name": "Label",
"fill": "$ui:accent-text",
"content": "WORKSPACE",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 1.6
},
{
"type": "frame",
"id": "mpcEi",
"name": "Number",
"width": "fill_container",
"fill": "$ui:surface-raised",
"cornerRadius": 12,
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 12,
"padding": [
12,
14
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "HqZNu",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "hash",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "frame",
"id": "i9LkM1",
"name": "Text",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "gxrtP",
"name": "Title",
"fill": "$ui:text-primary",
"content": "Number",
"fontFamily": "$ui:--font-secondary",
"fontSize": 17,
"fontWeight": "600"
},
{
"type": "text",
"id": "wqJBg",
"name": "Sub",
"fill": "$ui:text-muted",
"content": "+1 555 010 4477",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "path",
"id": "lUtHZ",
"name": "Arrow down",
"geometry": "M0 0l12 0-6 10z",
"viewBox": [
0,
0,
12,
10
],
"fill": "$ui:accent",
"width": 12,
"height": 10
},
{
"type": "frame",
"id": "C9Uj6C",
"name": "Application",
"width": "fill_container",
"fill": "$ui:surface-raised",
"cornerRadius": 12,
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 12,
"padding": [
12,
14
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "K6mhbS",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "app-window",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "frame",
"id": "l4CYtZ",
"name": "Text",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "cs3Cc",
"name": "Title",
"fill": "$ui:text-primary",
"content": "Application",
"fontFamily": "$ui:--font-secondary",
"fontSize": 17,
"fontWeight": "600"
},
{
"type": "text",
"id": "NRQek",
"name": "Sub",
"fill": "$ui:text-muted",
"content": "Autopilot agent",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "r8FRP",
"name": "Edge",
"width": "fill_container",
"padding": [
0,
0,
42,
0
],
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "Bvrag",
"name": "Line",
"fill": "$ui:accent",
"width": "fill_container",
"height": 2
},
{
"type": "path",
"id": "y5ma7z",
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:accent",
"width": 10,
"height": 12
}
]
},
{
"type": "frame",
"id": "A8iQhH",
"name": "AI agent",
"layout": "vertical",
"gap": 14,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "dI68e",
"name": "Circle",
"width": 76,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 999,
"stroke": "$ui:accent",
"strokeWidth": 2,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "n8Rc3",
"name": "Icon",
"width": 32,
"height": 32,
"icon": "bot",
"library": "lucide",
"fill": "$ui:accent"
}
]
},
{
"type": "text",
"id": "S4x8aw",
"name": "Label",
"fill": "$ui:text-primary",
"content": "AI agent",
"fontFamily": "$ui:--font-secondary",
"fontSize": 20,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "viDXY",
"x": 6800,
"y": 700,
"name": "Docs / How Fonoster works / Banner / Light",
"theme": {
"ui:mode": "light"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "qSGzq",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "MUbYa",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "HOW FONOSTER WORKS",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "w6Pjz",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "One path for every call.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "Mslco",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "A call reaches your workspace, and Fonoster hands it to your agent.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "XM2Nw",
"name": "Flow",
"width": 720,
"height": 400,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 16,
"padding": [
0,
36
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "fG0be",
"name": "Caller",
"layout": "vertical",
"gap": 14,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "az6FS",
"name": "Circle",
"width": 76,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 2,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "HSPK0",
"name": "Icon",
"width": 32,
"height": 32,
"icon": "phone",
"library": "lucide",
"fill": "$ui:text-secondary"
}
]
},
{
"type": "text",
"id": "vxQJC",
"name": "Label",
"fill": "$ui:text-primary",
"content": "Caller",
"fontFamily": "$ui:--font-secondary",
"fontSize": 20,
"fontWeight": "600"
}
]
},
{
"type": "frame",
"id": "h6ox8l",
"name": "Edge",
"width": "fill_container",
"padding": [
0,
0,
42,
0
],
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "ToqRu",
"name": "Line",
"fill": "$ui:accent",
"width": "fill_container",
"height": 2
},
{
"type": "path",
"id": "Bfqo2",
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:accent",
"width": 10,
"height": 12
}
]
},
{
"type": "frame",
"id": "NrIFM",
"name": "Workspace",
"width": 250,
"fill": "$ui:surface",
"cornerRadius": 16,
"stroke": "$ui:accent",
"strokeWidth": 2,
"layout": "vertical",
"gap": 12,
"padding": [
20,
20,
22,
20
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "cdnwv",
"name": "Label",
"fill": "$ui:accent-text",
"content": "WORKSPACE",
"fontFamily": "$ui:--font-primary",
"fontSize": 14,
"fontWeight": "500",
"letterSpacing": 1.6
},
{
"type": "frame",
"id": "USmhQ",
"name": "Number",
"width": "fill_container",
"fill": "$ui:surface-raised",
"cornerRadius": 12,
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 12,
"padding": [
12,
14
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "gUKer",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "hash",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "frame",
"id": "aFIUc",
"name": "Text",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "gJqLG",
"name": "Title",
"fill": "$ui:text-primary",
"content": "Number",
"fontFamily": "$ui:--font-secondary",
"fontSize": 17,
"fontWeight": "600"
},
{
"type": "text",
"id": "M28akT",
"name": "Sub",
"fill": "$ui:text-muted",
"content": "+1 555 010 4477",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "path",
"id": "s5CiVD",
"name": "Arrow down",
"geometry": "M0 0l12 0-6 10z",
"viewBox": [
0,
0,
12,
10
],
"fill": "$ui:accent",
"width": 12,
"height": 10
},
{
"type": "frame",
"id": "HWgZF",
"name": "Application",
"width": "fill_container",
"fill": "$ui:surface-raised",
"cornerRadius": 12,
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 12,
"padding": [
12,
14
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "c7kDP",
"name": "Icon",
"width": 20,
"height": 20,
"icon": "app-window",
"library": "lucide",
"fill": "$ui:text-secondary"
},
{
"type": "frame",
"id": "Gv9Vj",
"name": "Text",
"layout": "vertical",
"gap": 2,
"children": [
{
"type": "text",
"id": "mRBv8",
"name": "Title",
"fill": "$ui:text-primary",
"content": "Application",
"fontFamily": "$ui:--font-secondary",
"fontSize": 17,
"fontWeight": "600"
},
{
"type": "text",
"id": "F3xae",
"name": "Sub",
"fill": "$ui:text-muted",
"content": "Autopilot agent",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "Lsu98",
"name": "Edge",
"width": "fill_container",
"padding": [
0,
0,
42,
0
],
"alignItems": "center",
"children": [
{
"type": "rectangle",
"id": "Xr7xo",
"name": "Line",
"fill": "$ui:accent",
"width": "fill_container",
"height": 2
},
{
"type": "path",
"id": "X4Z3EY",
"name": "Arrow",
"geometry": "M0 0l10 6-10 6z",
"viewBox": [
0,
0,
10,
12
],
"fill": "$ui:accent",
"width": 10,
"height": 12
}
]
},
{
"type": "frame",
"id": "HSl4F",
"name": "AI agent",
"layout": "vertical",
"gap": 14,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "NNeau",
"name": "Circle",
"width": 76,
"height": 76,
"fill": "$ui:surface",
"cornerRadius": 999,
"stroke": "$ui:accent",
"strokeWidth": 2,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "iFNWD",
"name": "Icon",
"width": 32,
"height": 32,
"icon": "bot",
"library": "lucide",
"fill": "$ui:accent"
}
]
},
{
"type": "text",
"id": "c692rA",
"name": "Label",
"fill": "$ui:text-primary",
"content": "AI agent",
"fontFamily": "$ui:--font-secondary",
"fontSize": 20,
"fontWeight": "600"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "qpDc4",
"x": 8500,
"y": 1300,
"name": "Docs / Turn-taking / Banner / Dark",
"theme": {
"ui:mode": "dark"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface-raised",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "bWBVi",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "xj8W5",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "AUTOPILOT",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "i7Elj",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Turn-taking and barge-in.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "EgOnI",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Your agent answers when the caller is done, not when they pause.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ndqGk",
"name": "Flow",
"width": 720,
"height": 400,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 26,
"padding": 40,
"justifyContent": "center",
"children": [
{
"type": "frame",
"id": "jjVzd",
"name": "Caller row",
"width": "fill_container",
"children": [
{
"type": "frame",
"id": "zbsVQ",
"name": "Caller bubble",
"fill": "$ui:surface",
"cornerRadius": [
18,
18,
18,
4
],
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 14,
"padding": [
16,
20
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "RKr3I",
"name": "Avatar",
"width": 44,
"height": 44,
"fill": "$ui:surface-sunken",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1.5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "KRBMz",
"name": "Icon",
"width": 22,
"height": 22,
"icon": "user",
"library": "lucide",
"fill": "$ui:text-secondary"
}
]
},
{
"type": "frame",
"id": "JwabW",
"name": "Text",
"layout": "vertical",
"gap": 3,
"children": [
{
"type": "text",
"id": "iRIU8",
"name": "Who",
"fill": "$ui:text-muted",
"content": "CALLER",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "500",
"letterSpacing": 1.4
},
{
"type": "text",
"id": "yHP3P",
"name": "Line",
"fill": "$ui:text-primary",
"content": "My account number is… 4 8 1 0 2",
"fontFamily": "$ui:--font-secondary",
"fontSize": 21,
"fontWeight": "500"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "qNst7",
"name": "Waveform",
"width": "fill_container",
"height": 72,
"gap": 5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 3,
"id": "mV7PJ",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 10
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "q1A09",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 51
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "M0M7k",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 17
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "R5DXb",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 19
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "zdwGe",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 15
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "gn6M8",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 33
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "Ivu1P",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 39
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "wMCgF",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 38
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "aiR6v",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 45
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "A9W2Cb",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 21
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "IxmQM",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 19
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "iSvrI",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 12
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "gqiIA",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 39
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "hHYGb",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 15
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "zQJvR",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 55
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "M5x7hw",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 25
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "x7iev",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 35
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "N6lDEd",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 15
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "nr9oJ",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 18
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "iI0L5",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 33
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "UgpNC",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 32
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "Am9Dh",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 52
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "yKQT7",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 22
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "zl2hA",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 37
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "H6w7Eh",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 10
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "SCReW",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 22
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "IIktt",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 16
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "AZwHZ",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "pRn2h",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "B0qx8",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "jP3va",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "HDTQW",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "J6hh2",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "A9cgh",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "iEWJu",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "N5l4f2",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 19
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "h74PO4",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 50
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "J4IVx",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 12
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "Wgfpb",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 18
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "kWTQh",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 14
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "nEQbA",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 37
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "BIO0Y",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 33
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "m2MWoN",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 45
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "ERkL0",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 40
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "BX9he",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 25
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "uODA9",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 17
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "Patks",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 14
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "j5Sjh",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 40
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "FK6ZH",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 13
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "ddK76",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 56
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "IPNIn",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 17
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "zGAMj",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 35
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "wuvqU",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 13
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "YA987",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 21
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "SklI7",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 30
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "V5nwny",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 39
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "sDjZU",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 47
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "LXTAC",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 29
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "FUKYd",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 34
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "z3zl4S",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 12
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "Irhg0",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 23
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "YnQ1r",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 11
}
]
},
{
"type": "frame",
"id": "DGLPS",
"name": "Agent row",
"width": "fill_container",
"justifyContent": "end",
"children": [
{
"type": "frame",
"id": "o8r0oV",
"name": "Agent bubble",
"fill": "$ui:surface-raised",
"cornerRadius": [
18,
18,
4,
18
],
"stroke": "$ui:accent",
"strokeWidth": 2,
"gap": 14,
"padding": [
16,
20
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "G3IJJ",
"name": "Avatar",
"width": 44,
"height": 44,
"fill": "$ui:surface-sunken",
"cornerRadius": 999,
"stroke": "$ui:accent",
"strokeWidth": 1.5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "Rg6bd",
"name": "Icon",
"width": 22,
"height": 22,
"icon": "bot",
"library": "lucide",
"fill": "$ui:accent"
}
]
},
{
"type": "frame",
"id": "xIB5m",
"name": "Text",
"layout": "vertical",
"gap": 3,
"children": [
{
"type": "text",
"id": "vFq1U",
"name": "Who",
"fill": "$ui:accent-text",
"content": "AGENT",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "500",
"letterSpacing": 1.4
},
{
"type": "text",
"id": "mxh2T",
"name": "Line",
"fill": "$ui:text-primary",
"content": "Thanks. I found your account.",
"fontFamily": "$ui:--font-secondary",
"fontSize": 21,
"fontWeight": "500"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "D9U7uE",
"x": 8500,
"y": 2000,
"name": "Docs / Turn-taking / Banner / Light",
"theme": {
"ui:mode": "light"
},
"clip": true,
"width": 1600,
"height": 600,
"fill": [
"$ui:surface",
{
"type": "image",
"enabled": true,
"url": "assets/pattern-hero.png",
"mode": "cover"
}
],
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 2,
"gap": 72,
"padding": [
0,
96
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Zgyfl",
"name": "Copy",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "text",
"id": "I1TqY",
"name": "Eyebrow",
"fill": "$ui:text-secondary",
"content": "AUTOPILOT",
"fontFamily": "$ui:--font-primary",
"fontSize": 20,
"fontWeight": "500",
"letterSpacing": 2.4
},
{
"type": "text",
"id": "zcxFe",
"name": "Headline",
"fill": "$ui:text-primary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Turn-taking and barge-in.",
"lineHeight": 1.06,
"fontFamily": "$ui:--font-secondary",
"fontSize": 68,
"fontWeight": "600",
"letterSpacing": -2.2
},
{
"type": "text",
"id": "yJga0",
"name": "Subhead",
"fill": "$ui:text-secondary",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Your agent answers when the caller is done, not when they pause.",
"lineHeight": 1.4,
"fontFamily": "$ui:--font-secondary",
"fontSize": 26,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "T81Q2",
"name": "Flow",
"width": 720,
"height": 400,
"fill": "$ui:surface-sunken",
"cornerRadius": 16,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 26,
"padding": 40,
"justifyContent": "center",
"children": [
{
"type": "frame",
"id": "r58hE",
"name": "Caller row",
"width": "fill_container",
"children": [
{
"type": "frame",
"id": "pSrOo",
"name": "Caller bubble",
"fill": "$ui:surface",
"cornerRadius": [
18,
18,
18,
4
],
"stroke": "$ui:border",
"strokeWidth": 1,
"gap": 14,
"padding": [
16,
20
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "ig6fa",
"name": "Avatar",
"width": 44,
"height": 44,
"fill": "$ui:surface-sunken",
"cornerRadius": 999,
"stroke": "$ui:border",
"strokeWidth": 1.5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "A2HEz",
"name": "Icon",
"width": 22,
"height": 22,
"icon": "user",
"library": "lucide",
"fill": "$ui:text-secondary"
}
]
},
{
"type": "frame",
"id": "kIX94",
"name": "Text",
"layout": "vertical",
"gap": 3,
"children": [
{
"type": "text",
"id": "yfABc",
"name": "Who",
"fill": "$ui:text-muted",
"content": "CALLER",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "500",
"letterSpacing": 1.4
},
{
"type": "text",
"id": "g0a4Y",
"name": "Line",
"fill": "$ui:text-primary",
"content": "My account number is… 4 8 1 0 2",
"fontFamily": "$ui:--font-secondary",
"fontSize": 21,
"fontWeight": "500"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "ViLvV",
"name": "Waveform",
"width": "fill_container",
"height": 72,
"gap": 5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "rectangle",
"cornerRadius": 3,
"id": "oTqzQ",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 10
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "Zb7jy",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 51
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "VFkqO",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 17
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "wiiJd",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 19
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "masBO",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 15
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "F6Fz8",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 33
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "TzQss",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 39
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "cLIw9",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 38
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "acdQ1",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 45
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "H2TCfk",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 21
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "QjbG8",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 19
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "NytMi",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 12
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "en6cD",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 39
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "EOs40",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 15
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "BIQ47",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 55
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "zXiqd",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 25
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "iA9N1",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 35
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "VjtXc",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 15
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "KMzT1",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 18
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "eyhTk",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 33
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "i0XA8",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 32
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "QLOYr",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 52
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "QdxCK",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 22
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "iSj2d",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 37
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "utztE",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 10
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "HnTzY",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 22
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "KbinN",
"name": "Caller bar",
"fill": "$ui:text-muted",
"width": 5,
"height": 16
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "h20k2",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "MjC20",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "hslJj",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "QoCn8",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "DaJ7t",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "rMqBk",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "H84bUQ",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "ORllJ",
"name": "Pause",
"fill": "$ui:border",
"width": 5,
"height": 4
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "hnNJ3",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 19
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "p4fxk",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 50
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "I67Yq",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 12
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "lKCn6",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 18
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "D9Jbx6",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 14
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "MLBRP",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 37
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "sC4Iv",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 33
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "wfOu3",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 45
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "KF9DP",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 40
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "LqmUw",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 25
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "FldPX",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 17
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "Gnl5q",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 14
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "tQGlw",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 40
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "KjlJ2",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 13
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "SjYyq",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 56
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "mXOad",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 17
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "aK5e9",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 35
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "G4MMZd",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 13
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "c0BCO",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 21
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "s9CfiI",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 30
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "BwDdk",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 39
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "pE3Hn",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 47
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "XYath",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 29
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "WNOty",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 34
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "gki3L",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 12
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "cxQw4",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 23
},
{
"type": "rectangle",
"cornerRadius": 3,
"id": "Oa1Wf",
"name": "Agent bar",
"fill": "$ui:accent",
"width": 5,
"height": 11
}
]
},
{
"type": "frame",
"id": "R5plpN",
"name": "Agent row",
"width": "fill_container",
"justifyContent": "end",
"children": [
{
"type": "frame",
"id": "sNLU3",
"name": "Agent bubble",
"fill": "$ui:surface-raised",
"cornerRadius": [
18,
18,
4,
18
],
"stroke": "$ui:accent",
"strokeWidth": 2,
"gap": 14,
"padding": [
16,
20
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "EluoI",
"name": "Avatar",
"width": 44,
"height": 44,
"fill": "$ui:surface-sunken",
"cornerRadius": 999,
"stroke": "$ui:accent",
"strokeWidth": 1.5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "ZCTTz",
"name": "Icon",
"width": 22,
"height": 22,
"icon": "bot",
"library": "lucide",
"fill": "$ui:accent"
}
]
},
{
"type": "frame",
"id": "D9AkC",
"name": "Text",
"layout": "vertical",
"gap": 3,
"children": [
{
"type": "text",
"id": "BuOFj",
"name": "Who",
"fill": "$ui:accent-text",
"content": "AGENT",
"fontFamily": "$ui:--font-primary",
"fontSize": 13,
"fontWeight": "500",
"letterSpacing": 1.4
},
{
"type": "text",
"id": "YbQTh",
"name": "Line",
"fill": "$ui:text-primary",
"content": "Thanks. I found your account.",
"fontFamily": "$ui:--font-secondary",
"fontSize": 21,
"fontWeight": "500"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "DkAff",
"x": 3400,
"y": 1500,
"name": "Docs / Knowledge base / Lookup / Dark",
"theme": {
"ui:mode": "dark"
},
"clip": true,
"width": 1600,
"height": 900,
"fill": "$ui:surface-raised",
"cornerRadius": 24,
"stroke": "$ui:border",
"strokeWidth": 1,
"layout": "none",
"children": [
{
"type": "text",
"id": "ouXBr",
"x": 48,
"y": 36,
"name": "Title",
"fill": "$ui:text-primary",
"content": "How the knowledge base answers",
"fontFamily": "$ui:--font-secondary",
"fontSize": 30,
"fontWeight": "600"
},
{
"type": "text",
"id": "lS9zs",
"x": 48,
"y": 80,
"name": "Subtitle",
"fill": "$ui:text-secondary",
"content": "Your documents are searched fresh on every turn, and the passages are used for one reply only.",
"fontFamily": "$ui:--font-secondary",
"fontSize": 17,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "E9vcR",
"x": 1300,
"y": 44,
"name": "Legend",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "V3YWf",
"