royal-system

byMohd Arselan Khan

Build a single-page web app called "Dopamine Menu" — a playful wellness tool that reframes short, intentional micro-activities as a restaurant menu of "brain snacks." The core message: stop feeding your brain cheap dopamine (doomscrolling) and instead order a real, tangible 5/10/20-minute activity off the menu. Visual style Warm, hand-crafted "scrapbook journal" aesthetic — think a cozy zine page, not a typical SaaS UI. Background: warm cream/beige, #E8DACE Cards: slightly lighter dusty beige, #EFE4DC, with thin 1px black/dark-brown hairline borders (no heavy shadows — flat, paper-like) Tag chips / pills: dusty rose-beige, #DCC8BC, rounded corners, small uppercase or lowercase label text Text color: near-black warm brown, #1C1410 Headlines: bold, chunky, hand-drawn marker/brush font — use Google Font "Permanent Marker" (or "Kalam" Bold as fallback), always in caps for big titles like "DOPAMINE MENU" Taglines / subtext / instructions: casual cursive handwriting font — use Google Font "Caveat" (or "Gloria Hallelujah"), italicized, muted gray-brown color Decorative doodles: hand-drawn black sparkle/star icons (4-point and 8-point asterisk-style stars), and a loose hand-scribbled squiggle line accent — scattered near images, not symmetric, looks sketched not vector-perfect Photo framing: product/lifestyle photos get a thin black corner-bracket frame (4 small "L" brackets in the corners, like a viewfinder/Polaroid crop mark), NOT a full border Overall feel: warm, analog, a little whimsical, zero corporate gloss Layout & Screens 1. Top menu tabs (always visible) Three side-by-side tab cards representing time-based menu categories: "5 MINUTE" / Starters "10 MINUTE" / Curiosity Bites "20 MINUTE" / [longer activity category — pick a fitting third name, e.g. "Deep Dives"] Each tab shows a bold time label on top and a cursive italic subtitle underneath. The active/selected tab has a visible highlighted background + border; inactive tabs are muted/lower-contrast. Clicking a tab switches the active menu category. 2. Hero / landing card A large bordered card below the tabs, two columns: Left column: Giant headline: "DOPAMINE MENU" (Permanent Marker font, black, large) Cursive tagline directly under it: "Pick A Brain Snack" Lower in the card, a bold 2-line closer: "NO MORE / CHEAP DOPAMINE" A primary CTA button (e.g. "Start" / "Open the Menu") that switches the view to the Activity screen (screen 3) Right column: A square lifestyle photo (someone enjoying a simple real-world moment outdoors, e.g. eating ice cream) with the corner-bracket photo frame Two hand-drawn sparkle/star doodles overlapping the photo's left edge A scribble doodle near the bottom-right corner of the photo Easter egg interaction: on hover or click, the photo darkens/blurs and reveals overlay text: "SMASH THIS GLASS TO REVEAL" / "EMERGENCY RESET COMBO" with a white reveal button in the center. Clicking it triggers an instant 1-minute "panic reset" activity (a single ultra-quick grounding action shown in a small popup/toast) — a playful break-glass panic button for when someone really needs a dopamine hit right now. 3. Activity / Menu detail screen Replaces the hero when a menu category is opened. Two-column layout: Header (centered): "DOPAMINE MENU" (smaller) + cursive subtitle "A gentle nudge toward feeling good" Section label above the main card, cursive, muted: e.g. "5 Minutes Dopamine Appetizer" (text matches whichever tab/time-category is active) Main activity card (left, wide): Two small pill tags top-left: a mood/category tag (e.g. "Calmness," "Focus," "Reset") + a duration tag (e.g. "3 Min.") Bold marker-font activity title in caps, e.g. "ESCAPE THE ALGORITHM SPRINT" Italic handwritten-style instructions block: One setup line (e.g. "Put your phone on airplane mode.") A short intro line ("Now complete this mini-mission before the timer ends:") A bulleted list of 3–5 tiny, concrete, slightly absurd real-world micro-tasks (sensory/movement/creativity prompts — e.g. "Find 3 interesting shadows around you," "Touch something cold," "Invent a fake luxury perfume name") A closing reflective line tying it back to the dopamine-menu concept (e.g. "Your brain wanted novelty. You just gave it real novelty instead of scrolling.") Two buttons bottom-right of the card: "New Activity" (shuffle/dice icon, outlined secondary button — swaps in a different random activity card with new tags/title/instructions, no page reload) and "Done" (checkmark icon, outlined secondary button — marks it complete and increments the stats sidebar) Write at least 4–5 different activity card variants per time category so "New Activity" feels like a real shuffle (mix categories like Calmness, Reset, Focus, Curiosity, Movement) Stats sidebar (right, narrow): three stacked stat cards, each a big number above a small label: "0 Completed" "0 Streak" "0 Completed" (a second tracked stat — e.g. weekly total or category-specific count) These should live in app state and actually increment when "Done" is clicked (use localStorage or in-memory state — no backend needed) A subtle back/home control to return to the hero screen from here. Interactions / functionality summary Tab clicks switch the active time-category and its section label/copy "Start"/CTA on hero opens the Activity screen for the currently active tab "New Activity" cycles to a new random card (different tags, title, instructions) within the active category, client-side only "Done" increments the completed/streak counters and gives a small satisfying confirmation (a brief animation, color flash, or toast — keep it understated, not loud/gamey, in keeping with the "gentle nudge" tone) The hero photo's "smash glass" panel is a hidden delight feature, not part of the primary flow Fully responsive: stack the two-column layouts vertically on mobile, tabs scroll or wrap Tone of voice for any additional copy Warm, witty, slightly self-aware about phone addiction and dopamine culture — never preachy or clinical. Short punchy sentences. Lowercase/cursive for the "soft" emotional lines, bold caps marker font for the punchy declarative ones.