Sona AI provides a calm, editorial look for nutrition and everyday wellness. The bundle includes an editable Figma UI kit, a React + TypeScript frontend, and a ready-to-run compiled demo so you can explore the experience and customize design and code.
What's inside
Explore the experience: personalized onboarding, body metrics, activity and preference selection, a daily overview, recipe browsing, sample meal-scanning results, assistant conversations, biometrics, profile settings and membership screens. The demo includes a Restart demo control outside the app frame so you can return to the beginning of the flow.
Design and customization: a focused light theme with intentional dark accents, soft green tones, and an Instrument Serif / Manrope font pairing. Organized screens, local variables and reusable components support adaptation to nutrition, lifestyle and wellness concepts. Edit the Figma design, customize the React source, or run the included browser demo locally.
How to use: import the .fig file into Figma. For the React project, follow START-HERE.md and the source README using Node.js 24.x. The compiled HTML demo includes a local preview server and instructions. You do not need a backend or API keys to explore the demo.
Live preview: https://sona-ai-roan.vercel.app/
Please note: this is a design kit and frontend demo. Interactions use sample data and simulated responses. No backend, live AI service, payment processing, health-data synchronization or medical functionality is included. The original Figma design was created by the author; the accompanying frontend implementation was created with AI coding assistance. Product usage follows the license selected at checkout.