A brand identity, a design system, and a working multi-tenant B2B SaaS platform — built from a functional spec that admitted it had no signature. Sixteen views, a real permissions engine, and paywalls that actually gate. You can sign in and use it on this page.
A design and functional prototype on mock data — not a production system.
The real prototype, not a recording. It opens on the sign-in screen — the fields are pre-filled, any password and any 6-digit code will do. Runs entirely in your browser.The real prototype runs in your browser, but it needs a wider screen than this to be usable in-page.
Open the demo ↗Most portfolio prototypes are a slideshow wearing a device frame. This one you can sign into — so the case for it is the thing itself, running above.
Launch it and you land on Meridian's sign-in screen. The fields are pre-filled; any password and any six digits get you through. From there it behaves like a product, not a walkthrough: edit a record's status inline, drag cards between columns on the Board, press ⌘K to jump anywhere or start the guided tour.
The parts that usually get faked are the parts I was most interested in building. Flip the organisation's lifecycle state in Billing and watch the paywalls and dunning banners engage. Impersonate a user in the Admin console, then open the Audit log and find the action already recorded against your name. Your changes persist across a refresh, because there's a real store underneath.
Three surfaces are reachable from the tabs in the window chrome: the App itself, the Design system it's built from, and the Build plan that sequenced it.
Meridian started from a 20,000-word functional specification for a B2B SaaS work platform — the genre of document that defines every state and permission a system needs and, in the same breath, concedes what it can't supply. This one said so outright: the design system it described had no signature. Correct, accessible, and indistinguishable from every competitor in its category.
Correct, accessible, and indistinguishable from every competitor.
That gap is the whole project. A spec can enumerate requirements; it can't decide what a product should feel like, and it can't prove the requirements hold together until something is actually built. So I did both — invented an identity for it, then built the platform out module by module until it ran.
A meridian is the line the sun crosses at its highest point: the moment of peak clarity. That single image does all the work. The mark is an arc, a meridian line, and a zenith orb — a hemisphere brought to its brightest. The palette runs the whole arc of a day, warm dawn through cool dusk, where the category defaults to corporate blue.
Six colours, six named gradients, and a deliberate constraint: colour is never the sole carrier of meaning, so every semantic role ships paired with an icon or a label. Type is rounded and warm on purpose — Gabarito gives the brand its voice, Figtree keeps dense data screens legible at small sizes. Nothing about it is neutral, which was the point.
The prototype is a single HTML file with no framework and no server, which meant every system in it had to be built rather than imported.
A permissions engine gates every action against the current member's role, so a Guest's interface is genuinely different rather than cosmetically dimmed. An entitlements engine enforces plan limits, and a lifecycle state machine moves an org between trial, active, past due, restricted and cancelled — with the banners, paywalls and read-only states each of those implies. An audit spine records the actions worth recording. The command palette is a real router. State is optimistic and undoable, and it persists to your browser.
Praduan Saha