◈ Gen-Z UI/UX Design System

QRLY — Create. Scan. Pay.

A neon-purple, Gen-Z UPI QR generator. Free forever, no ads, no mandatory subscription. One coherent product ecosystem: 28 production-ready mobile screens, one design language, one master reference — the Home screen.

28 screens 390 × 844 design frame Neon violet · #0B0614 Plus Jakarta Sans QR on screen 07 is genuinely scannable
◆ Live detail: the QR code on screen 07 · QR Result is a real, scannable UPI intent QR (upi://pay?pa=rahul@upi&pn=Rahul&am=500&cu=INR) composited into the mockup at full contrast — scan it with any UPI app to verify the fixed-amount flow.
TOKENS
One system, every screen — v2 neon-purple direction

Color

bg.primary#0B0614 · purple-black
bg.secondary#0D0718
surface#17102A
surface.elevated#1D1433
accent.violet#A855F7 · primary
accent.neon#B45CFF · glow
accent.purple#9333EA
accent.deep#7C3AED
accent.pink#E879F9 · sparingly
gradient.primaryviolet → deep violet
text.primary#FFFFFF
text.secondary#C9B8E8 · lavender
success#34D399
error#F87171

Typography · Plus Jakarta Sans

DISPLAYCreate a QR
H1 · 24/800Your QR is ready
H2 · 20/700Recent QR
BODY · 14/500Generate a fixed-amount UPI QR in seconds.
BUTTON · 16/700Generate QR
CAPTION · 12/400Your QR stays on your device.

Glow · Radius · 3D decor

  • Neon glow — violet outer glow on hero cards, primary CTA, active nav tab, selected chips
  • Nebula — soft violet radial washes in the purple-black background
  • 3D decor — floating glossy cubes, thin rings, sparkles; background only, never over content
  • Radii — 16 inputs/buttons · 24 cards · 28 hero & nav pill
  • QR card — pure white #FFFFFF, black modules, quiet zone: never sacrificed for aesthetics
ONBOARDING
Splash · 3 onboarding beats · optional login
Splash screen
01 · SPLASH
Splash
Glowing 3D QR tile in violet nebula. QRLY — "Create. Scan. Pay."
Onboarding 1
02 · ONBOARDING 1
Your QR. Your Amount.
"Create a ready-to-pay UPI QR in seconds."
Onboarding 2
03 · ONBOARDING 2
One ID. One Tap.
UPI ID morphing into a QR — "We'll handle the rest."
Onboarding 3
04 · ONBOARDING 3
Make It Yours.
Saved cards + templates collage. "Get Started" / Skip.
Login
05 · LOGIN
Welcome back.
Google / Apple / email-phone. "Continue as Guest" — login stays optional.
CORE
The 10-second flow — UPI ID → amount → Generate QR
Home
06 · HOME — MASTER REFERENCE
Create a QR
Neon generator card: UPI ID, amount, quick chips, glowing Generate QR. Recent QR below. Floating nav.
QR result
07 · QR RESULT
Your QR is ready
White high-contrast QR card, fixed amount, Download/Share/Save, glowing Share QR. The QR really scans.
Customize
08 · CUSTOMIZE
Customize QR
Live preview, 6 presets, style controls, text fields. Sticky Save Design / Export QR.
Export sheet
09 · EXPORT
Export your QR
Bottom sheet: PNG / Hi-Res PNG / PDF / Print Ready, sizes S–A4, transparent-bg toggle.
CONTENT
History · Saved · Templates
History
10 · HISTORY
History
Search + All/Today/Week/Month filters. Cards with thumb, name, UPI ID, amount, time, actions.
Saved QR
11 · SAVED
Saved QR
Personal/Business/Friends/Other folders, star favorites, "+ New QR" FAB.
Templates
12 · TEMPLATES
Templates
8 large live-preview cards: Minimal, Midnight, Neon, Luxury, Business, Cafe, Creator, Gaming. FREE / PRO badges.
Template detail
13 · TEMPLATE DETAIL
Midnight
"Minimal dark QR with a premium violet finish." Use Template / Customize + style controls.
MONETIZATION
Pay once. Keep it forever. — no subscriptions, no ads
Unlock More
14 · UNLOCK MORE
Make your QR unforgettable
Free checklist + 5 one-time packs: ₹29 / ₹99 / ₹199 / ₹149 / ₹499.
Business Pack
15 · BUSINESS PACK
Business QR Pack · ₹199
10 designs, logo, brand colors, print-ready export. "One payment. No subscription."
Lifetime Pro
16 · LIFETIME PRO
QR Pro · ₹499 · LIFETIME
All templates, branding, business tools, hi-res + print PDF. "No ads. No subscription."
Support
17 · SUPPORT
Enjoying the app?
"Help us keep it free and ad-free." ₹10/₹25/₹50/Custom. Subtle, non-aggressive.
BUSINESS
Merchant mode — branded, professional, print-ready
Business QR
18 · BUSINESS QR
Business QR
Business name, UPI ID, amount, logo, phone, Instagram, website, message. Live merchant preview.
SETTINGS
Account · app · QR defaults · data · support
Settings
19 · SETTINGS
Settings
Profile card + 6 groups: Account, App, QR Settings, Data, Support, Legal. v1.0.0.
Profile
20 · PROFILE
Profile
Avatar, status, stats (Generated / Saved / Templates), Edit Profile, Sync, Sign Out.
Appearance
21 · APPEARANCE
Appearance
Dark / Light / System preview cards. Dark is the default.
QR Settings
22 · QR SETTINGS
QR Settings
Default style, template, export format. Auto-save, Show amount, Show UPI ID toggles.
Notifications
23 · NOTIFICATIONS
Notifications
Minimal center: saved confirmations, template-ready, new pack. No promo spam.
SYSTEM STATES
Empty · Error · Sheets · Search — every edge designed
Empty state
24 · EMPTY
No QR history yet
Glowing 3D QR illustration + "Create your first QR".
Error state
25 · ERROR
That UPI ID doesn't look right.
Plain-language errors, offline note ("basic QR codes work offline"), Retry.
Delete confirmation
26 · DELETE
Delete this QR?
Premium bottom sheet. Cancel / Delete (red).
Share sheet
27 · SHARE
Share QR
Custom sheet: WhatsApp, Instagram, Telegram, Copy Image, Save to Device, More.
Search
28 · SEARCH
Global search
Grouped results across Saved QR, History and Templates.
COMPONENTS
The reusable kit behind all 28 screens

Component library

Primary ButtonSecondary ButtonGhost ButtonIcon ButtonFABText InputUPI InputAmount InputSearch InputDropdownToggleSliderChipFilter ChipQR CardSaved QR CardTemplate CardPremium CardProfile CardStat CardBottom SheetModalToastSnackbarNavigation BarTop BarSection HeaderEmpty StateError StateSuccess State

Icon system · 1.8px rounded line

HomeHistorySavedTemplatesSettingsQRScanShareDownloadUploadEditDeleteSearchFilterPlusHeartStarLockCrownSparklesWalletUserBellHelpChevronMoreCopyCheckCloseBack

Micro-interactions

  • Button press: scale dip + glow flare (120ms)
  • Input focus: violet neon border + outer glow; errors stay red, plain-language
  • QR generation: tile assembles with particle burst, then ✓ "QR generated successfully"
  • Save / Share / Download: checkmark + scale pop, toast confirms
  • Favorite: star fills with sparkle burst — no confetti anywhere
  • Sheets slide with spring ease; template cards lift with violet ring on select

UX principles

⚡
10-second rule

UPI ID → amount → Generate QR. No account, no upsell, no friction in the path.

🔒
Privacy-first

"Your QR stays on your device." Generation works offline; sync is opt-in.

◈
Scannability is sacred

QR always black-on-white with quiet zone. Style never beats scanning.

♿
Accessible

High contrast, 48dp+ touch targets, plain-language errors, strong focus states.