InFit Design System

Modern, Aesthetic, India-First Nutrition Tracking

🎨 Design Philosophy

Visual Principles:

Minimalist & Clean - Remove all unnecessary elements
Visual-First - Images and graphics over text
Effortless - Zero friction, maximum delight
Cultural Resonance - Colors and patterns that feel familiar to Indian users
Accessible - Works beautifully in bright sunlight and low-light conditions

Better than Cal AI:

Warmer color palette (less clinical, more inviting)
Cultural visual language (subtle Indian design motifs)
Superior dark mode with AMOLED optimization
Smoother animations (120fps on supported devices)
Better Tamil/English typography handling

🌈 Color Palette

Light Mode (Primary)

// Background Hierarchy
--bg-primary: #FFFFFF         // Main background
--bg-secondary: #F8F9FA       // Cards, elevated surfaces
--bg-tertiary: #F1F3F5        // Subtle contrast areas
--bg-hover: #E9ECEF           // Interactive hover states

// Text Colors
--text-primary: #1A1A1A       // Headings, important text
--text-secondary: #495057     // Body text
--text-tertiary: #868E96      // Labels, hints
--text-disabled: #ADB5BD      // Disabled states

// Accent Colors (Indian-inspired warm palette)
--accent-primary: #FF6B35     // Primary CTA (warm orange - vibrant but friendly)
--accent-secondary: #F7931E   // Secondary actions (saffron-inspired)
--accent-success: #51CF66     // Success, logged meals
--accent-warning: #FFB627     // Warnings, close to targets
--accent-error: #FF6B6B       // Errors, over limits
--accent-info: #4DABF7        // Info, tips

// Feature-Specific
--macro-protein: #FF6B35      // Protein (orange/red)
--macro-carbs: #FFB627        // Carbs (yellow)
--macro-fat: #845EC2          // Fat (purple)
--macro-fiber: #51CF66        // Fiber (green)
--water: #4DABF7              // Water tracking

// Gradients
--gradient-hero: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%)
--gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 100%)
--gradient-dark: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%)

Dark Mode (AMOLED Optimized)

// Background Hierarchy
--bg-primary: #000000         // Pure black for AMOLED
--bg-secondary: #1A1A1A       // Cards, elevated surfaces
--bg-tertiary: #2D2D2D        // Subtle contrast
--bg-hover: #3D3D3D           // Interactive states

// Text Colors
--text-primary: #FFFFFF       // Headings
--text-secondary: #E0E0E0     // Body text
--text-tertiary: #9E9E9E      // Labels
--text-disabled: #6E6E6E      // Disabled

// Accents (same vibrant colors, work great on dark)
--accent-primary: #FF6B35
--accent-secondary: #F7931E
// ... rest remain same for brand consistency

// Dark-specific
--glass-effect: rgba(255, 255, 255, 0.05)  // Glassmorphism
--border-subtle: rgba(255, 255, 255, 0.1)

📝 Typography

Font Families

// Primary (English + Tamil Support)
--font-primary: 'Inter Variable', 'Noto Sans Tamil', -apple-system, system-ui, sans-serif
  Weights: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)

// Display/Headings
--font-display: 'Bricolage Grotesque Variable', 'Inter Variable', sans-serif
  Weights: 600 (SemiBold), 700 (Bold), 800 (ExtraBold)

// Tamil-optimized
--font-tamil: 'Noto Sans Tamil', 'Mukta Malar', sans-serif
  Weights: 400, 600, 700

// Monospace (for numbers, calories)
--font-mono: 'SF Mono', 'Roboto Mono', 'Courier New', monospace
  Weight: 500 (Medium) - better readability for numbers

Type Scale (Mobile-First)

// Mobile (base)
--text-xs: 0.75rem (12px)     // Tiny labels
--text-sm: 0.875rem (14px)    // Secondary text
--text-base: 1rem (16px)      // Body text
--text-lg: 1.125rem (18px)    // Emphasized text
--text-xl: 1.25rem (20px)     // Small headings
--text-2xl: 1.5rem (24px)     // Card headings
--text-3xl: 2rem (32px)       // Section headings
--text-4xl: 2.5rem (40px)     // Hero text
--text-display: 3rem (48px)   // Large numbers (calorie counts)

