Logo
Gradient (default)
Solid / currentColor
On dark
Small / inline
Extension Icon / Favicon
For small contexts like favicons (16px), browser extension icons, and toolbar icons where the full wordmark won't read.
OG Image
Open Graph image for social sharing. Auto-generated at /opengraph-image using Next.js ImageResponse.
Raw Image (1200x630)
iMessage Preview
joinmeela.com
Meela - Cash Back on Your Favorite Stores
Colors
Brand Palette - Default
Gradient
from-meela-pink to-meela-purple
Typography
Display / Headings (Poppins)
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Body (Inter)
Meela is the easiest way to earn cash back while you shop your favorite stores. No coupons, no hassle.
Secondary body text for descriptions, hints, and supporting content across the interface.
Caption text · Timestamps · Fine print
Gradient text
Earn cash back on your favorite stores
Badges
Variants
Sizes
Trust Badges
Pill-shaped social-proof badge. Pair an icon with a colored emphasis word and a faded detail. Used in marketing surfaces (hero, install, partner pages).
Tones
Cards
Elevated
Shadow-based depth
Outlined
Border-based definition
Filled
Subtle background fill
Value Cards
Marketing card with a gradient icon tile, title, and short description. Hover scales the icon. Use in feature trios and "how it works" rows.
Install once
Add Meela to your browser in one click. It runs silently in the background — no setup, no signup required.
Shop your stores
When you visit a supported store, Meela pops up with your cash back rate. One tap to activate — that's it.
Get paid
Cash back hits your account automatically. Withdraw anytime — no hoops, no expiration.
Inputs
Must be at least 8 characters
Please enter at least 2 characters
Dropdowns
Toggles
Theme Toggle
Light/dark mode switch wired to useTheme(). Sun/moon icon, brand gradient track when dark.
Avatars
Sizes
Fallback (no image)
Fallback (broken image)
Progress Bars
Stats
Alerts
New stores added
Cash back activated
Payout pending
Extension disabled
Tooltips
Skeletons
Loading states
Dividers
Plain
With label
OR
With label
Section break
Modal
General-purpose modal dialog with title, body, and optional footer. Supports sm/md/lg sizes, Escape to close, and backdrop click dismiss.
Spinner
Loading spinner in three sizes. Uses brand purple accent.
Stars
Five-star rating row. Defaults to 5 stars at 14px. Pass size for the SVG size and count for non-five sets. Pure visual element — currently always full stars.
Default (14px)
Hero (20px, gap-1)
Large (28px)
Custom count
Status Badge
Colored pill badge for statuses. Pass any Tailwind color classes via colorClass.
Profile Bar
User profile summary used in the extension popup. Links to the dashboard.
Earned + pending
Earned, nothing pending
Over payout threshold
New user
Redeem Button
Cash-out button with two states: eligible (above threshold) and not yet eligible.
Eligible to redeem
Minimum $5.00 to redeem. Terms apply
Not eligible (below threshold)
Minimum $5.00 to redeem. Terms apply
Just at threshold
Minimum $5.00 to redeem. Terms apply
Merchant Cards
Sephora
Beauty
6%
cash back
Nordstrom
Fashion
4%
cash back
Lululemon
Athleisure
3%
cash back
Glossier
Beauty
7%
cash back
Cashback Badges
Sephora
6% cash back
Nordstrom
4% cash back
Lululemon
3% cash back
Ulta
3% cash back
Glossier
7% cash back
Trending Cards
Discovery cards for merchant grids. Featured variant for hero placement, default for compact lists.
Featured
Sephora
Beauty
Glossier
Beauty
Nordstrom
Fashion
Default (compact)
Lululemon
Activewear
Nike
Shoes
ASOS
Fashion
Testimonial Cards
Quoted user testimonial with avatar initials, 5-star rating, body text, and earnings + store attribution. Used in marketing testimonial carousels.
Jess M.
@jessm
I literally forgot I had Meela installed and got a $12 cashback notification from Sephora. Free money???
Priya K.
@priyak
Activated cash back on a Glossier order I was making anyway. Got $8 back the next week with zero effort.
Browser CTA
Rewards Pill
Compact account balance pill for headers and account surfaces.
Google Icon
Brand-correct Google “G” SVG. Used in auth flows alongside the Continue with Google CTA. Defaults to size=18.
In context
Code Input
Six-digit OTP entry used in passwordless auth. Auto-focuses, advances on input, supports paste, and surfaces an error string under the digits.
Default
With error
Wrong code, try again.
Auth Modal
Passwordless sign-in flow. Google (priority) or email with 6-digit code.
Cashback Banner
On-page overlay banner shown on merchant sites. Displays cash back rate with activate button. Supports offer, activated, and dismissed states. Use preview prop to disable interactivity for static mockups.
Offer State (default)
Sephora
6%
cash back
Activated State
Glossier
7%
cash back active
With Exclusions
Nordstrom
4%
cash back
Rate Types
Sephora
6%
cash back
Nike
up to
5%
cash back
Target
$5
cash back
Ulta
up to
$10
cash back
Dollar Confetti
useDollarConfetti(originRef?, disabled?) returns a fire() trigger. Particles read brand colors from CSS variables at fire time. Reserve for genuine reward moments (cash back lock, payout success).
originRef.Chrome Browser
Chrome browser mockup with macOS traffic lights, tab strip, and toolbar with omnibox. Renders children as page content. Used for marketing visuals and promo images.
Page content goes here
CWS Promo Images
Chrome Web Store promotional images (1280x800). Click to expand. Full-size renders at /cws-images.
Meela Design System · Brand Book