# Fuerte Movement / Project Rebirth — App Color Specification

This is a **color + placement** spec, not code. It tells you which color goes
where and why. Map these values onto whatever variable / token / theme system
you already use — the role names below are just plain-English descriptions of
each spot in the UI, not required variable names.

**Every value here is taken from the approved build**, so the app should end up
matching it pixel for pixel:

- **https://nowfit-app-rebirth.pages.dev** — this is the reference. The sun/moon
  toggle at the top-left of the phone flips light and dark.

The only intentional differences from that build are the three accessibility
corrections in §7. Everything else should match exactly.

The app has **light** and **dark** mode. Every color has a value for each mode;
apply the matching one per theme.

---

## 1. Brand color

| Name | Light | Dark | What it's for |
|------|-------|------|----------------|
| **Brand red** | `#70261A` | `#B86657` | The only loud color. Actions and the one thing you want the eye to land on. |

The dark value is the same red lightened so it reads on a dark surface. It is
not a second brand color — it is the same paint under brighter light. Never use
the light-mode `#70261A` on a dark surface; it turns into a muddy patch.

---

## 2. The one rule (hierarchy)

Three levels of emphasis, applied the same way on every screen:

1. **Brand red = action.** Primary buttons, the Check-In Due banner, the floating
   "+" button, progress ring fill, the selected tab pill, selected segment pills,
   action links ("View All"), count badges ("3/7", "0/4"). If something is
   tappable-and-important, it's the red. Don't use red for decoration — it loses
   meaning.

2. **Headings = the plain text color.** Section titles (Plans, Habits, Logged
   Days, Workout History, settings group labels). These are intentionally NOT red.

3. **Everything else = body and secondary text** on the surfaces.

> Shorthand: **red = "do this", headings = structure, everything else = content.**

---

## 3. LIGHT mode — values & where they go

| Where it goes (UI spot) | Value |
|--------------------------|-------|
| Page background | `#FFFFFF` |
| Cards / panels / list rows / stat tiles | `#F6F6F8` |
| Bottom nav bar background | `#F6F6F8` |
| Unselected segment pills / inset chips | `#EAEAEE` |
| Section headings / subheadings | `#0F0F12` |
| Body text (card titles, primary content, stat numbers) | `#0F0F12` |
| Secondary text (captions, subtitles, stat labels) | `#3C3C43` at **75% opacity** — see §7 |
| Dividers / hairlines | black at **8% opacity**, 1px |
| Primary buttons + Check-In banner (fill) | `#70261A`, label on it `#FFFFFF` |
| Floating "+" button | `#70261A` |
| Action links ("View All"), count badges ("3/7", "0/4") | `#70261A` |
| Selected segment pill | fill `#70261A`, text `#FFFFFF` |
| Unselected segment pill | fill `#EAEAEE`, text `#0F0F12` |
| Selected bottom-nav pill | `#70261A` |
| Bottom-nav label — active | `#0F0F12` |
| Bottom-nav label — inactive | `#3C3C43` at **75% opacity** |
| Progress ring / bar — fill | `#70261A` |
| Progress ring / bar — track | `#FFDED6` |
| Progress ring centre label | `#0F0F12` |

---

## 4. DARK mode — values & where they go

| Where it goes (UI spot) | Value |
|--------------------------|-------|
| Page background | `#0E0E10` |
| Cards / panels / list rows / stat tiles | `#1A1A1D` |
| Bottom nav bar background | `#1A1A1D` |
| Section headings / subheadings | `#F5F5F7` |
| Body text (card titles, primary content, stat numbers) | `#F5F5F7` |
| Secondary text (captions, subtitles, stat labels) | `#EBEBF5` at **60% opacity** |
| Dividers / hairlines | white at **8% opacity**, 1px |
| Check-In banner (fill) | `#A45446`, label on it `#FFFFFF` — see §7 |
| Primary buttons (fill) | `#B86657`, label on it `#FFFFFF` |
| Floating "+" button | `#B86657` |
| Action links ("View All"), count badges ("3/7", "0/4") | `#CC7868` — see §7 |
| Selected segment pill | fill `#B86657`, text `#FFFFFF` |
| Unselected segment pill | fill `#2C2C32`, text `#F5F5F7` |
| Selected bottom-nav pill | `#B86657` |
| Bottom-nav label — active | `#F5F5F7` |
| Bottom-nav label — inactive | `#EBEBF5` at **60% opacity** |
| Progress ring / bar — fill | `#B86657` |
| Progress ring / bar — track | `#492018` |
| Progress ring centre label | `#F5F5F7` |

