designs/stripe-fake.pen
Rama main · réplica de lectura del repositorio original.
{
"version": "2.21",
"children": [
{
"type": "frame",
"id": "VxzWg",
"x": 0,
"y": 0,
"name": "Stripe fake / Customers",
"theme": {
"mode": "light"
},
"clip": true,
"width": 1440,
"height": 1024,
"fill": "$sf-bg",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "SPgAW",
"name": "Top bar",
"width": "fill_container",
"height": 56,
"fill": "$sf-surface",
"stroke": "$sf-border",
"strokeWidth": {
"bottom": 1
},
"gap": 16,
"padding": [
0,
20
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "F8nUel",
"name": "Brand",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "b1g16",
"name": "Mark",
"width": 24,
"height": 24,
"fill": "$sf-accent",
"cornerRadius": 6,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "t3cIQ",
"name": "Mark icon",
"width": 14,
"height": 14,
"icon": "flask-conical",
"library": "lucide",
"fill": "$sf-on-accent"
}
]
},
{
"type": "frame",
"id": "MAfRz",
"name": "Wordmark",
"gap": 5,
"alignItems": "end",
"children": [
{
"type": "text",
"id": "QnnfG",
"name": "stripe",
"fill": "$sf-text",
"content": "stripe",
"fontFamily": "$sf-font",
"fontSize": 18,
"fontWeight": "800",
"letterSpacing": -0.6
},
{
"type": "text",
"id": "jYYvs",
"name": "fake",
"fill": "$sf-accent",
"content": "fake",
"fontFamily": "$sf-font",
"fontSize": 18,
"fontWeight": "500",
"letterSpacing": -0.4
}
]
},
{
"type": "text",
"id": "CqRFk",
"name": "Host",
"fill": "$sf-text-muted",
"content": "localhost:12111",
"fontFamily": "$sf-font-mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "z5r6Vh",
"name": "Spacer",
"width": "fill_container",
"height": 1
},
{
"type": "frame",
"id": "FirGP",
"name": "Theme switch",
"cornerRadius": 7,
"stroke": "$sf-border",
"strokeWidth": 1,
"gap": 2,
"padding": 2,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Q75Smd",
"name": "Light",
"width": 28,
"height": 24,
"fill": "$sf-muted",
"cornerRadius": 5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "q8plmS",
"name": "Light icon",
"width": 14,
"height": 14,
"icon": "sun",
"library": "lucide",
"fill": "$sf-accent"
}
]
},
{
"type": "frame",
"id": "UND67",
"name": "Dark",
"width": 28,
"height": 24,
"cornerRadius": 5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "Ebl3c",
"name": "Dark icon",
"width": 14,
"height": 14,
"icon": "moon",
"library": "lucide",
"fill": "$sf-text-muted"
}
]
}
]
},
{
"type": "frame",
"id": "L2l3Z",
"name": "Test clock",
"cornerRadius": 6,
"stroke": "$sf-border",
"strokeWidth": 1,
"gap": 8,
"padding": [
6,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "tzEEw",
"name": "Clock icon",
"width": 14,
"height": 14,
"icon": "timer",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "BQMK8",
"name": "Test clock: 2026-11-01",
"fill": "$sf-text",
"content": "Test clock: 2026-11-01",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "fG0Xi",
"name": "Advance button",
"fill": "$sf-accent",
"cornerRadius": 6,
"gap": 8,
"padding": [
8,
14
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "RekKC",
"name": "Icon",
"width": 14,
"height": 14,
"icon": "fast-forward",
"library": "lucide",
"fill": "$sf-on-accent"
},
{
"type": "text",
"id": "kBR0N",
"name": "Advance 1 month",
"fill": "$sf-on-accent",
"content": "Advance 1 month",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "xjqfP",
"name": "Body",
"width": "fill_container",
"height": "fill_container",
"children": [
{
"type": "frame",
"id": "Joxy7",
"name": "Nav",
"width": 220,
"height": "fill_container",
"fill": "$sf-surface",
"stroke": "$sf-border",
"strokeWidth": {
"right": 1
},
"layout": "vertical",
"gap": 2,
"padding": 12,
"children": [
{
"type": "frame",
"id": "WLgXp",
"name": "Nav · Customers",
"width": "fill_container",
"fill": "$sf-muted",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "c5qkz",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "users",
"library": "lucide",
"fill": "$sf-text"
},
{
"type": "text",
"id": "cMdOV",
"name": "Label",
"fill": "$sf-text",
"content": "Customers",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "F5tXDO",
"name": "Nav · Meters",
"width": "fill_container",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "E9iQ6",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "gauge",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "b8YobT",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Meters",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "s62f2",
"name": "Nav · Credit grants",
"width": "fill_container",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "pEdmT",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "coins",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "ODpTc",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Credit grants",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "fFRr9",
"name": "Nav · Invoices",
"width": "fill_container",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "gnIQI",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "receipt",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "S6d4T",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Invoices",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "TP5N3",
"name": "Nav · Webhooks",
"width": "fill_container",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "O3BGJ",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "webhook",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "rv8UZ",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Webhooks",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Bddyd",
"name": "Nav spacer",
"width": "fill_container",
"height": "fill_container"
},
{
"type": "frame",
"id": "ixO44",
"name": "Control",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"layout": "vertical",
"gap": 2,
"padding": [
10,
0,
0,
0
],
"children": [
{
"type": "frame",
"id": "R7ur1",
"name": "Control title wrap",
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "NC7UE",
"name": "Control title",
"fill": "$sf-text-muted",
"content": "CONTROL",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal",
"letterSpacing": 1
}
]
},
{
"type": "frame",
"id": "a6wBO",
"name": "Nav · Fail next payment",
"width": "fill_container",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "O6vpK",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "circle-x",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "XL0hS",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Fail next payment",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "zxDY7",
"name": "Nav · Reset state",
"width": "fill_container",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "SMBry",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "rotate-ccw",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "W5WvIf",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Reset state",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "so44A",
"name": "Content",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"gap": 24,
"padding": [
24,
32
],
"children": [
{
"type": "frame",
"id": "L75Ey",
"name": "Header",
"width": "fill_container",
"gap": 16,
"alignItems": "end",
"children": [
{
"type": "frame",
"id": "FHtYN",
"name": "Title",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "text",
"id": "qE35b",
"name": "Breadcrumb",
"fill": "$sf-text-muted",
"content": "Customers / cus_fake_001",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "gCm6R",
"name": "Customer",
"fill": "$sf-text",
"content": "Acme · cus_fake_001",
"fontFamily": "$sf-font",
"fontSize": 22,
"fontWeight": "600"
},
{
"type": "text",
"id": "YkG3J",
"name": "Meta",
"fill": "$sf-text-muted",
"content": "owner usr_acme · Pay-as-you-go, $25/month",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "x4lBA",
"name": "Sample note",
"cornerRadius": 4,
"stroke": "$sf-border",
"strokeWidth": 1,
"gap": 6,
"padding": [
4,
8
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "rbCc0",
"name": "Icon",
"width": 12,
"height": 12,
"icon": "info",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "s18o9L",
"name": "sample data",
"fill": "$sf-text-muted",
"content": "sample data",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "TRAJu",
"name": "Tiles",
"width": "fill_container",
"gap": 16,
"children": [
{
"type": "frame",
"id": "gPJIt",
"name": "Tile · Credit balance",
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 8,
"padding": 16,
"children": [
{
"type": "text",
"id": "LmXBS",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Credit balance",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "cAs9s",
"name": "Value",
"fill": "$sf-text",
"content": "1,840 credits",
"fontFamily": "$sf-font",
"fontSize": 24,
"fontWeight": "600"
},
{
"type": "text",
"id": "rPoL9",
"name": "Sub",
"fill": "$sf-text-muted",
"content": "$18.40",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ngiPR",
"name": "Tile · Plan credits left",
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 8,
"padding": 16,
"children": [
{
"type": "text",
"id": "frg4N",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Plan credits left",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "c49BvP",
"name": "Value",
"fill": "$sf-text",
"content": "1,240 of 2,500",
"fontFamily": "$sf-font",
"fontSize": 24,
"fontWeight": "600"
},
{
"type": "text",
"id": "DGAtt",
"name": "Sub",
"fill": "$sf-text-muted",
"content": "expire Nov 1",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "Fn6P8",
"name": "Bar",
"width": "fill_container",
"height": 4,
"fill": "$sf-muted",
"cornerRadius": 2,
"children": [
{
"type": "frame",
"id": "p5Zjmv",
"name": "Bar fill",
"width": 186,
"height": 4,
"fill": "$sf-text-muted",
"cornerRadius": 2
}
]
}
]
},
{
"type": "frame",
"id": "dtyGJ",
"name": "Tile · Top-up credits",
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 8,
"padding": 16,
"children": [
{
"type": "text",
"id": "snRdq",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Top-up credits",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "text",
"id": "tuZJN",
"name": "Value",
"fill": "$sf-text",
"content": "600",
"fontFamily": "$sf-font",
"fontSize": 24,
"fontWeight": "600"
},
{
"type": "text",
"id": "tMMTP",
"name": "Sub",
"fill": "$sf-text-muted",
"content": "last 12 months",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "IaDOV",
"name": "Lower",
"width": "fill_container",
"layout": "vertical",
"gap": 24,
"children": [
{
"type": "frame",
"id": "ePbBq",
"name": "Meter totals",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "text",
"id": "TXKuS",
"name": "Title",
"fill": "$sf-text",
"content": "Meter totals this period",
"fontFamily": "$sf-font",
"fontSize": 15,
"fontWeight": "600"
},
{
"type": "frame",
"id": "C0CXRm",
"name": "Table",
"clip": true,
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "nlgFd",
"name": "Header row",
"width": "fill_container",
"fill": "$sf-muted",
"stroke": "$sf-border",
"gap": 16,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "RTnR6",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "K6CUvl",
"name": "Value",
"fill": "$sf-text-muted",
"content": "METER",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "p3bNI6",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "aifpW",
"name": "Value",
"fill": "$sf-text-muted",
"content": "UNIT",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "K6LJQ",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "YR1uT",
"name": "Value",
"fill": "$sf-text-muted",
"content": "TOTAL",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "Gqu9N",
"name": "Row 1",
"width": "fill_container",
"stroke": "$sf-border",
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "I0E82H",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "ID3Zk",
"name": "Value",
"fill": "$sf-text",
"content": "call_seconds",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "mJVvW",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "Tfl1E",
"name": "Value",
"fill": "$sf-text",
"content": "seconds",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "KhAE4",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "Ul0Nx",
"name": "Value",
"fill": "$sf-text",
"content": "9,480",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "xRGKO",
"name": "Row 2",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "TPdSy",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "cmzbP",
"name": "Value",
"fill": "$sf-text",
"content": "ai_llm_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ZwK8b",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "WbOnU",
"name": "Value",
"fill": "$sf-text",
"content": "cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "lFK8l",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "LOhFx",
"name": "Value",
"fill": "$sf-text",
"content": "412",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "kdBlk",
"name": "Row 3",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "KbvVZ",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "uo7cB",
"name": "Value",
"fill": "$sf-text",
"content": "ai_tts_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "EvkMW",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "rmnrh",
"name": "Value",
"fill": "$sf-text",
"content": "cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "VxQr5",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "fzU6J",
"name": "Value",
"fill": "$sf-text",
"content": "236",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "r1m5X",
"name": "Row 4",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "EPKhR",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "gPnUq",
"name": "Value",
"fill": "$sf-text",
"content": "nc_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "V6go1Q",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "O4wW8",
"name": "Value",
"fill": "$sf-text",
"content": "cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "U4WIK",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "yVi89",
"name": "Value",
"fill": "$sf-text",
"content": "52",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "nh4X5",
"name": "Recent webhooks",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "text",
"id": "adz0d",
"name": "Title",
"fill": "$sf-text",
"content": "Recent webhooks",
"fontFamily": "$sf-font",
"fontSize": 15,
"fontWeight": "600"
},
{
"type": "frame",
"id": "ZQH6O",
"name": "Table",
"clip": true,
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "PAOyz",
"name": "Header row",
"width": "fill_container",
"fill": "$sf-muted",
"stroke": "$sf-border",
"gap": 16,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "pDt2Z",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "R0qVO2",
"name": "Value",
"fill": "$sf-text-muted",
"content": "EVENT",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ed7pD",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "S3lbH",
"name": "Value",
"fill": "$sf-text-muted",
"content": "STATUS",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "t5aak",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "kV1bQ",
"name": "Value",
"fill": "$sf-text-muted",
"content": "TIME",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "GuzwV",
"name": "Row 1",
"width": "fill_container",
"stroke": "$sf-border",
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "TUwhx",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "VJUXS",
"name": "Value",
"fill": "$sf-text",
"content": "billing.credit_balance_transaction.created",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "dgi1r",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "iwDPQ",
"name": "Value",
"fill": "$sf-text-muted",
"content": "200",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "bKEln",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "q8SxU7",
"name": "Value",
"fill": "$sf-text",
"content": "10:42:08",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "vrSLq",
"name": "Row 2",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "i7sRc",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "uRlkK",
"name": "Value",
"fill": "$sf-text",
"content": "invoice.paid",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "g2npGF",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "lKhKV",
"name": "Value",
"fill": "$sf-text-muted",
"content": "200",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "b5bgd",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "f8xVAc",
"name": "Value",
"fill": "$sf-text",
"content": "10:40:51",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "Cmxsz",
"name": "Row 3",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Gt6vc",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "CNldJ",
"name": "Value",
"fill": "$sf-text",
"content": "payment_intent.succeeded",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "xMjZs",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "ZUoKD",
"name": "Value",
"fill": "$sf-text-muted",
"content": "200",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "cwLKD",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "OdbGy",
"name": "Value",
"fill": "$sf-text",
"content": "10:40:50",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "WfZIX",
"name": "Row 4",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "qXNwI",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "K1GJv",
"name": "Value",
"fill": "$sf-text",
"content": "invoice.finalized",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "at9t0",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "m4VNv",
"name": "Value",
"fill": "$sf-danger",
"content": "500 retrying",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "gDXoR",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "HZDU6",
"name": "Value",
"fill": "$sf-text",
"content": "10:40:12",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "jt3W9",
"x": 1520,
"y": 0,
"name": "Stripe fake / Meters",
"theme": {
"mode": "light"
},
"clip": true,
"width": 1440,
"height": 1024,
"fill": "$sf-bg",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "z26aN",
"name": "Top bar",
"width": "fill_container",
"height": 56,
"fill": "$sf-surface",
"stroke": "$sf-border",
"strokeWidth": {
"bottom": 1
},
"gap": 16,
"padding": [
0,
20
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "tcCtA",
"name": "Brand",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "KhUxE",
"name": "Mark",
"width": 24,
"height": 24,
"fill": "$sf-accent",
"cornerRadius": 6,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "c69g0",
"name": "Mark icon",
"width": 14,
"height": 14,
"icon": "flask-conical",
"library": "lucide",
"fill": "$sf-on-accent"
}
]
},
{
"type": "frame",
"id": "Q9MOdg",
"name": "Wordmark",
"gap": 5,
"alignItems": "end",
"children": [
{
"type": "text",
"id": "UI9UF",
"name": "stripe",
"fill": "$sf-text",
"content": "stripe",
"fontFamily": "$sf-font",
"fontSize": 18,
"fontWeight": "800",
"letterSpacing": -0.6
},
{
"type": "text",
"id": "Wv6Ra",
"name": "fake",
"fill": "$sf-accent",
"content": "fake",
"fontFamily": "$sf-font",
"fontSize": 18,
"fontWeight": "500",
"letterSpacing": -0.4
}
]
},
{
"type": "text",
"id": "VBFja",
"name": "Host",
"fill": "$sf-text-muted",
"content": "localhost:12111",
"fontFamily": "$sf-font-mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "P2GbWe",
"name": "Spacer",
"width": "fill_container",
"height": 1
},
{
"type": "frame",
"id": "GCuIL",
"name": "Theme switch",
"cornerRadius": 7,
"stroke": "$sf-border",
"strokeWidth": 1,
"gap": 2,
"padding": 2,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "hoXao",
"name": "Light",
"width": 28,
"height": 24,
"fill": "$sf-muted",
"cornerRadius": 5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "w6G8y",
"name": "Light icon",
"width": 14,
"height": 14,
"icon": "sun",
"library": "lucide",
"fill": "$sf-accent"
}
]
},
{
"type": "frame",
"id": "Qlsh6",
"name": "Dark",
"width": 28,
"height": 24,
"cornerRadius": 5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "imZ1N",
"name": "Dark icon",
"width": 14,
"height": 14,
"icon": "moon",
"library": "lucide",
"fill": "$sf-text-muted"
}
]
}
]
},
{
"type": "frame",
"id": "CaT5n",
"name": "Test clock",
"cornerRadius": 6,
"stroke": "$sf-border",
"strokeWidth": 1,
"gap": 8,
"padding": [
6,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "yklDl",
"name": "Clock icon",
"width": 14,
"height": 14,
"icon": "timer",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "iquXE",
"name": "Test clock: 2026-11-01",
"fill": "$sf-text",
"content": "Test clock: 2026-11-01",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "D4qAm",
"name": "Advance button",
"fill": "$sf-accent",
"cornerRadius": 6,
"gap": 8,
"padding": [
8,
14
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "xxWBg",
"name": "Icon",
"width": 14,
"height": 14,
"icon": "fast-forward",
"library": "lucide",
"fill": "$sf-on-accent"
},
{
"type": "text",
"id": "g29jo",
"name": "Advance 1 month",
"fill": "$sf-on-accent",
"content": "Advance 1 month",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "o6BOq",
"name": "Body",
"width": "fill_container",
"height": "fill_container",
"children": [
{
"type": "frame",
"id": "D7VHmg",
"name": "Nav",
"width": 220,
"height": "fill_container",
"fill": "$sf-surface",
"stroke": "$sf-border",
"strokeWidth": {
"right": 1
},
"layout": "vertical",
"gap": 2,
"padding": 12,
"children": [
{
"type": "frame",
"id": "f6rZFf",
"name": "Nav · Customers",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "ssKg9",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "users",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "oTmQf",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Customers",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "cLNqF",
"name": "Nav · Meters",
"width": "fill_container",
"fill": "$sf-muted",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "dHAJt",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "gauge",
"library": "lucide",
"fill": "$sf-text"
},
{
"type": "text",
"id": "TlUYv",
"name": "Label",
"fill": "$sf-text",
"content": "Meters",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "i9eKh",
"name": "Nav · Credit grants",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "kOKnr",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "coins",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "CCFqM",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Credit grants",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "r3CX4",
"name": "Nav · Invoices",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "m5GQof",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "receipt",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "PXjWP",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Invoices",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "wckR0",
"name": "Nav · Webhooks",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "ImLPS",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "webhook",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "R4tY8",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Webhooks",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "F1Xs3",
"name": "Nav spacer",
"width": "fill_container",
"height": "fill_container"
},
{
"type": "frame",
"id": "ZrI0h",
"name": "Control",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"layout": "vertical",
"gap": 2,
"padding": [
10,
0,
0,
0
],
"children": [
{
"type": "frame",
"id": "GuQGB",
"name": "Control title wrap",
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "wlHok",
"name": "Control title",
"fill": "$sf-text-muted",
"content": "CONTROL",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal",
"letterSpacing": 1
}
]
},
{
"type": "frame",
"id": "yT4iT",
"name": "Nav · Fail next payment",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "ZU8jd",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "circle-x",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "e3aCd",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Fail next payment",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "jaNum",
"name": "Nav · Reset state",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "qlb9U",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "rotate-ccw",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "F4FXv",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Reset state",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "yVxwU",
"name": "Content",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"gap": 24,
"padding": [
24,
32
],
"children": [
{
"type": "frame",
"id": "C8Ngwv",
"name": "Header",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "text",
"id": "nABui",
"name": "Title",
"fill": "$sf-text",
"content": "Meters",
"fontFamily": "$sf-font",
"fontSize": 22,
"fontWeight": "600"
},
{
"type": "text",
"id": "l5L18",
"name": "Sub",
"fill": "$sf-text-muted",
"content": "Billing Meters and the events Fonoster sent this period.",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "yooR4",
"name": "Meters table",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "text",
"id": "PmblM",
"name": "Title",
"fill": "$sf-text",
"content": "Meters",
"fontFamily": "$sf-font",
"fontSize": 15,
"fontWeight": "600"
},
{
"type": "frame",
"id": "Zfq2K",
"name": "Table",
"clip": true,
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "be6xA",
"name": "Header row",
"width": "fill_container",
"fill": "$sf-muted",
"stroke": "$sf-border",
"gap": 16,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "H7aJ1B",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "T07aUV",
"name": "Value",
"fill": "$sf-text-muted",
"content": "EVENT NAME",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "YRnDZ",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "GqAgq",
"name": "Value",
"fill": "$sf-text-muted",
"content": "AGGREGATION",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "XKLzF",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "WkQXR",
"name": "Value",
"fill": "$sf-text-muted",
"content": "UNIT",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "WIe7w",
"name": "Cell",
"width": 150,
"children": [
{
"type": "text",
"id": "bCcFI",
"name": "Value",
"fill": "$sf-text-muted",
"content": "VALUE THIS PERIOD",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ObmKZ",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "Hujam",
"name": "Value",
"fill": "$sf-text-muted",
"content": "LAST EVENT",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "i7OWr",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "s55nxw",
"name": "Value",
"fill": "$sf-text-muted",
"content": "ERROR REPORTS",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "gPe0c",
"name": "Row 1",
"width": "fill_container",
"stroke": "$sf-border",
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Ev0Vn",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "N2OTMv",
"name": "Value",
"fill": "$sf-text",
"content": "call_seconds",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "uDn77",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "JQGgB",
"name": "Value",
"fill": "$sf-text",
"content": "sum",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "l4a0Sm",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "eKspJ",
"name": "Value",
"fill": "$sf-text",
"content": "seconds",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "nzho5",
"name": "Cell",
"width": 150,
"children": [
{
"type": "text",
"id": "M7WiV",
"name": "Value",
"fill": "$sf-text",
"content": "9,480",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "vLSbr",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "iqeBy",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-31 23:58:12",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "DeR5n",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "foxal",
"name": "Value",
"fill": "$sf-text-muted",
"content": "0",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "DDEbY",
"name": "Row 2",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "fc2KQ",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "LXqpN",
"name": "Value",
"fill": "$sf-text",
"content": "ai_llm_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "K2Btpi",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "CHLOY",
"name": "Value",
"fill": "$sf-text",
"content": "sum",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "J7bWtT",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "jxhgd",
"name": "Value",
"fill": "$sf-text",
"content": "cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Z5wJuQ",
"name": "Cell",
"width": 150,
"children": [
{
"type": "text",
"id": "vby2z",
"name": "Value",
"fill": "$sf-text",
"content": "412",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "CQfX1",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "SDeQC",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-31 23:58:12",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "g1WInN",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "gIcUR",
"name": "Value",
"fill": "$sf-text-muted",
"content": "0",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "vPido",
"name": "Row 3",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "kMoms",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "bQE9x",
"name": "Value",
"fill": "$sf-text",
"content": "ai_stt_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "DMQvT",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "zqqZQ",
"name": "Value",
"fill": "$sf-text",
"content": "sum",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "cLniJ",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "VRHFI",
"name": "Value",
"fill": "$sf-text",
"content": "cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "P0edx2",
"name": "Cell",
"width": 150,
"children": [
{
"type": "text",
"id": "n8QAa3",
"name": "Value",
"fill": "$sf-text",
"content": "0",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "XOzDn",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "tXbZW",
"name": "Value",
"fill": "$sf-text",
"content": "—",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "bOa2y",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "U0GrA",
"name": "Value",
"fill": "$sf-text-muted",
"content": "0",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "t3GqQ",
"name": "Row 4",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "mpjle",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "y5pn0",
"name": "Value",
"fill": "$sf-text",
"content": "ai_tts_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "TDtnu",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "dlwyC",
"name": "Value",
"fill": "$sf-text",
"content": "sum",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "XPLpL",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "D0ouL",
"name": "Value",
"fill": "$sf-text",
"content": "cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "p50INd",
"name": "Cell",
"width": 150,
"children": [
{
"type": "text",
"id": "C0rp1",
"name": "Value",
"fill": "$sf-text",
"content": "236",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Hm44P",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "Z2AWg",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-31 23:57:40",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "AQESW",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "Tr4rq",
"name": "Value",
"fill": "$sf-text-muted",
"content": "0",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "j5oDG",
"name": "Row 5",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "DRu67",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "fEU6h",
"name": "Value",
"fill": "$sf-text",
"content": "nc_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "VBhbe",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "KKmfI",
"name": "Value",
"fill": "$sf-text",
"content": "sum",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "a3R21",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "dDM3H",
"name": "Value",
"fill": "$sf-text",
"content": "cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Lq2Ik",
"name": "Cell",
"width": 150,
"children": [
{
"type": "text",
"id": "wKB6n",
"name": "Value",
"fill": "$sf-text",
"content": "52",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "RHGy4",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "TezXl",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-31 23:41:03",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "IwfHq",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "lxAo5",
"name": "Value",
"fill": "$sf-danger",
"content": "1",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "kG7Xw",
"name": "Meter events table",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "text",
"id": "k44onU",
"name": "Title",
"fill": "$sf-text",
"content": "Recent meter events",
"fontFamily": "$sf-font",
"fontSize": 15,
"fontWeight": "600"
},
{
"type": "frame",
"id": "yy8uv",
"name": "Table",
"clip": true,
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "atbWS",
"name": "Header row",
"width": "fill_container",
"fill": "$sf-muted",
"stroke": "$sf-border",
"gap": 16,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "LVcVQ",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "doGaY",
"name": "Value",
"fill": "$sf-text-muted",
"content": "IDENTIFIER",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "TWiY4",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "jWkvg",
"name": "Value",
"fill": "$sf-text-muted",
"content": "EVENT NAME",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "yIzQx",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "ufEs5",
"name": "Value",
"fill": "$sf-text-muted",
"content": "CUSTOMER",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "GRNIR",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "k2vMGX",
"name": "Value",
"fill": "$sf-text-muted",
"content": "VALUE",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "LyMKM",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "bXjWl",
"name": "Value",
"fill": "$sf-text-muted",
"content": "TIMESTAMP",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "o64FO",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "rjSk6",
"name": "Value",
"fill": "$sf-text-muted",
"content": "STATUS",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "qeDrd",
"name": "Row 1",
"width": "fill_container",
"stroke": "$sf-border",
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "TE2HD",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "YLTWH",
"name": "Value",
"fill": "$sf-text",
"content": "usg_01JB8Z4K2M9Q",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "SwTzd",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "gfVuY",
"name": "Value",
"fill": "$sf-text",
"content": "call_seconds",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "mu21M",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "oOBUU",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_001",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "SbiJY",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "tqjQc",
"name": "Value",
"fill": "$sf-text",
"content": "184",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Im66s",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "FxNhT",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-31 23:58:12",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Rb58b",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "G0NuU",
"name": "Value",
"fill": "$sf-text-muted",
"content": "accepted",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "ZyTFi",
"name": "Row 2",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "z7YuNK",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "nYmpH",
"name": "Value",
"fill": "$sf-text",
"content": "usg_01JB8Z4K2M9R",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "pYmZz",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "g1FqV",
"name": "Value",
"fill": "$sf-text",
"content": "ai_llm_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "fxEkI",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "J9PCfW",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_001",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "twnFn",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "yhxfn",
"name": "Value",
"fill": "$sf-text",
"content": "7",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "d67DxN",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "r8pY8",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-31 23:58:12",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "dEHtR",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "MxBSH",
"name": "Value",
"fill": "$sf-text-muted",
"content": "accepted",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "MuHPL",
"name": "Row 3",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "lx4sK",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "FHPZQ",
"name": "Value",
"fill": "$sf-text",
"content": "usg_01JB8Z3T7A1C",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "IbycN",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "o7sdrX",
"name": "Value",
"fill": "$sf-text",
"content": "ai_tts_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "vCOHN",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "HOocD",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_001",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "cZJeK",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "iSkhW",
"name": "Value",
"fill": "$sf-text",
"content": "4",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "M8QFxs",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "rmI6o",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-31 23:57:40",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Q1Kha",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "IpMae",
"name": "Value",
"fill": "$sf-text-muted",
"content": "accepted",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "Vc7Cu",
"name": "Row 4",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "e9Cbi",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "ih6Hw",
"name": "Value",
"fill": "$sf-text",
"content": "usg_01JB8YQ0F5WD",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "md5vM",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "tyh8C",
"name": "Value",
"fill": "$sf-text",
"content": "nc_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "l1TP0X",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "rjzH9",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_002",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "w8Ezw",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "z9Jfcj",
"name": "Value",
"fill": "$sf-text",
"content": "3",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "EQCch",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "S5Jwz",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-31 23:41:03",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "xSkAt",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "F0vWKr",
"name": "Value",
"fill": "$sf-danger",
"content": "rejected",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "X67QS",
"name": "Row 5",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "dEBlc",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "Wsq0e",
"name": "Value",
"fill": "$sf-text",
"content": "usg_01JB8YP9C2HN",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "VMQcE",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "Qakdt",
"name": "Value",
"fill": "$sf-text",
"content": "call_seconds",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "S5FUzw",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "LprUI",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_001",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "J3Vah",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "fBAbr",
"name": "Value",
"fill": "$sf-text",
"content": "62",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "J9wig",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "FHW43",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-31 23:40:22",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "b1d0qH",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "U2A9J",
"name": "Value",
"fill": "$sf-text-muted",
"content": "accepted",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "UyBA8",
"name": "Row 6",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "H50DiH",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "PqvBe",
"name": "Value",
"fill": "$sf-text",
"content": "usg_01JB8YP9C2HP",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "oUGUR",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "tAqD9",
"name": "Value",
"fill": "$sf-text",
"content": "ai_llm_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "LxbjQ",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "UIQNM",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_001",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ueSOn",
"name": "Cell",
"width": 80,
"children": [
{
"type": "text",
"id": "r6Blh",
"name": "Value",
"fill": "$sf-text",
"content": "2",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "N8wuH9",
"name": "Cell",
"width": 190,
"children": [
{
"type": "text",
"id": "Q2GFg5",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-31 23:40:22",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "oL89H",
"name": "Cell",
"width": 100,
"children": [
{
"type": "text",
"id": "WEoFb",
"name": "Value",
"fill": "$sf-text-muted",
"content": "accepted",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "qrZUe",
"name": "Rejected note",
"width": "fill_container",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"gap": 8,
"padding": 12,
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "HVJ5I",
"name": "Icon",
"width": 14,
"height": 14,
"icon": "triangle-alert",
"library": "lucide",
"fill": "$sf-danger"
},
{
"type": "text",
"id": "o3PYr",
"name": "Text",
"fill": "$sf-text-muted",
"content": "usg_01JB8YQ0F5WD rejected: no customer cus_fake_002. Sent v1.billing.meter.error_report_triggered.",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "XBQbo",
"x": 3040,
"y": 0,
"name": "Stripe fake / Credit grants",
"theme": {
"mode": "light"
},
"clip": true,
"width": 1440,
"height": 1024,
"fill": "$sf-bg",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "m1FGt",
"name": "Top bar",
"width": "fill_container",
"height": 56,
"fill": "$sf-surface",
"stroke": "$sf-border",
"strokeWidth": {
"bottom": 1
},
"gap": 16,
"padding": [
0,
20
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "ukiyN",
"name": "Brand",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "Bleyt",
"name": "Mark",
"width": 24,
"height": 24,
"fill": "$sf-accent",
"cornerRadius": 6,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "tzhrl",
"name": "Mark icon",
"width": 14,
"height": 14,
"icon": "flask-conical",
"library": "lucide",
"fill": "$sf-on-accent"
}
]
},
{
"type": "frame",
"id": "a4GHn",
"name": "Wordmark",
"gap": 5,
"alignItems": "end",
"children": [
{
"type": "text",
"id": "cMNGz",
"name": "stripe",
"fill": "$sf-text",
"content": "stripe",
"fontFamily": "$sf-font",
"fontSize": 18,
"fontWeight": "800",
"letterSpacing": -0.6
},
{
"type": "text",
"id": "t7aa5",
"name": "fake",
"fill": "$sf-accent",
"content": "fake",
"fontFamily": "$sf-font",
"fontSize": 18,
"fontWeight": "500",
"letterSpacing": -0.4
}
]
},
{
"type": "text",
"id": "c4bZcq",
"name": "Host",
"fill": "$sf-text-muted",
"content": "localhost:12111",
"fontFamily": "$sf-font-mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "zZfcI",
"name": "Spacer",
"width": "fill_container",
"height": 1
},
{
"type": "frame",
"id": "Lbefs",
"name": "Theme switch",
"cornerRadius": 7,
"stroke": "$sf-border",
"strokeWidth": 1,
"gap": 2,
"padding": 2,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "R2f7t",
"name": "Light",
"width": 28,
"height": 24,
"fill": "$sf-muted",
"cornerRadius": 5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "l6SwSC",
"name": "Light icon",
"width": 14,
"height": 14,
"icon": "sun",
"library": "lucide",
"fill": "$sf-accent"
}
]
},
{
"type": "frame",
"id": "I50cH",
"name": "Dark",
"width": 28,
"height": 24,
"cornerRadius": 5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "klSqU",
"name": "Dark icon",
"width": 14,
"height": 14,
"icon": "moon",
"library": "lucide",
"fill": "$sf-text-muted"
}
]
}
]
},
{
"type": "frame",
"id": "febpf",
"name": "Test clock",
"cornerRadius": 6,
"stroke": "$sf-border",
"strokeWidth": 1,
"gap": 8,
"padding": [
6,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "X2uwR",
"name": "Clock icon",
"width": 14,
"height": 14,
"icon": "timer",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "Pc7Lc",
"name": "Test clock: 2026-11-01",
"fill": "$sf-text",
"content": "Test clock: 2026-11-01",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "EQeVp",
"name": "Advance button",
"fill": "$sf-accent",
"cornerRadius": 6,
"gap": 8,
"padding": [
8,
14
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "Y5GxF",
"name": "Icon",
"width": 14,
"height": 14,
"icon": "fast-forward",
"library": "lucide",
"fill": "$sf-on-accent"
},
{
"type": "text",
"id": "exTIt",
"name": "Advance 1 month",
"fill": "$sf-on-accent",
"content": "Advance 1 month",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "JpeSl",
"name": "Body",
"width": "fill_container",
"height": "fill_container",
"children": [
{
"type": "frame",
"id": "Z37EsM",
"name": "Nav",
"width": 220,
"height": "fill_container",
"fill": "$sf-surface",
"stroke": "$sf-border",
"strokeWidth": {
"right": 1
},
"layout": "vertical",
"gap": 2,
"padding": 12,
"children": [
{
"type": "frame",
"id": "ZTXmJ",
"name": "Nav · Customers",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "YoiAA",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "users",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "PXVda",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Customers",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "vLNJH",
"name": "Nav · Meters",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "h6pSsi",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "gauge",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "a1Ylx",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Meters",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "HyTvf",
"name": "Nav · Credit grants",
"width": "fill_container",
"fill": "$sf-muted",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "wACM3",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "coins",
"library": "lucide",
"fill": "$sf-text"
},
{
"type": "text",
"id": "uViiC",
"name": "Label",
"fill": "$sf-text",
"content": "Credit grants",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "yWdgO",
"name": "Nav · Invoices",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "I9o6Z",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "receipt",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "ODtLr",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Invoices",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "UzPZ7",
"name": "Nav · Webhooks",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "HXzbt",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "webhook",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "Ftg9x",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Webhooks",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "orTbP",
"name": "Nav spacer",
"width": "fill_container",
"height": "fill_container"
},
{
"type": "frame",
"id": "PbOTK",
"name": "Control",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"layout": "vertical",
"gap": 2,
"padding": [
10,
0,
0,
0
],
"children": [
{
"type": "frame",
"id": "x8Dwf",
"name": "Control title wrap",
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "OCED7",
"name": "Control title",
"fill": "$sf-text-muted",
"content": "CONTROL",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal",
"letterSpacing": 1
}
]
},
{
"type": "frame",
"id": "GsVuI",
"name": "Nav · Fail next payment",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "sFEv9",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "circle-x",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "hheMc",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Fail next payment",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "cqBIN",
"name": "Nav · Reset state",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "Twyfz",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "rotate-ccw",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "mw2Ps",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Reset state",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "y8lLA",
"name": "Content",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"gap": 24,
"padding": [
24,
32
],
"children": [
{
"type": "frame",
"id": "N1WsC",
"name": "Header",
"width": "fill_container",
"gap": 16,
"alignItems": "end",
"children": [
{
"type": "frame",
"id": "q21C7",
"name": "Title",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "text",
"id": "bq3Lu",
"name": "Title",
"fill": "$sf-text",
"content": "Credit grants",
"fontFamily": "$sf-font",
"fontSize": 22,
"fontWeight": "600"
},
{
"type": "text",
"id": "g04ZH",
"name": "Sub",
"fill": "$sf-text-muted",
"content": "cus_fake_001 · 1 credit = $0.01 · grants apply to metered prices only",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "wdLQS",
"name": "Grants table",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "frame",
"id": "dvaBc",
"name": "Table",
"clip": true,
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "EuaTz",
"name": "Header row",
"width": "fill_container",
"fill": "$sf-muted",
"stroke": "$sf-border",
"gap": 16,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "ALYi0",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "uOdIh",
"name": "Value",
"fill": "$sf-text-muted",
"content": "ID",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "u8QfTm",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "cVlD2",
"name": "Value",
"fill": "$sf-text-muted",
"content": "CATEGORY",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "bv9EL",
"name": "Cell",
"width": 180,
"children": [
{
"type": "text",
"id": "D97Bd",
"name": "Value",
"fill": "$sf-text-muted",
"content": "AMOUNT",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "fDo5w",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "bL5Iz",
"name": "Value",
"fill": "$sf-text-muted",
"content": "APPLIES TO",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "GtpQw",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "zJOGq",
"name": "Value",
"fill": "$sf-text-muted",
"content": "EFFECTIVE",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Uib8m",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "hXScI",
"name": "Value",
"fill": "$sf-text-muted",
"content": "EXPIRES",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "TYsrY",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "FNRkM",
"name": "Value",
"fill": "$sf-text-muted",
"content": "REMAINING",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "FrBPB",
"name": "Row 1",
"width": "fill_container",
"stroke": "$sf-border",
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "VOzhq",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "S8IHU6",
"name": "Value",
"fill": "$sf-text",
"content": "credgr_fake_0007",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "qL3HF",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "poEOe",
"name": "Value",
"fill": "$sf-text",
"content": "paid",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Z7kE0u",
"name": "Cell",
"width": 180,
"children": [
{
"type": "text",
"id": "hx3Nt",
"name": "Value",
"fill": "$sf-text",
"content": "2,500 cr · $25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "gu4zS",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "Q3dfM",
"name": "Value",
"fill": "$sf-text-muted",
"content": "metered prices",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "O6vbO",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "iD7Nm",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-01",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "TraLq",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "jmuDc",
"name": "Value",
"fill": "$sf-text",
"content": "2026-11-01",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "dcJ6n",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "MoHWm",
"name": "Value",
"fill": "$sf-text",
"content": "1,240",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "JZ44l",
"name": "Row 2",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "O4c6dI",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "f3lOYv",
"name": "Value",
"fill": "$sf-text",
"content": "credgr_fake_0006",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "oKHD3",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "u7hwN3",
"name": "Value",
"fill": "$sf-text",
"content": "paid",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "YXlX2",
"name": "Cell",
"width": 180,
"children": [
{
"type": "text",
"id": "X1SQVl",
"name": "Value",
"fill": "$sf-text",
"content": "1,000 cr · $10.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "eoOOt",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "pWhyC",
"name": "Value",
"fill": "$sf-text-muted",
"content": "metered prices",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Z0piIp",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "K828t1",
"name": "Value",
"fill": "$sf-text",
"content": "2026-09-14",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "sx7sp",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "VsYee",
"name": "Value",
"fill": "$sf-text",
"content": "2027-09-14",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "O1WUF",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "Z7VUH3",
"name": "Value",
"fill": "$sf-text",
"content": "600",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "pgcZo",
"name": "Row 3",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "uNYMv",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "GOoKK",
"name": "Value",
"fill": "$sf-text",
"content": "credgr_fake_0005",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "dRVLE",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "KMVIH",
"name": "Value",
"fill": "$sf-text",
"content": "promotional",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "YsygP",
"name": "Cell",
"width": 180,
"children": [
{
"type": "text",
"id": "x1O03",
"name": "Value",
"fill": "$sf-text",
"content": "500 cr · $5.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "hLKez",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "yGnQ6",
"name": "Value",
"fill": "$sf-text-muted",
"content": "metered prices",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "foatO",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "Gbt6a",
"name": "Value",
"fill": "$sf-text",
"content": "2026-09-01",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "d81F3",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "yQHsl",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-01",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "GxwJj",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "Cel7t",
"name": "Value",
"fill": "$sf-text-muted",
"content": "0 · expired",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "L9Z8pk",
"name": "Row 4",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "R38dEK",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "U4ocS",
"name": "Value",
"fill": "$sf-text",
"content": "credgr_fake_0004",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "W9D5Q",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "LdVB2",
"name": "Value",
"fill": "$sf-text",
"content": "paid",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Y0ghcW",
"name": "Cell",
"width": 180,
"children": [
{
"type": "text",
"id": "Mq5D2",
"name": "Value",
"fill": "$sf-text",
"content": "2,500 cr · $25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "eufmt",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "T3iJko",
"name": "Value",
"fill": "$sf-text-muted",
"content": "metered prices",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "K1HI2",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "vn1de",
"name": "Value",
"fill": "$sf-text",
"content": "2026-09-01",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Uv5fE",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "W9aCng",
"name": "Value",
"fill": "$sf-text",
"content": "2026-10-01",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Q4kzw",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "n68plQ",
"name": "Value",
"fill": "$sf-text-muted",
"content": "0 · expired",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "cZTrD",
"name": "Rules",
"width": "fill_container",
"layout": "vertical",
"gap": 10,
"children": [
{
"type": "text",
"id": "bFMUC",
"name": "Title",
"fill": "$sf-text",
"content": "How the fake applies grants",
"fontFamily": "$sf-font",
"fontSize": 15,
"fontWeight": "600"
},
{
"type": "frame",
"id": "DKZNH",
"name": "List",
"width": "fill_container",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 6,
"padding": 16,
"children": [
{
"type": "frame",
"id": "KKPDh",
"name": "Rule",
"width": "fill_container",
"gap": 8,
"children": [
{
"type": "text",
"id": "HVa4q",
"name": "Dash",
"fill": "$sf-text-muted",
"content": "–",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "text",
"id": "rKPeM",
"name": "Text",
"fill": "$sf-text",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Plan credits (2,500 per $25 period) are used first and expire at period end.",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "P0ZXqz",
"name": "Rule",
"width": "fill_container",
"gap": 8,
"children": [
{
"type": "text",
"id": "SaIVo",
"name": "Dash",
"fill": "$sf-text-muted",
"content": "–",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "text",
"id": "XW1Iu",
"name": "Text",
"fill": "$sf-text",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Top-up credits are used next and last 12 months.",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "nE6O1",
"name": "Rule",
"width": "fill_container",
"gap": 8,
"children": [
{
"type": "text",
"id": "EFEjy",
"name": "Dash",
"fill": "$sf-text-muted",
"content": "–",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
},
{
"type": "text",
"id": "jgN6C",
"name": "Text",
"fill": "$sf-text",
"textGrowth": "fixed-width",
"width": "fill_container",
"content": "Each grant sends billing.credit_grant.created; each use sends billing.credit_balance_transaction.created.",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "lKxHv",
"x": 4560,
"y": 0,
"name": "Stripe fake / Invoices",
"theme": {
"mode": "light"
},
"clip": true,
"width": 1440,
"height": 1024,
"fill": "$sf-bg",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "HWYIg",
"name": "Top bar",
"width": "fill_container",
"height": 56,
"fill": "$sf-surface",
"stroke": "$sf-border",
"strokeWidth": {
"bottom": 1
},
"gap": 16,
"padding": [
0,
20
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "phdAU",
"name": "Brand",
"gap": 10,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "X0SbL",
"name": "Mark",
"width": 24,
"height": 24,
"fill": "$sf-accent",
"cornerRadius": 6,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "vyFJ7",
"name": "Mark icon",
"width": 14,
"height": 14,
"icon": "flask-conical",
"library": "lucide",
"fill": "$sf-on-accent"
}
]
},
{
"type": "frame",
"id": "tmTJN",
"name": "Wordmark",
"gap": 5,
"alignItems": "end",
"children": [
{
"type": "text",
"id": "jZMcg",
"name": "stripe",
"fill": "$sf-text",
"content": "stripe",
"fontFamily": "$sf-font",
"fontSize": 18,
"fontWeight": "800",
"letterSpacing": -0.6
},
{
"type": "text",
"id": "nCdgo",
"name": "fake",
"fill": "$sf-accent",
"content": "fake",
"fontFamily": "$sf-font",
"fontSize": 18,
"fontWeight": "500",
"letterSpacing": -0.4
}
]
},
{
"type": "text",
"id": "qSX1s",
"name": "Host",
"fill": "$sf-text-muted",
"content": "localhost:12111",
"fontFamily": "$sf-font-mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ov0ch",
"name": "Spacer",
"width": "fill_container",
"height": 1
},
{
"type": "frame",
"id": "cBFlK",
"name": "Theme switch",
"cornerRadius": 7,
"stroke": "$sf-border",
"strokeWidth": 1,
"gap": 2,
"padding": 2,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "wOMGK",
"name": "Light",
"width": 28,
"height": 24,
"fill": "$sf-muted",
"cornerRadius": 5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "iFtXW",
"name": "Light icon",
"width": 14,
"height": 14,
"icon": "sun",
"library": "lucide",
"fill": "$sf-accent"
}
]
},
{
"type": "frame",
"id": "cepwp",
"name": "Dark",
"width": 28,
"height": 24,
"cornerRadius": 5,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "nWurN",
"name": "Dark icon",
"width": 14,
"height": 14,
"icon": "moon",
"library": "lucide",
"fill": "$sf-text-muted"
}
]
}
]
},
{
"type": "frame",
"id": "fFVw6",
"name": "Test clock",
"cornerRadius": 6,
"stroke": "$sf-border",
"strokeWidth": 1,
"gap": 8,
"padding": [
6,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "desqL",
"name": "Clock icon",
"width": 14,
"height": 14,
"icon": "timer",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "oL2Vw",
"name": "Test clock: 2026-11-01",
"fill": "$sf-text",
"content": "Test clock: 2026-11-01",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Cy2fI",
"name": "Advance button",
"fill": "$sf-accent",
"cornerRadius": 6,
"gap": 8,
"padding": [
8,
14
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "U82xK",
"name": "Icon",
"width": 14,
"height": 14,
"icon": "fast-forward",
"library": "lucide",
"fill": "$sf-on-accent"
},
{
"type": "text",
"id": "FxigW",
"name": "Advance 1 month",
"fill": "$sf-on-accent",
"content": "Advance 1 month",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "600"
}
]
}
]
},
{
"type": "frame",
"id": "mceob",
"name": "Body",
"width": "fill_container",
"height": "fill_container",
"children": [
{
"type": "frame",
"id": "L8pG7L",
"name": "Nav",
"width": 220,
"height": "fill_container",
"fill": "$sf-surface",
"stroke": "$sf-border",
"strokeWidth": {
"right": 1
},
"layout": "vertical",
"gap": 2,
"padding": 12,
"children": [
{
"type": "frame",
"id": "nzSdx",
"name": "Nav · Customers",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "LM1WT",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "users",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "F59ZWs",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Customers",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "q44vf",
"name": "Nav · Meters",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "wkJNi",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "gauge",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "UruTe",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Meters",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "nHVxy",
"name": "Nav · Credit grants",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "ZIxYl",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "coins",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "NfnBk",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Credit grants",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "WW4kF",
"name": "Nav · Invoices",
"width": "fill_container",
"fill": "$sf-muted",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "YECIp",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "receipt",
"library": "lucide",
"fill": "$sf-text"
},
{
"type": "text",
"id": "SJuXL",
"name": "Label",
"fill": "$sf-text",
"content": "Invoices",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "sbgDA",
"name": "Nav · Webhooks",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "YkqG2",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "webhook",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "UzwRO",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Webhooks",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "buh7r",
"name": "Nav spacer",
"width": "fill_container",
"height": "fill_container"
},
{
"type": "frame",
"id": "CdXn1",
"name": "Control",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"layout": "vertical",
"gap": 2,
"padding": [
10,
0,
0,
0
],
"children": [
{
"type": "frame",
"id": "EpaRd",
"name": "Control title wrap",
"padding": [
4,
10
],
"children": [
{
"type": "text",
"id": "ENdYO",
"name": "Control title",
"fill": "$sf-text-muted",
"content": "CONTROL",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal",
"letterSpacing": 1
}
]
},
{
"type": "frame",
"id": "GkuMz",
"name": "Nav · Fail next payment",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "qPoa9",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "circle-x",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "zYqpN",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Fail next payment",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "fvbnK",
"name": "Nav · Reset state",
"width": "fill_container",
"fill": "#00000000",
"cornerRadius": 6,
"gap": 10,
"padding": [
8,
10
],
"alignItems": "center",
"children": [
{
"type": "icon",
"id": "MObCd",
"name": "Icon",
"width": 15,
"height": 15,
"icon": "rotate-ccw",
"library": "lucide",
"fill": "$sf-text-muted"
},
{
"type": "text",
"id": "LaUzR",
"name": "Label",
"fill": "$sf-text-muted",
"content": "Reset state",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "QAZQO",
"name": "Content",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"gap": 24,
"padding": [
24,
32
],
"children": [
{
"type": "frame",
"id": "R1j0eZ",
"name": "Header",
"width": "fill_container",
"layout": "vertical",
"gap": 6,
"children": [
{
"type": "text",
"id": "F8wt1a",
"name": "Title",
"fill": "$sf-text",
"content": "Invoices",
"fontFamily": "$sf-font",
"fontSize": 22,
"fontWeight": "600"
},
{
"type": "text",
"id": "dfyu0",
"name": "Sub",
"fill": "$sf-text-muted",
"content": "One invoice per customer per period. Advance the clock to close the current one.",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "S2Ktl",
"name": "Invoice list",
"clip": true,
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "lr6ja",
"name": "Header row",
"width": "fill_container",
"fill": "$sf-muted",
"stroke": "$sf-border",
"gap": 16,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "X3qY6",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "qA3YY",
"name": "Value",
"fill": "$sf-text-muted",
"content": "NUMBER",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "cfjMO",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "LaXS2",
"name": "Value",
"fill": "$sf-text-muted",
"content": "CUSTOMER",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Enjz2",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "JOjdY",
"name": "Value",
"fill": "$sf-text-muted",
"content": "PERIOD",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "MNRsm",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "HmlJ9",
"name": "Value",
"fill": "$sf-text-muted",
"content": "STATUS",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "pqT8e",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "hKWQC",
"name": "Value",
"fill": "$sf-text-muted",
"content": "PLAN",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "wU8Mn",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "PoYbD",
"name": "Value",
"fill": "$sf-text-muted",
"content": "USAGE LINES",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Eq5t4",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "Y6Qun",
"name": "Value",
"fill": "$sf-text-muted",
"content": "CREDITS APPLIED",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "sEUhZ",
"name": "Cell",
"width": 90,
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "YGK4y",
"name": "Value",
"fill": "$sf-text-muted",
"content": "TOTAL",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "rZl4z",
"name": "Row 1",
"width": "fill_container",
"fill": "$sf-muted",
"stroke": "$sf-border",
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "rcsPM",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "DHbdk",
"name": "Value",
"fill": "$sf-text",
"content": "FAKE-0005",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "mr8Di",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "JqCBq",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_001",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "bybbZ",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "CFMFv",
"name": "Value",
"fill": "$sf-text",
"content": "Oct 1 – Nov 1",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "wTTLH",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "JBp6K",
"name": "Value",
"fill": "$sf-text-muted",
"content": "draft",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "V9AgWS",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "oPm1a",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "U7Jlt",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "bCThd",
"name": "Value",
"fill": "$sf-text",
"content": "4 · $12.60",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "mPmxq",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "f6zJS",
"name": "Value",
"fill": "$sf-text",
"content": "−$12.60",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "A4zVA",
"name": "Cell",
"width": 90,
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "f6nhY",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "Uv1cC",
"name": "Row 2",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "YhTtc",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "COGoW",
"name": "Value",
"fill": "$sf-text",
"content": "FAKE-0004",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "DzcVU",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "nQIVP",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_002",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "HA8zY",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "P0VMzE",
"name": "Value",
"fill": "$sf-text",
"content": "Oct 1 – Nov 1",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "U9gUH",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "hLL8P",
"name": "Value",
"fill": "$sf-danger",
"content": "payment_failed",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "eqIKy",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "h2zHOU",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "aMWYa",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "RshBb",
"name": "Value",
"fill": "$sf-text",
"content": "2 · $3.10",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "JvVEh",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "SfcAa",
"name": "Value",
"fill": "$sf-text",
"content": "−$3.10",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "HGSBQ",
"name": "Cell",
"width": 90,
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "PC1cF",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "nYKT4",
"name": "Row 3",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "r5d9tI",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "SytEY",
"name": "Value",
"fill": "$sf-text",
"content": "FAKE-0003",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "nQZAb",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "HuiMO",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_002",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "MXZOw",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "F6aTV",
"name": "Value",
"fill": "$sf-text",
"content": "Sep 1 – Oct 1",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "nUioS",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "d1QWK",
"name": "Value",
"fill": "$sf-text-muted",
"content": "open",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "k8gkV",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "f3e8x",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ofPlF",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "SYwmk",
"name": "Value",
"fill": "$sf-text",
"content": "3 · $8.45",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "eIvh9",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "e6fkb5",
"name": "Value",
"fill": "$sf-text",
"content": "−$8.45",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "HnJn9",
"name": "Cell",
"width": 90,
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "v29wG",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "Y4r19K",
"name": "Row 4",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "aN88P",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "JqzMC",
"name": "Value",
"fill": "$sf-text",
"content": "FAKE-0002",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "wZjMy",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "xK1J9",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_001",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "OKnW9",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "nAL7C",
"name": "Value",
"fill": "$sf-text",
"content": "Sep 1 – Oct 1",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "WGHq4",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "c4OxEa",
"name": "Value",
"fill": "$sf-text-muted",
"content": "paid",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "porjr",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "FAgn2",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "oqShD",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "pf3UC",
"name": "Value",
"fill": "$sf-text",
"content": "4 · $27.30",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "JNqnV",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "c2Vei",
"name": "Value",
"fill": "$sf-text",
"content": "−$27.30",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "gPmYF",
"name": "Cell",
"width": 90,
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "MX4Zv",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "p4Qtvc",
"name": "Row 5",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "gPLiC",
"name": "Cell",
"width": 110,
"children": [
{
"type": "text",
"id": "cHXJj",
"name": "Value",
"fill": "$sf-text",
"content": "FAKE-0001",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "bnV86",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "H84CL",
"name": "Value",
"fill": "$sf-text",
"content": "cus_fake_001",
"fontFamily": "$sf-font-mono",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "W9XEp",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "W0fYB",
"name": "Value",
"fill": "$sf-text",
"content": "Aug 1 – Sep 1",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Sqboh",
"name": "Cell",
"width": 140,
"children": [
{
"type": "text",
"id": "LiSoV",
"name": "Value",
"fill": "$sf-text-muted",
"content": "paid",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "AaZIU",
"name": "Cell",
"width": 90,
"children": [
{
"type": "text",
"id": "Iy7g4",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "QJPs0",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "ZFM0o",
"name": "Value",
"fill": "$sf-text",
"content": "4 · $19.85",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "wNLdE",
"name": "Cell",
"width": 130,
"children": [
{
"type": "text",
"id": "V7DcZ",
"name": "Value",
"fill": "$sf-text",
"content": "−$19.85",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "SI5P1",
"name": "Cell",
"width": 90,
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "H32ABj",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "CCfEf",
"name": "Invoice detail",
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"gap": 14,
"padding": 20,
"children": [
{
"type": "frame",
"id": "yp5NB",
"name": "Detail header",
"width": "fill_container",
"gap": 12,
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "ndplV",
"name": "Title",
"width": "fill_container",
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "HfYN9",
"name": "Number",
"fill": "$sf-text",
"content": "FAKE-0005 · in_fake_0005",
"fontFamily": "$sf-font",
"fontSize": 16,
"fontWeight": "600"
},
{
"type": "text",
"id": "m1RQKs",
"name": "Meta",
"fill": "$sf-text-muted",
"content": "cus_fake_001 · period 2026-10-01 → 2026-11-01 · status draft",
"fontFamily": "$sf-font-mono",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "Jgf6c",
"name": "Finalize button",
"cornerRadius": 6,
"stroke": "$sf-border",
"strokeWidth": 1,
"padding": [
7,
12
],
"children": [
{
"type": "text",
"id": "UGEu3",
"name": "Label",
"fill": "$sf-text",
"content": "Finalize",
"fontFamily": "$sf-font",
"fontSize": 12,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "ou0w7",
"name": "Line items",
"clip": true,
"width": "fill_container",
"fill": "$sf-surface",
"cornerRadius": 8,
"stroke": "$sf-border",
"strokeWidth": 1,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "xgoQW",
"name": "Header row",
"width": "fill_container",
"fill": "$sf-muted",
"stroke": "$sf-border",
"gap": 16,
"padding": [
8,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "FjcEv",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "Zn1SL",
"name": "Value",
"fill": "$sf-text-muted",
"content": "LINE",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "g7unB",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "yAoyY",
"name": "Value",
"fill": "$sf-text-muted",
"content": "QUANTITY",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "GxO4Y",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "G5YJB",
"name": "Value",
"fill": "$sf-text-muted",
"content": "UNIT",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "YNlrz",
"name": "Cell",
"width": 110,
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "K94qu",
"name": "Value",
"fill": "$sf-text-muted",
"content": "AMOUNT",
"fontFamily": "$sf-font",
"fontSize": 11,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "VjQ17",
"name": "Row 1",
"width": "fill_container",
"stroke": "$sf-border",
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "mjm3L",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "V4rEOO",
"name": "Value",
"fill": "$sf-text",
"content": "Pay-as-you-go plan",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "t1U4R",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "We0pR",
"name": "Value",
"fill": "$sf-text",
"content": "1",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "kPjfO",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "smMjj",
"name": "Value",
"fill": "$sf-text",
"content": "month",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "PQtCT",
"name": "Cell",
"width": 110,
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "y0ltEQ",
"name": "Value",
"fill": "$sf-text",
"content": "$25.00",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "K0cri",
"name": "Row 2",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "mx9Wi",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "bggWz",
"name": "Value",
"fill": "$sf-text",
"content": "call_seconds",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "E0XN7",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "K4HZT",
"name": "Value",
"fill": "$sf-text",
"content": "9,480",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "v0g5r",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "v7Vkbi",
"name": "Value",
"fill": "$sf-text",
"content": "seconds",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "P29Q7V",
"name": "Cell",
"width": 110,
"justifyContent": "end",
"children": [
{
"type": "text",
"id": "Y2O9l",
"name": "Value",
"fill": "$sf-text",
"content": "$5.60",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
}
]
},
{
"type": "frame",
"id": "G6Uas",
"name": "Row 3",
"width": "fill_container",
"stroke": "$sf-border",
"strokeWidth": {
"top": 1
},
"gap": 16,
"padding": [
10,
16
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "HyxrJ",
"name": "Cell",
"width": "fill_container",
"children": [
{
"type": "text",
"id": "c9pek",
"name": "Value",
"fill": "$sf-text",
"content": "ai_llm_cents",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "ZTMNd",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "FNc2i",
"name": "Value",
"fill": "$sf-text",
"content": "412",
"fontFamily": "$sf-font",
"fontSize": 13,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "KNOvj",
"name": "Cell",
"width": 120,
"children": [
{
"type": "text",
"id": "R7d3bM",
"name": "Value",
"fill": "$sf-text",
"content": "cents",
"fontFamily": "$sf-font",