// Tablet/Desktop (+1.1x scale)
@media (min-width: 768px) {
  --text-base: 1.0625rem (17px)
  --text-display: 3.5rem (56px)
}

// Line Heights
--leading-tight: 1.2          // Headings
--leading-normal: 1.5         // Body text
--leading-relaxed: 1.75       // Tamil text (better readability)

Usage Guidelines

// Headings
H1: font-display, text-4xl, weight-700, leading-tight
H2: font-display, text-3xl, weight-600, leading-tight
H3: font-primary, text-2xl, weight-600, leading-normal
H4: font-primary, text-xl, weight-600, leading-normal

// Body
Body Large: font-primary, text-lg, weight-400, leading-normal
Body: font-primary, text-base, weight-400, leading-normal
Body Small: font-primary, text-sm, weight-400, leading-relaxed

// Special
Numbers (Calories): font-mono, text-display, weight-500
Labels: font-primary, text-xs, weight-600, uppercase, letter-spacing: 0.05em

🎭 Components

1. Cards (Food Log, Meal Cards)

Style:
  - border-radius: 20px (soft, friendly)
  - padding: 20px (24px on tablet+)
  - background: --bg-secondary
  - border: 1px solid rgba(0,0,0,0.06) (light mode)
  - border: 1px solid rgba(255,255,255,0.1) (dark mode)
  - shadow: 0 2px 8px rgba(0,0,0,0.04) (subtle lift)

Interaction:
  - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
  - hover/active: scale(1.02), shadow: 0 8px 16px rgba(0,0,0,0.08)
  - tap: scale(0.98) (satisfying micro-interaction)

2. Buttons

Primary CTA (Photo Capture, Save)

Style:
  - background: --accent-primary
  - color: white
  - border-radius: 16px
  - padding: 16px 32px
  - font: font-primary, text-base, weight-600
  - shadow: 0 4px 12px rgba(255, 107, 53, 0.3)

States:
  - hover: brightness(1.1)
  - active: scale(0.96)
  - disabled: opacity(0.5)
  - loading: shimmer animation

Secondary (Cancel, Skip)

Style:
  - background: --bg-tertiary
  - color: --text-primary
  - border-radius: 16px
  - padding: 16px 32px
  - font: font-primary, text-base, weight-500

States:
  - hover: background: --bg-hover
  - active: scale(0.96)

Floating Action Button (Quick Add)

Style:
  - size: 64px diameter
  - background: --gradient-hero
  - border-radius: 50%
  - shadow: 0 8px 24px rgba(255, 107, 53, 0.4)
  - icon: 28px, white

Position:
  - bottom: 24px, right: 24px
  - z-index: 100

Interaction:
  - hover: scale(1.1), rotate(90deg) [icon only]
  - active: scale(0.9)

3. Input Fields

Style:
  - border-radius: 12px
  - padding: 14px 16px
  - background: --bg-tertiary
  - border: 2px solid transparent
  - font: font-primary, text-base, weight-400

States:
  - focus: border-color: --accent-primary, background: white
  - error: border-color: --accent-error
  - success: border-color: --accent-success

Label:
  - font: text-sm, weight-600, color: --text-secondary
  - margin-bottom: 8px

4. Progress Bars (Macros, Daily Target)

Style:
  - height: 12px
  - border-radius: 6px (fully rounded ends)
  - background: --bg-tertiary
  - overflow: hidden

Fill:
  - background: gradient based on macro type
  - transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1)
  - height: 100%

Multi-segment (Macros breakdown):
  - protein: --macro-protein
  - carbs: --macro-carbs
  - fat: --macro-fat
  - stacked horizontally with smooth transitions

5. Bottom Sheets (Meal Confirm, Edit)

Style:
  - border-radius: 24px 24px 0 0
  - background: --bg-primary
  - padding: 24px
  - max-height: 90vh

Handle:
  - width: 40px, height: 4px
  - background: --text-disabled
  - border-radius: 2px
  - centered, margin-bottom: 16px

Animation:
  - enter: slide from bottom + backdrop fade-in (300ms)
  - exit: slide to bottom + backdrop fade-out (250ms)
  - spring physics for natural feel

6. Navigation Bar (Bottom)

Style:
  - height: 64px + safe-area-inset-bottom
  - background: --bg-primary (light), --bg-secondary (dark)
  - border-top: 1px solid --border-subtle
  - blur-effect: 20px (iOS-style translucent)

