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)
429 lines
5.3 KiB
Markdown
429 lines
5.3 KiB
Markdown
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 👍
|