Playground
Prototyping the new PhilSocial × glass look. Approve a piece and we promote it into the real components.
The production API at a glance.
Latency, ticket flow, release health — everything operators need before they grab a coffee.
9ms
avg latency · last 10 min
Open tickets
42
Urgent
3
KPI tiles
Glass surfaces composed with Box.Header + Heading + Text + Icon
API Health
Healthy
200 · 9ms
Open tickets
42
8 in progress
Urgent open
3
needs attention
Avg resolution
4.2h
12 resolved 7d
Buttons
6 variants × 3 sizes, plus loading state
Inputs
Native inputs over glass — until the Input primitive lands
Inputs remain bespoke for now — Input/Select/Textarea/Checkbox/Switch will join the ui layer in a follow-up PR.
Cards
Box surfaces: solid / glass / bordered / brand
surface="solid"
Default opaque card. Card background + border. The neutral fallback.
surface="glass"
Translucent over the ambient glow. Backdrop blur + soft inner highlight.
surface="bordered"
No fill — just contour. Useful for nested layouts that already sit on a card.
Brand
Subtle warm gradient. Use sparingly — only for moments that deserve the attention.
Badges
Tones, sizes, dot indicator and leading icon
Alerts
Semantic banners (own primitive coming)
Heads up
Token refresh hits Google JWKs on first request. First call may take ~500ms.
Deploy succeeded
backoffice-api v0.3.2 is live in production. All endpoints under 50ms.
Session expiring
Your Google id_token expires in 4 minutes. Save your work.
API unreachable
Cannot reach /healthz. Check the local server.
Color palette
PhilSocial brand scale + semantic
Brand (--brand-50 → --brand-950)
50
100
200
300
400
500
600
700
800
900
950
Semantic
info
success
warning
danger
white/10
white/5
Typography
Heading levels vs visual sizes
Display · Heading size="5xl"
The API at a glance.
Heading size="2xl"
Latest tickets
Body · Text size="md"
Operators triage incoming reports from production. Each ticket carries device telemetry — appVersion, osVersion, deviceModel — giving us a real signal of release health.
Mono · pre
{ "ok": true, "status": 200, "latencyMs": 9 }