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
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
