Interface Design
NDA Project
Figma
Cinema 4D
AI
The client prioritized speed and cost, requesting that the design be developed using components from any existing design system. This case study explores how I balanced those priorities with usability and scalability, and what outcomes we achieved. This NDA project is presented with permission to showcase authentic design work while maintaining confidentiality.
Solution
SHADCN/UI
During early product discussions, the development team proposed starting with Bootstrap due to its familiarity and speed of setup. After evaluating long‑term scalability and design–development alignment, I presented the advantages of adopting shadcn/ui.
- Modern, React-first approach
- Smaller footprint, better performance
- Components are editable (you own the code)
- Better free design library at Figma
- Works seamlessly with Tailwind CSS
- More customizable and flexible
Interface
Semantic variables
SHADCN/UI
I implemented a semantic variable system to support light and dark themes, streamline component styling, and improve design–dev alignment.
Beyond color tokens, this setup extended to spacing, typography, etc. — creating a unified foundation for scalable theming and faster handoff. It allowed developers to switch modes instantly while preserving clarity and consistency across the UI.
200 + NAMES
Nunito Sans
H1 H2 H3 H4
Golos
Paragraph
Product Page
By reusing shadcn/ui components for the Product Page, I enabled faster development cycles, improved design–dev alignment, and ensured a scalable foundation for future iterations.
Dark Mode
I implemented light and dark themes using shadcn/ui components combined with semantic variables, ensuring consistent styling across modes.
This approach streamlined development, reduced rework, and gave both designers and developers a flexible, scalable foundation. It proved highly convenient, allowing instant theme switching while maintaining clarity in Figma and performance in code.
Conclusion
From Design to Working Prototype — Fast
Instead of relying on heavy UI frameworks, this project was built on a lean stack: Vite + React with pure inline styles and no CSS abstractions. Every component — from the animated donut chart to the adaptive card grid — was implemented directly from Figma specs without translation layers — using Claude Code as the development environment throughout. The result is a fully interactive prototype with scroll-triggered animations, responsive layouts across all breakpoints, and a live deployment.