s1-glance-kpi
smallGolden S1 — Glance KPI
Instagram-style gradient + username + two stacked KPI metrics + brand icon footer.
Adapt when: Social/account KPIs, branded small metrics
Live preview
small · 170×170 pt · same renderer as the web console layout editor
Layout file JSON
Matches packages/sdk/goldens/{id}.json — paste the tree into the Glance layout editor or give this file to your coding agent.
{
"name": "Golden S1 — Glance KPI",
"widgetSize": "small",
"description": "Instagram-style gradient + username + two stacked KPI metrics + brand icon footer.",
"tree": {
"id": "root",
"type": "gradient",
"style": {
"type": "linear",
"startColor": "#833AB4",
"endColor": "#F77737",
"angle": 135,
"padding": 12
},
"children": [
{
"id": "main",
"type": "container",
"layout": "vertical",
"style": {
"spacing": 2,
"alignment": "leading"
},
"children": [
{
"id": "username",
"type": "text",
"binding": "{{username}}",
"style": {
"fontSize": 12,
"fontWeight": "semibold",
"color": "#FFFFFF",
"maxLines": 1
}
},
{
"id": "username_gap",
"type": "spacer",
"style": {
"minLength": 3
}
},
{
"id": "metrics_group",
"type": "container",
"layout": "vertical",
"style": {
"spacing": 2
},
"children": [
{
"id": "profile_block",
"type": "container",
"layout": "vertical",
"style": {
"spacing": 2
},
"children": [
{
"id": "profile_caption",
"type": "text",
"binding": "Profile views today",
"style": {
"fontSize": 11,
"fontWeight": "medium",
"color": "#FFE8F5",
"maxLines": 1
}
},
{
"id": "profile_value",
"type": "stat",
"value": "{{profile_views_value}}",
"style": {
"valueFontSize": 25,
"color": "#FFFFFF",
"alignment": "leading"
}
}
]
},
{
"id": "post_block",
"type": "container",
"layout": "vertical",
"style": {
"spacing": 2
},
"children": [
{
"id": "post_caption",
"type": "text",
"binding": "Post views today",
"style": {
"fontSize": 11,
"fontWeight": "medium",
"color": "#FFE8F5",
"maxLines": 1
}
},
{
"id": "post_value",
"type": "stat",
"value": "{{post_views_value}}",
"style": {
"valueFontSize": 25,
"color": "#FFFFFF",
"alignment": "leading"
}
}
]
}
]
},
{
"id": "footer_push",
"type": "spacer",
"style": {
"flex": 1
}
},
{
"id": "footer",
"type": "container",
"layout": "horizontal",
"style": {
"alignment": "trailing"
},
"children": [
{
"id": "footer_spacer",
"type": "spacer",
"style": {
"flex": 1
}
},
{
"id": "brand_icon",
"type": "image",
"binding": "/brand-icons/instagram.png",
"style": {
"width": 18,
"height": 18,
"contentMode": "fit"
}
}
]
}
]
}
]
}
}Sample content JSON
Matches packages/sdk/goldens/{id}-content.json — example values for every dynamic {{binding}} in the layout.
{
"username": "@glance.cool",
"profile_views_value": 57,
"post_views_value": 23
}