Andris Enins
91cd18aec6
Backend (Spring Boot 3.2 / Java 21 / PostgreSQL): - JWT auth with BCrypt password hashing - User profile + Mifflin-St Jeor BMR calculator - Food search + barcode via OpenFoodFacts API with local cache - Meal CRUD with user data isolation and ownership checks - AI photo analysis (OpenAI Vision) with confidence intervals - AI correction feedback loop for personalisation - Flyway DB migrations + RFC-7807 error responses Mobile (React Native / TypeScript): - Full navigation stack (Auth → Tabs → Home stack) - Design tokens (WCAG 2.2 AA colours, 8px grid, 48px touch targets) - 10 screens: Login, Register, Home, Search, Camera, AI Result, Edit Meal, Daily Details, History, Profile - Confidence-aware calorie display (kcal ± range) - Repeat last meal shortcut + macro tracking Docs: - docs/PLAN-AND-REQUIREMENTS.md - docs/traceability.csv (35 requirements, all Implemented)
5.3 KiB
5.3 KiB
Perfect — let’s turn your wireframes into a Figma-ready design system + component spec that you (or Marta 👀) can directly implement.
This is structured exactly how real product teams define UI systems so you can scale later without redesigning everything.
🎨 1. Design Tokens (FOUNDATION — define this first in Figma)
🟢 Colors
Create Color Styles in Figma:
Primary/Green #22C55E (main action)
Primary/Dark #16A34A
Gray/900 #0F172A (text)
Gray/700 #334155
Gray/500 #64748B
Gray/300 #CBD5F5
Gray/100 #F1F5F9
Background #FFFFFF
Background/Muted #F8FAFC
Error/Red #EF4444
Warning/Yellow #F59E0B
🔤 Typography
Create text styles:
Heading/Large 24px / SemiBold / Line 32
Heading/Medium 20px / SemiBold
Body/Large 16px / Regular
Body/Medium 14px / Regular
Caption 12px / Regular
Number/Kcal 28px / Bold
👉 Font: Inter / SF Pro (mobile-friendly)
📏 Spacing System (8px grid)
4px
8px
16px
24px
32px
48px
🧱 2. Core Components (Figma Components)
🔘 Button Component
Create Component: Button
Variants:
Type: Primary / Secondary / Ghost
State: Default / Pressed / Disabled
Primary Button
Height: 48px
Padding: 0 16px
Radius: 12px
Fill: Green/Primary
Text: White / 16px / Medium
Secondary Button
Border: 1px Gray/300
Fill: White
Text: Gray/900
🧩 Input Field
Height: 48px
Radius: 10px
Border: Gray/300
States:
- Focus → Green border
- Error → Red border
🍱 3. Meal Item Component (CRITICAL)
Component: MealItemRow
Layout:
[ Icon ] [ Name ] [ kcal ]
Height: 56px
Padding: 12px
Name: 16px / Medium
Kcal: 14px / Gray/500
Variants:
Type:
- Default
- Editable
- AI Suggested (badge)
AI Suggested Variant
Add:
[ ⚡ Suggested ]
Background: Light green tint
🍽️ 4. Food Row (search results)
Component: FoodRow
--------------------------------
Chicken breast
165 kcal / 100g
--------------------------------
Height: 64px
Padding: 12px
📊 5. Progress Card (Home TOP section)
Component: CalorieCard
--------------------------------
🔥 1800 / 2200 kcal
Remaining: 400
[ Progress bar ]
--------------------------------
Progress Bar Spec
Height: 8px
Radius: 999px
Background: Gray/200
Fill: Green/Primary
➕ 6. Floating Action Button (FAB)
Component: FAB
Size: 56x56
Radius: 50%
Fill: Primary Green
Icon: + (white)
Shadow:
Y: 4
Blur: 12
📷 7. AI Suggestion Card (MOST IMPORTANT COMPONENT)
Component: AISuggestionCard
--------------------------------
🍚 Rice 150g
🍗 Chicken 120g
Confidence: 78%
[ Edit ]
[ Confirm ]
--------------------------------
Layout
- Vertical stack
- Items = repeatable component
Item inside card
Component: AISuggestionItem
Name (left)
Grams (right)
Confidence (small text)
🎛️ 8. Slider Component (Edit Screen)
Component: PortionSlider
--------------------------------
Rice
150g [——●—————]
--------------------------------
Specs:
- Track height: 4px
- Thumb: 16px circle
- Active color: Green
- Range: 0–500g
📱 9. Screen Layouts (Frame Specs)
🏠 Home Screen
Frame: Home
Padding: 16px
Vertical spacing: 16px
Structure:
[ Title ]
[ CalorieCard ]
[ Meal List (MealItemRow x N) ]
[ Repeat Card ]
[FAB floating bottom right]
📷 AI Result Screen
Frame: AI_Result
Padding: 16px
[ Title ]
[ AISuggestionCard ]
[ Primary CTA: Confirm ]
[ Secondary CTA: Edit ]
✏️ Edit Meal Screen
Frame: Edit_Meal
Padding: 16px
List of:
[ PortionSlider x items ]
Bottom:
[ Total calories ]
Sticky Footer:
[ Save Meal Button ]
🔄 10. Component Hierarchy (IMPORTANT)
App
├── Screens
│ ├── Home
│ ├── AddMeal
│ ├── AIResult
│ ├── EditMeal
│
├── Components
│ ├── Button
│ ├── MealItemRow
│ ├── FoodRow
│ ├── AISuggestionCard
│ ├── Slider
│ ├── ProgressBar
│
├── Tokens
├── Colors
├── Typography
├── Spacing
🧠 11. Interaction States (you must define in Figma)
For each component:
Button
- Default
- Pressed (darker)
- Disabled (opacity 40%)
Food Row
- Hover (if web)
- Selected
AI Suggestions
- Pending
- Edited
- Confirmed
⚡ 12. Developer-Friendly Naming (IMPORTANT for you)
Use naming like this in Figma:
btn/primary/default
btn/primary/pressed
meal-item/default
meal-item/ai
card/calorie
card/ai-suggestion
slider/portion
fab/default
👉 This maps directly to code components later.
🚀 Final Result
With this setup you get:
✅ Scalable design system
✅ Fast implementation (React Native ready)
✅ Clean UX focused on speed
🎯 What I can do next (high value)
I can generate:
👉 React Native component skeleton matching this design system
👉 or real Figma JSON/import structure (so you don’t rebuild manually)
Just tell me 👍