Items (5 items):
  - Dashboard, Log, Coach (voice), Insights, Profile
  - icon: 24px, color: --text-tertiary (inactive)
  - active: color: --accent-primary, scale(1.1)
  - label: text-xs, weight-600, margin-top: 4px

Interaction:
  - tap: haptic feedback (light impact)
  - transition: all 0.2s ease

7. Food Recognition Result Card

Layout:
  - Photo preview (top, 160px height, rounded-top)
  - Detected items list (scrollable)
  - Confidence badge (top-right overlay)
  - Edit controls (inline)
  - Macro summary (bottom, highlighted)

Photo:
  - border-radius: 20px 20px 0 0
  - object-fit: cover
  - gradient overlay: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.3))

Confidence Badge:
  - 95%+: --accent-success, "High Confidence"
  - 70-94%: --accent-warning, "Review Portions"
  - <70%: --accent-error, "Please Verify"
  - font: text-xs, weight-700, uppercase
  - padding: 6px 12px, border-radius: 12px

Item Row:
  - name: text-base, weight-600
  - portion: text-sm, weight-400, color: --text-secondary
  - calories: font-mono, text-lg, weight-500, color: --accent-primary
  - adjust buttons: +/- with haptic feedback

✨ Animations & Interactions

Micro-interactions

1. Button Press:
   - duration: 100ms
   - scale: 0.96
   - haptic: light impact

2. Card Swipe (Delete meal):
   - threshold: 40% of width
   - animation: spring(damping: 0.8, velocity: 0.5)
   - reveal: delete icon with red background
   - haptic: warning (medium impact) at threshold

3. Pull-to-Refresh:
   - trigger: 80px pull
   - indicator: circular spinner (--accent-primary)
   - haptic: light impact on trigger

4. Number Counter (Calorie animation):
   - duration: 800ms
   - easing: cubic-bezier(0.4, 0, 0.2, 1)
   - format: comma-separated thousands

5. Photo Capture:
   - shutter: flash white overlay (100ms)
   - processing: shimmer effect on preview
   - success: scale + fade-in result card
   - haptic: heavy impact on capture

Page Transitions

1. Navigation:
   - type: shared-element (hero) animation
   - duration: 350ms
   - easing: cubic-bezier(0.4, 0, 0.2, 1)

2. Modal/Bottom Sheet:
   - enter: slide-up + backdrop fade (300ms)
   - exit: slide-down + backdrop fade (250ms)

3. Tab Switch:
   - crossfade content (200ms)
   - scale active icon (1.0 → 1.1)

Loading States

1. Skeleton Screens:
   - shimmer: linear-gradient(90deg, --bg-tertiary 0%, --bg-hover 50%, --bg-tertiary 100%)
   - animation: slide 1.5s infinite
   - border-radius: match component

2. Spinner (Full-screen):
   - size: 48px
   - color: --accent-primary
   - style: circular, indeterminate
   - centered with backdrop blur

📱 Layout & Spacing

Spacing Scale

--space-1: 4px
--space-2: 8px
--space-3: 12px
--space-4: 16px
--space-5: 20px
--space-6: 24px
--space-8: 32px
--space-10: 40px
--space-12: 48px
--space-16: 64px

Grid System

Mobile (< 768px):
  - margins: 16px
  - columns: 4
  - gutter: 16px

Tablet (768px - 1024px):
  - margins: 24px
  - columns: 8
  - gutter: 20px

Desktop (> 1024px):
  - max-width: 1200px
  - margins: 40px
  - columns: 12
  - gutter: 24px

Safe Areas

iOS:
  - top: statusbar + notch (dynamic)
  - bottom: home indicator + 16px padding

Android:
  - top: statusbar height
  - bottom: gesture bar + 8px padding

Always respect: env(safe-area-inset-*)

🎯 Screen-Specific Designs

1. Dashboard (Home)

