// UI_LAB · 14 WORKING DEMOS
Interfaces you can touch, not screenshots. Every demo below runs in your browser and comes from a real project: payments, design systems, AI operations and product engineering.
Live metrics, an animated chart and a terminal log feed. Switch the range and watch it stream.
Demo values. The real panel reads the studio's agent telemetry.
Three step payment flow with real time validation: Luhn check, card brand, expiry and CVC.
Test card: 4242 4242 4242 4242. Nothing is charged; validation runs in the browser.
Configurable scope and timeline with a dynamic estimate and pace multiplier.
Illustrative estimate built from the module prices shown in the portfolio demo.
Meditation player with a breathing guide in Serenia's own palette, the one exception to Midnight Pro.
Paused
Rendered with Serenia V2 tokens: blueberry night #0D1329, blueberry #6260FF, cream soda #FFD15C.
Paste CSS with loose hex values and get the semantic token each one should use, plus rewritten CSS.
| Found | Token | Δ | |
|---|---|---|---|
| #0b0b10 | --bg-surface | 3 | MATCH |
| #f5f5f9 | --text-primary | 3 | MATCH |
| #16161d | --bg-raised | 6 | MATCH |
| #23d4ef | --accent-default | 3 | MATCH |
| #6ae8f8 | --accent-hover | 5 | MATCH |
| #f77272 | --state-danger | 3 | MATCH |
| #8a8a9d | --text-secondary | 3 | MATCH |
.card {
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--bg-raised);
}
.card a { color: var(--accent-default); }
.card a:hover { color: var(--accent-hover); }
.badge--error { color: var(--state-danger); }
.meta { color: var(--text-secondary); }Replica of the AI assisted build pipeline. Work packages move through tests and implementation; missing components escalate to a human.
Anonymized replica of the Launch Mobility build pipeline. A human checkpoint resolves what the AI cannot.
Live WCAG 2.1 contrast ratio, the check applied before any screen is closed.
Real time fleet visibility, the concept behind the booking flow. Pick a vehicle to follow it.
Automatic brand switching through tokens, the same mechanic as Figma Modes across three brands.
| Semantic token | Resolves to |
|---|---|
| brand-primary | #23325B |
| brand-accent | #387FF7 |
| status/error | #B10015 · shared |
| bg-page | #FBFBFB · shared |
| type | Roboto |
| radius/button | 100px pill |
One property swap, like Figma Modes: only brand tokens move, shared and status tokens never do.
Keyboard navigation with fuzzy search. It really navigates this site.
Works anywhere on this page: press ⌘K or Ctrl+K, type, use ↑ ↓ and Enter.
The 14 payment error states, reproduced per platform. Pick a code and charge.
Codes follow the payment provider's public decline list; production copy stays private. Each state has its own platform pattern.
Serenia's streak logic as a pure function, with milestones at 3, 7 and 14 days. Skip a day and watch it reset.
streak(done, today=1) = 0 // computed server side
A real merge gap found by reading git history instead of trusting the build status.
The build said ready. Reading git history said otherwise. Move the slider to replay how the gap was found.
Switch locale and currency with live Intl formatting for money, dates, lists and relative time.
| Currency | $ 48.200 |
| Compact | 48 M |
| Percent | 19% |
| Date | 7 de septiembre de 2026 |
| Time | 10:00 a. m. |
| Relative | dentro de 3 días |
| List | Figma, React y Flutter |
Live Intl.NumberFormat, DateTimeFormat, RelativeTimeFormat and ListFormat. No i18n library.