Act as a Senior UI/UX Product Designer. We are designing a premium mobile application called "SmartPantry".
DESIGN SYSTEM & AESTHETIC:
- Style: "Modern Bento Box". Highly structured, clean, card-based UI (Apple Wallet / Duolingo premium feel).
- Framework Alignment: Follow Material 3 design principles with high-end, minimalist custom skinning.
- Corner Radii: Strict 16px border-radius on all cards, buttons, and bento grids.
- Shadows: Very soft, diffuse drop shadows on cards (e.g., 0px 4px 20px rgba(0,0,0,0.05)).
- Layout: 12-column grid system, 16px screen edge padding, clear visual hierarchy.
COLOR PALETTE:
- Background: Warm Off-White (
#F4F5F4) - Surfaces/Cards: Pure White (
#FFFFFF) - Primary Brand: Emerald Green (
#10B981) for primary actions and success states. - Text Color: Dark Charcoal (
#1F2937) for high contrast readability. - Warning/Alert: Muted Orange/Red for expiring food.
TYPOGRAPHY:
- Headings: 'Clash Display' (or a similar geometric, bold sans-serif).
- Body Text: 'Satoshi' (or a similar highly readable, modern sans-serif like Inter).
VISUAL ASSETS:
- Use placeholder high-quality, photorealistic food photography (Unsplash style) for recipe images. Do not use generic 3D icons for food.
- Ensure all screens have a premium, tactile feel.
I'll design SmartPantry as a premium mobile experience. Let me first explore the starter files and generate photorealistic food imagery in parallel.
This is a Tailwind v4 project (config lives in globals.css). Let me generate photorealistic food photography for the recipes while I build the screens.
Now let me set up the design system — fonts (Clash Display + Satoshi via Fontshare) and the SmartPantry color tokens.
Now let me update the @theme inline block to wire up the fonts and new tokens.
Now update the root layout with proper metadata and the warm background on <html>.
Design system is set. Now let me build the data layer and the app screens. First, the data module.
Now the phone frame wrapper that gives the premium mobile feel on desktop preview.
Now the bottom navigation bar.
Now a small shared status badge helper used across screens.
Now the showpiece — the Home bento dashboard.
Now the Pantry inventory screen with category filtering and search.
Now the Recipes screen with the food photography cards.
Now the Profile screen to round out the navigation.
Now an "Add Item" bottom sheet for the center action button, then the page orchestrator.
Finally, the page orchestrator that ties the screens, navigation, and sheet together.
Let me verify it renders correctly in the browser.
A dev server is already running on 3000 (returning 500). Let me check its logs for errors.
The CSS @import for fonts must precede all rules, but Tailwind's import expands into rules. I'll load the fonts via <link> in the layout instead, which is cleaner.
These are stale errors from before my fix. Let me trigger a fresh compile and confirm.
Let me verify the current state of the file's top.
The file is clean now — the running server is serving a stale cached compile. Let me restart it cleanly.
Status 200 — the stale cache was the issue. Now let me visually verify with the browser.
The home dashboard looks premium and polished. Let me verify the Recipes screen with the food photography and the Pantry screen.
Excellent — photorealistic recipes with match scores and expiring badges. Let me verify the Pantry screen and the Add Item sheet.
SmartPantry is built and verified across all screens. Everything renders cleanly with the premium Bento Box aesthetic you specified.
What I built
A four-screen premium mobile app inside a realistic phone frame (notch, status bar, floating dock):
- Home — A 12-column bento dashboard: an emerald Freshness Score hero card, stacked stat tiles (items tracked / expiring soon in muted-orange), a wide "waste avoided" card, a horizontal "Use it soon" carousel, and a photographic recipe spotlight.
- Pantry — Searchable, category-filtered inventory sorted by urgency, each row carrying a color-coded freshness badge (emerald = fresh, muted orange = expiring, red = expired).
- Recipes — Full-bleed photorealistic food photography cards with "% match" and "Uses expiring" tags to drive waste reduction.
- Profile — Identity card, impact bento stats, settings menu, and a Pro upgrade panel.
- Add Item — A tactile bottom sheet (barcode scan + manual entry) triggered by the central emerald FAB.
Design system applied
- Color: Warm off-white
#F4F5F4background, pure white surfaces, emerald#10B981brand, charcoal#1F2937text, and muted orange/red strictly reserved for expiry alerts — wired as semantic tokens inglobals.css. - Type:
Clash Displayfor headings (font-display) andSatoshifor body, loaded via Fontshare. - Form: Strict 16px radii (
--radius: 1rem), soft diffuseshadow-bento(0px 4px 20px rgba(0,0,0,0.05)), 16px edge padding, and Material-3-inspired hierarchy.
One note: I used real food emoji as ingredient thumbnails in the pantry list (lightweight + legible at small sizes) while reserving the photorealistic Unsplash-style photography for the recipe cards. If you'd prefer cropped product photography for pantry items too, I can generate those.
Using the established SmartPantry design system, generate the first 3 screens:
- Native Splash Screen: Off-white background with a centered, minimalist Emerald Green logo.
- Onboarding Carousel Card: A bento-style card showcasing "Track Your Pantry". Include a photorealistic image of a neatly organized fridge, a bold heading, and an Emerald Green "Get Started" button.
- Profile Setup Screen: A clean form with the user's name ("Syed Abdul Nasir") at the top. Below it, a bento grid allowing the user to tap and select Dietary Preferences (Vegan, Keto) and Allergies (Nuts, Dairy) using toggleable pill buttons.
Using the established design system, generate the core pantry screens:
- Pantry Dashboard: The main hub. A search bar at the top. Below, a bento grid showing inventory categories (Proteins, Veggies, Dairy) with item counts. Add a warning bento card at the top saying "Use First: Chicken (Expires in 2 days)".
- OCR Scanner Viewfinder: A camera overlay screen. Darkened background with a bright, rounded bounding box in the center reading a grocery receipt. A simple, floating capture button at the bottom.
- Edit Item Drawer: A bottom sheet sliding up over the dashboard. It shows "Chicken Breast", a plus/minus counter for quantity (currently at 1 lb), and a calendar input for expiration date.
Using the established design system, generate the AI cooking flow: - Recipe AI Hub: A clean configuration screen. Sliders for "Cooking Time" (e.g., 30 mins), toggle pills for meal type (Dinner, Breakfast), and a large, glowing Emerald Green "Chef it up ✨" button at the bottom.
- Recipe Detail Screen: A parallax header layout. The top 40% of the screen is a stunning, photorealistic Unsplash photo of Garlic Butter Chicken. The bottom 60% is a white sheet overlapping the image, containing the Clash Display title, a grid of macros (Calories, Time), and a checklist of ingredients.
- Cooking Stepper: A clean, numbered step-by-step UI for cooking the chicken, with large typography and checkboxes to mark steps as complete.
Using the established design system, generate the final utility screens:
- Smart Shopping List: A clean checklist UI. Items are grouped by category (Produce, Dairy). Checkboxes are round. Include an active text input field at the bottom to "Quick Add" a new item.
- Premium Paywall Overlay: A dark-mode variant of the bento design. Dark Charcoal background. A stunning premium card offering "SmartPantry Pro". Highlight features like Unlimited AI Recipes, with a bold CTA button and a subtle "Restore Purchases" text link at the very bottom.
This is a substantial set of 11 screens across 4 flows. Let me set up a plan and generate the new photography I need in parallel.
Let me review my existing components to reuse the established patterns and tokens.
I have a clear picture of the established patterns. I'll present these as a designer-style showcase gallery — each screen rendered in a fixed phone frame, grouped by flow. First, a reusable gallery phone frame.
Now the three onboarding screens.
Onboarding flow done. Moving to the core pantry screens.
Pantry screens done. Now the AI cooking flow.
Cooking flow done. Now the final utility screens and the showcase gallery.
Now the showcase gallery page that presents all 11 screens grouped by flow.
Let me verify the gallery renders correctly in the browser.
The onboarding flow looks premium and polished — Clash Display headings, the emerald logo, and the photorealistic fridge render beautifully. Let me scroll through the remaining flows to verify the pantry, cooking, and dark paywall screens.
Profile setup pills, the pantry dashboard with the "Use First" warning card, and the dark OCR scanner viewfinder all look excellent. Let me check the cooking flow and the dark paywall.
All 11 screens render beautifully across every flow — the edit drawer over the dimmed dashboard, the AI Chef hub with its time slider, the parallax recipe detail with the photorealistic Garlic Butter Chicken, the numbered cooking stepper, the round-checkbox shopping list, and the dark-mode SmartPantry Pro paywall. Let me close out the plan.
All 11 screens are built and verified in the browser, presented as a designer-style showcase gallery grouped into four flows.
01 — Onboarding: Splash (centered emerald leaf logo on warm off-white), Onboarding carousel (bento card with the photorealistic organized fridge + "Get Started"), and Profile Setup (Syed Abdul Nasir's identity with toggleable Vegan/Keto and Nuts/Dairy pills).
02 — Pantry: Dashboard (search + orange "Use First: Chicken" alert + category bento grid with counts), the dark OCR Scanner (glowing bracketed bounding box over a live receipt with a floating capture button), and the Edit Item Drawer (bottom sheet with +/− lb counter and a calendar expiry field).
03 — AI Cooking: Recipe Hub (cooking-time slider, meal-type pills, glowing "Chef it up ✨" CTA), Recipe Detail (parallax Garlic Butter Chicken photo header over a white sheet with a macro grid and ingredient checklist), and the numbered Cooking Stepper.
04 — Utility: Smart Shopping List (round checkboxes grouped by category with a Quick Add input) and the dark-mode SmartPantry Pro paywall with feature highlights, plan selection, and a "Restore Purchases" link.
Every screen holds to the system: strict 16px radii, soft shadow-bento, Clash Display headings on Satoshi body, and the emerald-on-off-white palette with orange/red reserved strictly for expiry. The components are interactive (pills, counters, checklists, plan toggles) and the gallery lives on the home route. Want me to wire these into a tappable end-to-end prototype with real navigation next?