Aichor is a platform that lets ML teams build, deploy, and monitor models from a single, unified web interface. I owned the UI layer end to end , designing a scalable, themeable design system and shipping it to production myself in Next.js, Tailwind CSS, and shadcn/ui , so the interface that lived in Figma was the exact interface that shipped, down to the easing curves.
Case Study
Aichor - Building a next Gen AI Platform
Design Engineering
Brand Identity Design
60
2022 - Present
Aichor spans experiments, logs, version control, FinOps, resource and storage management, and multi-tenant admin , each data-dense, each with its own interaction model. The problem was architectural, not visual: every surface had to compose from one token layer and one set of component contracts, so shipping a feature meant assembling primitives instead of designing a new page. The constraint I set up front , no surface gets a one-off style, and accessibility and performance are enforced in the components, not audited per screen.
I built the core flows as working code before polishing anything in Figma, so reviews were about real behavior , timing, focus order, empty and error states , not a static guess.
That turned multi-day feedback loops into single sessions. Tokens were the contract underneath: defined once, consumed identically by design and production, so the two never drifted.
The foundation is a set of HSL design tokens exposed as CSS variables and mapped into the Tailwind theme , color, spacing, radius, and type resolving to one source of truth.
Primitives sit on Radix and are styled with class-variance-authority, which keeps variant logic declarative and typed. Scale decisions happen once at the token level: adjust a spacing step or the radius and every surface inherits it.
The leverage was keeping the variant surface small , size, intent, and state , so two engineers reaching for the same component produce identical output without coordinating. Defaults are correct out of the box, props are typed through cva, and responsive plus keyboard behavior ship with the component. Correct usage became the path of least resistance, which is what made assembly fast.
Components were wired into Next.js with server components fetching data and Suspense driving skeletons, so loading and empty states were designed rather than incidental.
Experiment and log tables are virtualized to stay smooth past thousands of rows, and mutations use optimistic updates to absorb latency. With one person owning design and code, there was no handoff , the interaction I designed is the one that shipped.
Each component ships with usage rules, its variant matrix, and accessibility expectations documented alongside it, so adoption across sixty people didn’t route through me. The bar was reach-for-it confidence: know a component’s props, states, and edge cases before importing it. That’s the difference between a component library and a system a team actually trusts.
Transitions are implemented in Framer Motion and tuned in the browser at 60fps until each one does a job.
A sheet’s spring shows where it came from, a menu’s ease-in keeps focus legible, and progress feedback on long ML runs signals work is still in flight. Writing the interaction code meant I could iterate on timing directly instead of specifying it and hoping it survived a handoff.
Keyboard order, visible non-trapping focus, and Radix-backed semantics are built into the primitives, and contrast is validated to WCAG AA in both themes , so every screen inherits it instead of re-litigating it.
Performance got the same structural treatment: virtualized tables, memoized render paths, and streamed logs keep the heavy surfaces responsive under load. Cost and behavior were weighed at build time, not diagnosed after a regression.
Each screen composes from the same tokens and primitives. From auth to FinOps, the interaction language is shared , which is why a dozen surfaces still read as one product, not a stack of separate efforts.
The system resolves HSL tokens from CSS variables through the Tailwind theme into shadcn/ui variants. Color, type, spacing, radius, and motion map to the same values in Figma and in production, so design isn’t a reference for the build, it’s the source the build reads from.
The system shipped and the team moved faster against it. Engineers assemble screens from trusted primitives instead of rebuilding them, and design iterates on real components instead of throwaway mockups. The design-to-engineering handoff effectively disappeared, and new features slot in without a redesign , which is why it’s still the foundation Aichor builds on today.