Full styling reset to the approved mockup — from scratch, no functional change.
- PALETTE: clean white ground, warm near-black ink, ONE confident magenta-pink
accent (#e5227f) reserved for action and active state. The accent keeps the
--zk-blue-* token names it always had; only the values changed. Teal is the
customer, amber a person; pink is "act / here", nothing else. Neutrals warmed,
shadows softened to a plum-ink low alpha.
- TYPE: Plus Jakarta Sans — geometric-humanist, bold on headings (page title
800, panel titles and figures 700+), the modern-product register assured has.
- SHAPE: the flat single-canvas is gone; back to clean rounded cards that float
a little on the off-white — panels, metric tiles (money in the accent tint),
the stage rail, the facts rail. Status ribbon in teal, the primary action a
pink pill with an accent glow.
Same components, same data, same behaviour — only the surface.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Zurich Sans (a soft humanist OTF) read poorly at the data-density sizes this
console runs, and did not carry the modern-enterprise register we are after.
The UI moves to Geist — Vercel's typeface, the register of Linear/Vercel-class
tools: neutral, technical, and sharp at small sizes. Refs and figures use Geist
Mono. Zurich Sans stays in the fallback stack, so a blocked CDN degrades to the
brand face rather than to a system default.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The real problem was never the font or the shadows — it was the design LANGUAGE.
Floating white cards on a grey-blue ground is the generic admin-template look,
and no restyle escapes it. This ports the approved mockup: one canvas, sections
set off by hairlines and space, the activity feed as the hero.
- ONE CANVAS. The content ground is white; the sidebar is the only tinted
surface. Panels drop their border, radius and shadow and become plain
sections under their own headings.
- The metric strips (lead + overview) stop being caged tiles and become an
inline stat row between two hairlines — money at display size, the rest
quieter.
- The stage rail loses its card and becomes a slim inline stepper.
- The property rail flattens: Customer / Vehicle / Documents are hairline-
divided groups aligned to the edge, headings at label size — it is
reference, and should not shout over the story.
- "Who holds it" drops from a filled pill to a coloured dot and a line of text.
- Bricolage is gone. Display and body are both Zurich Sans, the brand face;
headings and figures lean on weight and tracking, not a second family. The
palette is the ZK blues throughout.
Same data, same functionality — only the surface. Revertible in one push.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The layout was right but the surface still read as a flat corporate form. Three
levers, all from the approved mockup:
- A DISPLAY FACE (Bricolage Grotesque) on the things the eye lands on — the
lead name, panel headings, and every figure. Zurich Sans stays the body
voice; this gives the numbers and titles the tighter, more current character
the plain grotesque could not. Loaded from Google Fonts with Zurich Sans as
the fallback, so a blocked CDN degrades to the brand face rather than breaking.
- DEPTH. Panels and the metric tiles lift from the barely-there --sh-sm to a
real --sh-md with rounder corners, so cards read as objects on a surface
rather than boxes drawn on paper.
- WHOSE MOVE IT IS. The header said "STAGE / Quote Presented" — a label. It now
carries a coloured pill: "Right now · With the customer" (teal), "With the AI"
(blue), "Waiting on a person" (amber). The stage name is in the rail below;
the pill answers the question an operator actually opens a lead to ask.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The build asserts on <!--BASE_HREF--> and placement fails without it, so
nothing was ever placed and nginx 404'd. The ./config.js tag is the other
half: it carries this environment's VITE_ZINO_API_URL, and without it
requireConfigValue throws and the app renders nothing even once served.
Order matters — the placeholder precedes the favicon href, or that
relative ref resolves against the wrong root once mounted.
Verified by simulating placement locally: filled the placeholder, wrote a
config.js beside the artifact, served it under /zurich-kotak/ and loaded
it. index.html, the JS bundle, config.js and the favicon all 200, the
login renders, and with config.js removed the root stays empty rather
than falling back to some other backend.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The scaffold had the brand right and nothing behind it: the login was a
600ms setTimeout with a TODO, and three pieces of the frontgen deploy
contract were missing.
- Sign in against POST /usr/login (org_id as a STRING — a number is
rejected by the gateway) with the session in a provider; surface the
gateway's own message rather than a generic "invalid credentials",
because a wrong password and a user without access to this app look
identical from here and are not.
- Runtime config: the API URL is read from the config.js the server
writes at placement, never compiled in, and requireConfigValue throws
so a build with no config.js fails loudly instead of calling whichever
backend built it.
- base: './' plus a router basename taken from <base href>, so one build
serves any mount path.
- Move the fonts and logo from public/ into src/assets/ — Vite rewrites
bundled asset URLs to be relative, while a public/ file referenced as
"/fonts/..." stays absolute and 404s under the /zurich-kotak/ mount.
- API client for recordview / detailview / form-screens / start /
activity, and the pipeline shell whose sidebar is the state machine in
the order a lead moves.
Queue and lead-file data wait on the record and detail views.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
