Midnight Cinema
We wanted the site to feel like the product. Not a pitch deck — a window into what you actually get.
The entire visual layer was stripped back and rebuilt. Panels now use layered inset shadows instead of flat CSS borders, creating directional light that makes surfaces feel physical. The colour palette was reduced to five grey levels and two accent colours. Every section got more breathing room.
Hero: full app mockup
The hero shows the complete Kian workspace — sidebar, conversation list, and chat detail with reasoning.
Analytics dashboard
Metric cards with sparklines, a bezier area chart with hover tooltip, and topic breakdowns.
Four clickable metric cards drive a smooth area chart that compares this week to last. Bottom row shows trending customer topics and recent AI resolutions. No sidebar — the dashboard takes the full panel width.
Panel architecture
Every panel uses multi-layer inset shadows for directional lighting. No CSS borders.
Top edges are brighter, bottom edges recede. Floating content panels sit inside darker shells with graduated border wrappers. Rounded corners stay clean because shadows don't break at radius boundaries the way borders do.
Monochrome palette
Five distinct grey levels. Two accent colours. Everything else removed.
Shell #0d0d10, panel #131316, card #1a1a1e, hover #222226. All coloured gradients, rainbow status indicators, and pulsing animations were stripped out. The site now uses white-based lighting only.