Free Keto and Paleo Macro Nutrient Calculator: Technical Specification

1. Overview

A web-based, client-side application that calculates personalized macronutrient requirements based on the Mifflin-St Jeor equation. The tool provides a clean, responsive interface to switch between Ketogenic and Paleo dietary guidelines.

2. Visual Design & UI/UX

• Color Palette:
  • Primary: #2E7D32 (Forest Green) for health and vitality.
  • Secondary: #F5F5F5 (Light Grey) for backgrounds.
  • Accent: #FF9800 (Amber) for call-to-action buttons.
  • Text: #333333 (Dark Grey) for readability.
• Layout Structure:
  • Header: Minimalistic navigation, diet toggle (Keto/Paleo Switch).
  • Main Container: A 2-column layout (Desktop) or single-stack (Mobile).
  • Input Panel: Left side (Desktop) containing form fields for age, weight, height, gender, and activity level.
  • Visualization Panel: Right side (Desktop) containing real-time update graphs (Donut charts for macro percentages).
• Animations:
  • Slide-in transitions between form steps.
  • Dynamic bar chart expansion when the 'Calculate' button is triggered.
  • Smooth number counting animation for caloric output values.

3. Core Features

• Dynamic Diet Toggling: Users can switch between 'Keto' (High Fat, Low Carb) and 'Paleo' (Moderate Fat, Higher Carb) logic at any time.
• Interactive Macro Sliders: Users can manually override recommended macro ratios (e.g., 70% fat / 20% protein / 10% carbs) using sliders, with real-time feedback on total caloric alignment.
• TDEE Engine: Calculation of Total Daily Energy Expenditure adjusted by specific activity factor multipliers (Sedentary to Athlete).
• Export Functionality: Users can download a PDF summary of their calculated goals, including a sample macronutrient breakdown chart.
• PWA Readiness: Service workers implemented for offline access and 'Add to Home Screen' capability.
• Nutritional Education Tooltips: Contextual '?' icons next to input fields explaining why specific data (like activity level) matters.

4. Technical Stack

• Framework: Vanilla JavaScript with modular architecture or lightweight React.
• Charts: Lightweight SVG-based charting library (e.g., Chart.js or D3.js).
• State Management: LocalStorage API to save user inputs across sessions without requiring a database.
• Styling: SCSS with BEM naming conventions for maintainability.

5. User Flow

1. Landing: User is prompted to select a diet strategy (Keto or Paleo).
2. Input: User enters biometric data. Real-time validation ensures logical input ranges.
3. Calculation: On 'Calculate', the UI transitions to display the caloric goal and macro breakdown.
4. Refinement: User adjusts sliders to tweak their preference (e.g., 'more protein, less fat').
5. Output: User views visual breakdown and exports the result as a PDF.