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
Cards
Elevated
Shadow-based depth
Outlined
Border-based definition
Filled
Subtle background fill
Inputs
Must be at least 8 characters
This username is already taken
Dropdowns
Toggles
Avatars
Sizes
Fallback (no 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.
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
Browser CTA
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
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