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 👍