> **Why the red has two values:** `#70261A` is tuned for white surfaces. On the
> near-black it reads as a dark smudge and any white label on it fails to be
> readable. In dark mode use `#B86657` for fills and `#CC7868` where the red is
> used as text.

---

## 5. Semantic colors (identical in BOTH modes)

These communicate meaning, not brand, so they never change between themes:

| Meaning | Hex |
|---------|-----|
| Protein (macro) | `#F58A3C` |
| Carbs (macro) | `#F5C13C` |
| Fat (macro) | `#3C8BF5` |
| Success / completed | `#34C759` |

⚠️ These are light, saturated colors and they do **not** carry enough contrast on
the white/light-grey surfaces to be identified by color alone. So:

- Always pair a macro swatch with its **text label** ("Protein 148g"), never a
  bare colored bar or dot on its own.
- The number and label text use the normal body / secondary text colors, never
  the macro color.

---

## 6. Streak & habit emoji  ⚠️ don't miss this

This brand replaces the default flame emoji with a **rose**.

- **Fuerte Movement's emoji is** 🌹
- **Replace every flame in the app with the rose.** This is a global sweep, not a
  single screen. Please search for all flame usages rather than patching one spot.
- Confirmed locations so far:
  - **Results area, "Current streak"** — the flame beside the streak count becomes the rose
  - Habits list — the completed-habit marker
  - Any other streak, milestone or completion indicator currently using a flame

The checkbox itself still fills with the brand red and a white check — the 🌹
appears alongside it as the completion/streak marker.

---

## 7. Three corrections to the reference build  ⚠️ read before you copy values

The reference build is right on everything except three spots that fail readable
contrast. The values in §3 and §4 above already include these fixes — this
section exists so you know why they differ from what you see on the preview.

| # | Spot | Build has | Use instead | Why |
|---|------|-----------|-------------|-----|
| 1 | Light-mode secondary text (captions, subtitles, stat labels, inactive nav labels) | `#3C3C43` at 65% | `#3C3C43` at **75%** | 65% measures 3.8:1 against the card. Needs 4.5:1. At 75% it's 5.0:1. |
| 2 | Dark-mode red used as **text** ("View All", "3/7", "0/4") | `#B86657` | `#CC7868` | `#B86657` measures 4.2:1 on a card. Needs 4.5:1. `#CC7868` is 5.3:1. Fills are unaffected — keep `#B86657` there. |
| 3 | Dark-mode Check-In banner fill | `#B86657` | `#A45446` | White label on `#B86657` measures 4.1:1. Needs 4.5:1. On `#A45446` it's 5.3:1, and the banner still reads clearly against the page. |

Nothing else about the build changes.

---

## 8. QA checklist (run per screen, both themes)

- [ ] Screen matches https://nowfit-app-rebirth.pages.dev side by side
- [ ] Red appears ONLY on actions/CTAs — never as decoration
- [ ] Dark mode uses the lightened red, never `#70261A`
- [ ] The three §7 corrections are applied
- [ ] Section headings use the heading color, not the red
- [ ] Cards are clearly separated from the background in both themes
- [ ] Captions and subtitles stay readable on their surface in both themes
- [ ] Every macro swatch has a text label beside it
- [ ] No flame emoji remains anywhere in the app — all replaced with 🌹
- [ ] Current streak in Results shows the rose
- [ ] Flip the theme — nothing disappears or drops below readable contrast