┌─────────────────────────────┐
│ Header                       │
│   Greeting + Date            │ ← text-2xl, weight-700
│   Streak Badge               │ ← --accent-success
├─────────────────────────────┤
│ Daily Progress Card          │
│   ┌─────────────────────┐   │
│   │ Calories: 1450/2000 │   │ ← font-mono, text-display
│   │ [━━━━━━━━░░] 72%    │   │ ← progress bar, --accent-primary
│   │                     │   │
│   │ Macros Breakdown:   │   │
│   │ [Protein][Carbs][Fat]│  │ ← segmented progress
│   └─────────────────────┘   │
├─────────────────────────────┤
│ Quick Add Buttons            │
│ [Water] [Breakfast] [Snack]  │ ← --bg-tertiary cards
├─────────────────────────────┤
│ Today's Meals                │
│   ┌─ Breakfast ─────────┐   │
│   │ 🥣 Idli (3)         │   │ ← meal card
│   │ ☕ Coffee           │   │
│   │           420 kcal  │   │ ← right-aligned, font-mono
│   └─────────────────────┘   │
│   ┌─ Lunch ────────────┐    │
│   │ ...                │    │
│   └─────────────────────┘   │
├─────────────────────────────┤
│ [FAB: +]                     │ ← floating action button
└─────────────────────────────┘
│ Bottom Nav                   │

2. Photo Capture → Confirm Flow

Screen 1: Camera
┌─────────────────────────────┐
│ [X]               [Flash]    │ ← top bar, --bg-primary
│                              │
│                              │
│    [Camera Viewfinder]       │ ← full-screen, 4:3 ratio
│                              │
│                              │
│                              │
│    [○] [Gallery]             │ ← bottom, capture button large
└─────────────────────────────┘

Screen 2: Processing
┌─────────────────────────────┐
│                              │
│    [Photo Preview]           │ ← 50% screen height
│                              │
│  ┌─────────────────────┐    │
│  │ Analyzing...        │    │ ← bottom sheet
│  │ [shimmer effect]    │    │
│  └─────────────────────┘    │
└─────────────────────────────┘

Screen 3: Confirm & Edit
┌─────────────────────────────┐
│ [Back]           [Save]      │
│                              │
│ [Photo - rounded corners]    │ ← 160px height
│  "High Confidence" badge     │
├─────────────────────────────┤
│ Detected Items:              │ ← text-lg, weight-600
│                              │
│ ┌───────────────────────┐   │
│ │ Idli                  │   │
│ │ 3 pieces     [-] 3 [+]│   │ ← adjust portion
│ │                180 kcal│   │ ← font-mono, --accent-primary
│ └───────────────────────┘   │
│                              │
│ ┌───────────────────────┐   │
│ │ Sambar                │   │
│ │ 1 bowl      [-] 1 [+] │   │
│ │                 80 kcal│   │
│ └───────────────────────┘   │
├─────────────────────────────┤
│ Total: 260 kcal              │ ← highlighted card
│ P: 8g  C: 45g  F: 3g         │
│                              │
│ [Add to Breakfast ▼]         │ ← dropdown
│ [Confirm & Save]             │ ← primary button
└─────────────────────────────┘

3. Voice Coach Interface

Floating Assistant:
┌─────────────────────────────┐
│                              │
│  ┌────────────────────┐     │
│  │  🎙️ Listening...   │     │ ← animated waveform
│  │                    │     │
│  │  [waveform bars]   │     │ ← --accent-primary, animated
│  │                    │     │
│  │  "Tap to speak"    │     │
│  └────────────────────┘     │
│                              │
│  Recent Suggestion:          │
│  "You've had 1200 kcal.     │ ← speech bubble
│   Try adding protein-rich   │
│   evening snack."            │
│                              │
│  [தமிழ்] [English]           │ ← language toggle
└─────────────────────────────┘

Conversation mode:
┌─────────────────────────────┐
│ You: "How much protein      │ ← user message (right)
│      have I had today?"     │
│                 ┌──────────┐│
│                 │          ││
│ ┌───────────────┘          ││
│ │ Coach: "You've had 45g   ││ ← assistant (left, --bg-secondary)
│ │ of protein so far. Your  ││
│ │ target is 80g. Try:      ││
│ │ • Boiled eggs (2)        ││
│ │ • Paneer (100g)          ││
│ │ • Greek yogurt"          ││
│ └──────────────────────────┘│
└─────────────────────────────┘

🌍 Cultural Design Elements

Indian Visual Language (Subtle)

1. Patterns (decorative backgrounds):
   - Rangoli-inspired corner accents (onboarding screens)
   - Opacity: 0.03 (extremely subtle)
   - Colors: --accent-primary, --accent-secondary

