Fignix Reward

Bold Achievement Card Design

The Fignix Reward Card is a high-impact UI component designed for products that celebrate user achievements — think course completions, loyalty milestones, leaderboard ranks, or app onboarding rewards. Inspired by bold editorial design, the card uses a vivid orange background, oversized number typography, a dark geometric accent circle, and a clean medal/ribbon icon — creating a composition that feels premium and motivating at the same time. Design Philosophy Most reward UIs feel generic — a badge, a star, a popup. This component treats achievement as a brand moment. The oversized "1" creates visual hierarchy that immediately communicates rank or progress. The dark circle in the bottom-right acts as a grounding element, preventing the composition from feeling flat. The ribbon icon at the top-right signals credibility without being decorative noise. Result: a card that users actually want to screenshot and share. Key Features Bold oversized number/rank display Geometric dark accent shape for depth Medal/ribbon icon slot (top-right) Category label at the bottom (e.g. "JavaScript Developer") Fully editable text, colors, and icon Smooth rounded corners for a modern card feel Works as standalone card or inside a modal/overlay Light shadow for subtle elevation Ideal Use Cases Online course & LMS platforms Gamified onboarding flows Loyalty & rewards programs Leaderboard UI Certificate of completion screens Fitness or habit tracking apps How to Use Drag component onto your Framer canvas Edit the number, title, and category label directly Swap the icon in the top-right to match your brand Change background color via component properties Drop into any page as a standalone card or inside a modal

Bold Achievement Card Design