Kratin Bhardwaj
Product designer shipping production TypeScript. Everything on this page is either running here or public on GitHub.
Building in the open
Data-intensive command dashboard: virtualized 10,000 row table, live updating feed, keyboard-first navigation, built on kaikit.
IN PROGRESSTokens the front-end can consume
3 systems, shown as the code sees them: custom properties, component counts, and accessibility coverage. The stories and outcomes live in the case studies.
The editorial system as the front-end consumes it: 4 brand tokens, 3 type roles, and 40+ components behind 1 consistent API, so editors compose pages the code already knows how to render.
:root {
--frcc-navy: #243269; /* structure, nav, headers */
--frcc-gold: #F2B41C; /* action, focus, accents */
--frcc-paper: #FFFFFF;
--frcc-ink: #141414;
--frcc-head: "Roboto Condensed";
--frcc-body: "Roboto";
--frcc-ui: "DM Sans";
}The component library, demoed live
kaikit is the open source React library from the repositories above. The panel below renders its 3 launch patterns on this page. Try them with a keyboard.
What production-ready means here
1 visible focus ring everywhere, driven by a token. Dialogs trap focus and give it back. Nothing loses your place.
Roving tabindex on tabs, arrow key navigation, Escape where you expect it, semantic HTML underneath it all.
Durations and easing curves live next to color and spacing, and every animation respects prefers-reduced-motion.
Confidence, uncertainty, and review states are designed surfaces, not hidden failures. Learned shipping real AI products.
The 3D cast holds 60 fps on 1 shared WebGL context. Heavy work stays off the render path and off the main thread where possible.
Strict TypeScript, behavior tests with Testing Library, and a green pipeline before anything ships.
Models as front-end material
On the LLM routing platform I designed at FRCC, the front-end renders model certainty against a visible 85 percent gate: cleared requests auto route, uncertain ones open a human review surface, and every correction flows back as labeled data. The business outcomes live in the case study.
Read the case studyKai's typed answers come from a Cloudflare Worker holding a curated knowledge base and the API key server side. If the answer is not in the knowledge base, Kai says so and shares my email. He does not guess.
HE IS IN THE CORNER · ASK HIMProduction work, running here
A dependency-free TypeScript engine on pure CSS and DOM. He persists across page navigation and respects reduced motion.
ON THIS PAGE9 characters modeled, rigged, and animated in Three.js: 60 fps, 0 downloaded assets, 1 shared WebGL context.
See the castCustom code components end to end: navigation chrome, film grain, fluid frames, scroll reveals, 1 visual grammar.
See the design workLanguages and tools
Working alongside: Figma, Framer, Storybook, Cursor, and Claude Code. Design and code are 1 loop here, not a handoff.
Get in touch
Open to senior product design and design engineer roles, especially on AI-native products. Based in Denver, Colorado.
bhardwajkratin18@gmail.com