2. Illustrations:
   - Indian food items (thali, dosa plate, chai cup)
   - Diverse character representations
   - Warm, friendly illustration style (not generic corporate)

3. Iconography:
   - Custom food icons for Indian dishes
   - Rounded, friendly icon style (Phosphor icons base + custom)

4. Color Psychology:
   - Orange/Saffron: Energy, vitality (primary accent)
   - Green: Health, freshness (success states)
   - Avoid: Pure red (too aggressive), clinical blues

Language Support

1. Tamil Typography:
   - Larger line-height (1.75 vs 1.5)
   - Slightly larger font-size (+1px)
   - Proper glyph rendering (Noto Sans Tamil)

2. Bilingual UI:
   - Seamless language switching
   - No layout shift between English/Tamil
   - Numbers always in Western numerals (0-9)
   - Date formats: DD/MM/YYYY (Indian standard)

🎨 Design Improvements Over Cal AI

What We Do Better:

Warmer Color Palette
- Cal AI: Gray-scale, clinical
- InFit: Orange/warm tones, inviting
Better Dark Mode
- Pure black (#000000) for AMOLED battery saving
- Higher contrast ratios (WCAG AAA)
- Optimized for Indian users (late-night logging)
Superior Typography for Bilingual
- Tamil-optimized fonts and spacing
- Better number rendering (monospace for calories)
Smoother Animations
- 120fps on supported devices
- Spring physics for natural feel
- Haptic feedback integration
Cultural Resonance
- Subtle Indian design motifs
- Illustration style that feels local
- Meal timing aligned with Indian patterns
Better Accessibility
- High contrast mode
- Large touch targets (min 44px)
- Screen reader optimization for Tamil
Micro-interactions
- More satisfying haptic feedback
- Delightful animations (number counters)
- Gesture-based shortcuts

📋 Figma Handoff Checklist

For your designer:

🚀 Next Steps

Ready to implement? I can:

Generate Flutter theme code based on this design system
Create reusable widget library (cards, buttons, inputs)
Build example screens to demonstrate the aesthetic
Set up design tokens in code for easy tweaking

Want me to start coding the Flutter implementation?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

InFit Design System

🎨 Design Philosophy

🌈 Color Palette

Light Mode (Primary)

Dark Mode (AMOLED Optimized)

📝 Typography

Font Families

Type Scale (Mobile-First)

Usage Guidelines

🎭 Components

1. Cards (Food Log, Meal Cards)

2. Buttons

3. Input Fields

4. Progress Bars (Macros, Daily Target)

5. Bottom Sheets (Meal Confirm, Edit)

6. Navigation Bar (Bottom)

7. Food Recognition Result Card

✨ Animations & Interactions

Micro-interactions

Page Transitions

Loading States

📱 Layout & Spacing

Spacing Scale

Grid System

Safe Areas

🎯 Screen-Specific Designs

1. Dashboard (Home)

2. Photo Capture → Confirm Flow

3. Voice Coach Interface

🌍 Cultural Design Elements

Indian Visual Language (Subtle)

Language Support

🎨 Design Improvements Over Cal AI

What We Do Better:

📋 Figma Handoff Checklist

🚀 Next Steps

FilesExpand file tree

InFit_Design_System.md

Latest commit

History

InFit_Design_System.md

File metadata and controls

InFit Design System

🎨 Design Philosophy

🌈 Color Palette

Light Mode (Primary)

Dark Mode (AMOLED Optimized)

📝 Typography

Font Families

Type Scale (Mobile-First)

Usage Guidelines

🎭 Components

1. Cards (Food Log, Meal Cards)

2. Buttons

3. Input Fields

4. Progress Bars (Macros, Daily Target)

5. Bottom Sheets (Meal Confirm, Edit)

6. Navigation Bar (Bottom)

7. Food Recognition Result Card

✨ Animations & Interactions

Micro-interactions

Page Transitions

Loading States

📱 Layout & Spacing

Spacing Scale

Grid System

Safe Areas

🎯 Screen-Specific Designs

1. Dashboard (Home)

2. Photo Capture → Confirm Flow

3. Voice Coach Interface

🌍 Cultural Design Elements

Indian Visual Language (Subtle)

Language Support

🎨 Design Improvements Over Cal AI

What We Do Better:

📋 Figma Handoff Checklist

🚀 Next Steps