Fluid Product Card with Design Tokens & Microinteractions

What are you most proud of, and what would you do differently next time?

I'm most proud of how intentional this project became despite its small scope. Instead of only recreating the design, I used the challenge to practice building a small design system with semantic tokens, cascade layers, logical properties, and fluid spacing/typography.

I'm also very happy with the button microinteraction. It was my first time creating a small animated interaction using CSS and JavaScript together, including randomized transforms, DOM cleanup, and reduced-motion accessibility support.

Next time, I would spend a bit less time overthinking early architectural decisions and move into implementation faster. I learned that some decisions become much clearer once the UI actually exists.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges was deciding how far to push abstraction and systemization in such a small project. I spent a lot of time thinking about which values deserved tokens, which should stay component-specific, and how semantic naming should coexist with primitive values.

Another challenge was understanding responsive image behavior with the <picture> element, especially how <source>, srcset, width/height, and intrinsic sizing interact.

I also ran into interaction issues while creating the button animation. The floating element accidentally intercepted pointer events and caused the button to lose its hover cursor state. I solved this by debugging the interaction flow and using pointer-events: none on the animated element.

What specific areas of your project would you like help with?

I'd especially appreciate feedback on:

• my token architecture and naming strategy,
• whether my semantic/primitives separation feels scalable,
• my use of fluid spacing and typography,
• and whether my layout approach is resilient enough for larger projects.

I'm also interested in feedback about when component-specific values should remain local versus becoming part of a shared design system.

Finally, I'd love suggestions on improving my CSS organization and composition patterns as I continue learning responsive design and Grid layouts.