Pricing section patterns used by top-tier brands work for a reason. Clear value hierarchy, a dominant plan, and a single action that converts. I wanted to build one from scratch to test how well I could execute that pattern, and push it further with motion.

The Pro plan is the only one with a coloured CTA button and highlighted as "Popular" for a reason. That's an intentional conversion decision, as visitors subconciously want to pick what others choose. The dark theme isn't aesthetic preference - it signals premium and creates contrast that makes the highlighted plan stand out further.

I started in Figma, then built the full component in Framer with auto layouts and responsive design. Buttons are built in Rive and embedded into Framer. That wasn't a technical exercise for its own sake. Rive allows to take micro-interactions to the next level. Hover states feel alive in a way that matches the quality bar of the brands this pattern comes from.

The result is a production-ready pricing component that combines Figma, Framer, and Rive into one cohesive deliverable.