Elna Flow — Glassmorphism Flashcards

Design and build "Elna Flow", a spaced-repetition flashcards app, as a polished mobile-first web app.

ART DIRECTION — Glassmorphism: frosted-glass panels with 20px backdrop blur, 1px inner white borders at 12% opacity, layered translucency over a deep gradient backdrop. Color system: surface #0A0A0F, primary #7C5CFF, accent #FF7A59. Typography: Playfair Display for headlines, DM Sans for body. Corner radius 16–24px, 8px spacing grid, and a consistent icon set (Lucide).

CORE SCREENS: a stats-first dashboard, a list view with swipe actions, a full-screen creation modal, a calendar view, and an achievements screen. Each screen must be fully composed with realistic sample data for a spaced-repetition flashcards app — believable names, values, dates, and imagery placeholders, never lorem ipsum.

KEY FLOWS: Nail the primary loop of a spaced-repetition flashcards app: make the main action reachable in one tap from home, show instant optimistic feedback, and design a delightful empty state and a helpful error state for every screen.

MOTION: Charts animate on first view (bars grow, lines draw); numeric changes tween rather than jump. All animations 150–350ms, spring-based where natural. Respect prefers-reduced-motion.

COMPONENTS: Bottom tab bar (or collapsible sidebar on desktop), reusable card / list-item / button / input components, toast notifications, and a confirmation sheet pattern for destructive actions. Include a dark mode toggle that persists.

TECH: React + Tailwind CSS, mobile-first at 390px wide scaling to a desktop layout. State kept in local component state or a lightweight store; structure the code by feature. Ship it looking like a top-100 App Store product for the flashcards category.

Paste into Lovable, Bolt, Cursor, v0 or Claude. Licensed for personal & client work. — Elna Flow — Glassmorphism Flashcards