Dino Design System
A design system created in Figma and documented in a live site built with Astro
I designed the full UI for Dino, a gamified learning app created by Ucademy, and built the design system to support it. This is that system, documented and deployed.
How I built it?
I started with an audit of the existing components in Figma: reading what was there, identifying missing states, naming issues, and structural gaps. The goal wasn't to rebuild from scratch but to make deliberate decisions about every inconsistency — and document the reasoning behind each one.
The documentation site I built with Astro and vanilla CSS, no UI frameworks. I used Cursor to work through the CSS and HTML directly, and Claude Code to describe logic, review output, and iterate. All values flow from global.css. The token system is the source of truth, not the component files. The site is deployed on Vercel.