calories-calculator-design

Calories Calculator — Design

AI-first mobile app design for a calorie tracker with personalized recipe discovery. Built end-to-end using Claude and Claude Code.

Contents

• claude.md — the build brief used to generate this work in Claude Code
• 00-research/ — competitor analysis and user stories
• 01-branding/ — branding stylescape (app name, logo, tone of voice, palette, typography, imagery, motion, UI snippets)
• 02-design-system/ — design system gallery (tokens and nine components in every state, light and dark), with tokens.js, kalo.css and kalo.js as the source of truth
• 03-screens/ — key screens and flows, a clickable prototype of both user stories plus History and Settings
• video-link.txt — link to the video presentation

Every page is a single self-contained HTML file that opens without a login. node build.js regenerates gallery.html and screens.html from the templates in each src/ folder, inlining tokens.js, kalo.css and kalo.js verbatim.

User stories covered

1. As a user, I want to calculate the amount of calories in a dish or a specific product.
2. As a user, I want to find a recipe for a dish that is suitable for me.

Status

The three design deliverables (branding, design system, screens and flows) are complete. A video walkthrough link is in video-link.txt.