# Fermenty — Design Brief for Claude Design (Scheme 2)

> **Paste this whole file into a Claude Design session that has the `fermenty-design` skill available**
> (the skill lives at `+++/Claude Desing Scheme 1/`). It asks Claude Design to **evolve that
> existing scheme into "Scheme 2"** and regenerate every screen of the product — the mobile app
> **and** the web/backend layout — reflecting all the functionality we have built since Scheme 1
> was authored. The output (HTML screens + any new component specimens) comes back to the dev
> team to translate into the Laravel/Blade app.

---

## 0. What to do, in one line

Take the **`fermenty-design` skill (Scheme 1)** as the canonical foundation — keep its voice, tokens,
fonts, palette, status language and component primitives — and **produce a refreshed, complete set of
screen designs ("Scheme 2")** for the product as it exists *today*, including the new **Recipe layer**,
**fermentation-process classification**, **profile preferences**, **redesigned dashboard**, the
**reworked batch screen**, the **recipe-creation wizard**, and the **Laboratorio/Tools** area.

Deliver static HTML artifacts (mobile app + web dashboard + admin/backend), copying assets out of the
skill, exactly as the skill's `SKILL.md` instructs. Where a new pattern is needed (mood/feedback
smileys, category-colored rings, inline quick-log bar), design it in the existing visual language and
add a small specimen card so we can reuse it.

---

## 1. Keep from Scheme 1 (non-negotiable foundations)

Everything in `readme.md` / `SKILL.md` still holds. Specifically reuse, do not reinvent:

- **Direction:** "Living minimalism" — calm, plain, rounded, artisanal; warm paper grounds + culture green; lime & gold as *accents only, never fields*.
- **Voice & copy:** Spanish-first, **sentence case everywhere**, short, sensory, encouraging. No emoji in system UI. Numbers/units in the data font (`3,4 pH`, `21,5 °C`, `Día 6 de 14`).
- **Type:** Comfortaa (display) · Raleway (UI/prose) · Inter (data/measurements). Tokens in `tokens/typography.css`.
- **Color tokens:** the full `tokens/colors.css` set (`--paper-*`, `--ink-*`, `--green-*`, `--lime-*`, `--gold-*`, `--teal/amber/rust`), and the **fermentation status language** (`active` gold / `ready` green / `resting` teal / `watch` amber / `spoiled` rust) — always via `StatusPill`.
- **Spacing/corners/shadows/motion:** 4px scale, rounded cards (`--radius-lg` 22px), hairline borders do the work, flat warm low-contrast shadows, nothing bounces, green focus ring.
- **Components** (`window.FermentyDesignSystem_*`): Button, IconButton, Badge, Card, Avatar, Input, Switch, SegmentedControl, StatusPill, MetricStat, **ProgressRing**, BatchCard. Reuse these; extend only where this brief calls for it.
- **Layout frames:** mobile = single scrolling column, 16px gutters, bottom tab bar; web/admin = fixed ~232px sidebar + fluid canvas, 28px padding.

**Iconography note for production reality:** the running app uses **FontAwesome 6** for nav/UI icons (Scheme 1 ships a Lucide subset as a stand-in). Design with the skill's Lucide set as usual, but keep icon *meanings* mappable to FA6 (calendar, flask/vial, list, gauge, bell, user, leaf, etc.). The brand still wants custom artisanal icons eventually.

---

## 2. What changed since Scheme 1 was authored (the "why" behind Scheme 2)

Scheme 1 was designed from the brief, before the data model matured. The product now has a real
architecture that the screens must reflect:

### 2.1 Guide → Recipe → Ingredients/Steps (the big one)
- A **Recipe** (not a Guide) is now the **user-facing object and the starting point of a batch**.
- **Guides** are *admin scaffolding* (the canonical process for a ferment type); **Recipes** are what users see, choose, and (later) create/fork/share.
- A Recipe **owns its own steps and ingredients** (preloaded from a guide, then fully editable). Each step has: number, title, longer description, ingredients, `día desde`–`día hasta`, optional flag, "notify on complete" flag, and free-form **actions**.
- Starting a batch **snapshots** the recipe's steps + ingredients into the batch, so a running batch is self-contained and editable without touching the shared recipe/guide.
- **Catalogue is recipe-first:** in the free version there is roughly **one recipe per guide** (e.g. Kombucha clásica, Kéfir de agua, Cerveza de jengibre, Vinagre, Encurtidos).

### 2.2 Fermentation-process classification (a layer above ferment types)
- Ferment types are grouped by **fermentation process**: **Láctica, Acética, Alcohólica, Butírica** (admin-manageable).
- Each category has a **brand color** used for **progress rings and accents**:
  - Láctica `#3A7A22` (green) · Acética `#C9621A` (amber/orange) · Alcohólica `#8A5BB0` (purple) · Butírica `#B0843A` (ochre).
- The catalogue (Recetas) is **grouped by category**; the batch screen's ring is **tinted by the batch's category color**.
- **Design tokens to add:** `--cat-lactica`, `--cat-acetica`, `--cat-alcoholica`, `--cat-butirica`. These coexist with the status colors — status pills still use the status language; the *progress ring & category headers* use the category color.

### 2.3 User profile preferences (new)
Profile now stores: **fermenter level** (Principiante / Apasionado / Pro), **favorite ferment**, **default language** (es/en/de), **notifications allowed**, **newsletter opt-in**, **profile public** — all default on. These need UI on the profile edit screen and badges on the profile view.

### 2.4 New information architecture / menu
Main menu order (with FontAwesome icons): **Inicio/Dashboard → Recetas → Planificador → Mis lotes → Herramientas (Laboratorio) → Perfil**, plus **Comunidad** (present, lower priority). "Recetas" replaces the old "Catálogo." Reconcile this with Scheme 1's 5 mobile tabs (Inicio · Fermentos · Plan · Herramientas · Perfil): the new tab set is **Inicio · Recetas · Plan · Herramientas · Perfil**, with **Mis lotes** reachable from Inicio and **Comunidad** secondary.

---

## 3. Mood / feedback scale (new pattern to design)

We collect **per-step feedback** ("¿cómo va?") as an optional smiley + note when a user completes a step,
and we surface moods in the batch history. Design a small **mood scale** in the brand's calm style
(stroke icons, no loud emoji), e.g. 5 levels — *mal · regular · normal · bien · genial* — using the
status/accent palette (rust → amber → ink → green → lime). Provide:
- an inline **mood picker** (row of 5 selectable faces) for the "completar paso" modal, and
- a small **mood chip** for showing a recorded mood in the events history.

Keep it sentence-case, plain, no childish emoji.

---

## 4. Complete screen inventory to design

Group the deliverables as **A) Consumer mobile app**, **B) Public/marketing web**, **C) Admin/backend (web dashboard)**. For each screen: design the default state **plus the important empty/loading/locked states** noted. Spanish copy.

### A) Consumer mobile app (phone, ~440×880)

1. **Bienvenida + tour** — keep Scheme 1's onboarding (deep-green ground, subtle lime/gold bubble glows).
2. **Inicio (Dashboard)** — *reworked*:
   - A **card per active batch**: cover image (recipe → ferment fallback), **circular % ring tinted by the batch's category color**, batch name, day line (`Día 6 de 14`), status pill, and any **due alerts** (upcoming/unchecked notifications) on the card.
   - A **suggestion card** ("¿Probamos algo nuevo?") recommending an untried ferment, preferring the **same fermentation category** as the user's latest batch.
   - Eyebrow → title rhythm; "Hoy" nudge retained.
3. **Recetas (catalogue)** — *new shape*: recipes **grouped by fermentation category** (category header in its color), each a readable **recipe card** with image, short descriptor, status/level, and a direct **"Empezar"** CTA. Premium recipes shown locked.
4. **Receta (detalle)** — readable recipe: hero image, category, yield/base, ingredient list, the step list (with días, optional markers), and **"Empezar"** that deep-links to batch creation **with this recipe preselected**.
5. **Crear lote (batch create)** — *recipe-first*: a grid of **recipe cards with images** (no guide-first step). When arrived via a recipe deep-link, that card is **preselected/collapsed**; user confirms name/start date/yield and starts.
6. **Lote (batch show)** — **the most important redesign; folds in task "C2".** Sections, top to bottom:
   - **Header:** a round **progress ring in the category color** showing process **days/%**; batch name + status pill; the day line. A **"Ver paso N: <title>"** button that jumps to that step's anchor (the header no longer carries the advance button; the real "Completar paso" lives on the step).
   - **Pasos (steps):** each step is a card anchored by step number, showing title, description, días, ingredients, actions. The **current step** shows **"Completar paso"** *with a row of mood smileys beside it* → tapping a smiley (or the button) opens a **"completar paso" modal**: optional note + selected mood, save & close (feedback captured per step).
   - **Ingredientes:** editable on the running batch. **Inline click-to-edit** on the step's ingredient line (tap an ingredient → edit name + amount in place) is the primary path. A **full ingredients page** exists for authoring/bulk. The standalone ingredients *card* shows **only on ≥large screens** (`d-none d-lg-block`); on phone, editing happens inline within the step.
   - **Añadir log de hoy:** replace the old button with a compact **icon bar** (nota · pH · temperatura · medición…) that **opens the matching form inline below** (not a separate modal page).
   - **Historial de eventos:** an aggregated feed of **all actions** — measurements/logs, **moods/smileys**, and **alerts** (upcoming + unchecked notifications). **Do not** show a "Paso completado" entry. Each row: icon, plain label, value/mood chip, timestamp in data font.
   - **Cronología (timeline):** the chronological activity timeline embedded **below the history**.
   - **Otras acciones:** **Pausar lote** (with confirm), reanudar, descartar — moved out of the header into this section.
7. **Asistente (guided run)** — keep Scheme 1's step-by-step assistant with locked **Consejos Pro**; align it to the new step model (per-step actions, días, mood feedback).
8. **Plan / Planificador** — chronological **activity timeline** + **avisos** (notifications), reconciled with the batch timeline pattern above.
9. **Mis lotes (list)** — list of batches using `BatchCard`, grouped/filterable by status; ring tinted by category.
10. **Herramientas (Laboratorio)** — tools hub shell: live **calculadora de salmuera/brine**, fundamentos, cursos (some locked/Premium). Design the hub grid + one tool detail (brine calc).
11. **Perfil** — *with new preferences*:
    - **View:** avatar, name, **fermenter level badge**, **favorite ferment** badge, plan, link to web.
    - **Editar (Preferencias card):** fermenter level (segmented Principiante/Apasionado/Pro), favorite ferment (select), default language (es/en/de), and switches for notifications, newsletter, perfil público.
12. **Premium (paywall)** — keep Scheme 1's paywall, reachable from Perfil and any locked item.
13. **Notificaciones** — list of avisos with read/unread, mark-all-read.
14. **Comunidad** (secondary) — feed of posts (user-generated emoji allowed here only), post detail with comments + likes, create post.

### B) Public / marketing web
15. **Landing / welcome**, **FAQ**, **Privacidad**, **Términos**, **Premium**, **Newsletter** (subscribe/confirm/unsubscribe) — refresh in Scheme 2 styling. Lower priority than app + admin, but include the landing hero.

### C) Admin / backend (web dashboard, ~1280×800; sidebar + canvas)
Refresh the web-dashboard frame from Scheme 1 and design these admin screens:
16. **Admin dashboard** — overview stat tiles + recent activity.
17. **Clasificación** (fermentation categories) — list with each category's **color**, description, order, and the **recipes applied to it**; create/edit form with a **color picker** (default `#3A7A22`).
18. **Fermentos** (ferment types) — table with **thumbnail image**, a sortable **"Categoría"** column, batches count; create/edit form with **category select** + image upload.
19. **Guías** — list + guide detail (steps, ingredients) — admin scaffolding.
20. **Recetas (global list)** — all recipes with **filters by category and ferment type**, official/official badges, rating/likes/times-brewed.
21. **Asistente de recetas (wizard)** — *new, important*:
    - **Paso 1 — Datos / BASE:** select a guide → inherits classification + structure + basics (name, yield, image, status).
    - **Pasos 2..N — Crear paso N:** per-step **separate screen** with a **stepper nav bar `BASE › 1 › 2 › 3 › … › FINISH`**; each step screen edits title, description, ingredients (add/edit/remove inline), `día desde`–`hasta`, **paso opcional** toggle, **push notification al completar** toggle, and **acciones** (admin: free-text "tipo | descripción" lines; future user/Premium: modal form). After saving a step, **advance to the next**. Steps can be **added/removed/reordered** freely.
    - **FINISH:** review + publish.
22. **Usuarios** — list + detail; change plan, change status.
23. **Newsletter (admin)**, **Notificaciones (reglas)**, **Login logs** — refresh in Scheme 2 styling.

---

## 5. New/extended design tokens & components to deliver

- **Category colors:** `--cat-lactica:#3A7A22; --cat-acetica:#C9621A; --cat-alcoholica:#8A5BB0; --cat-butirica:#B0843A;` + a small specimen card.
- **ProgressRing usage variant:** ring colored by category (pass color in), center shows `%` in data font; used on dashboard cards and the batch header.
- **MoodScale / MoodChip:** the 5-level feedback faces (picker + chip) described in §3.
- **InlineEditField:** the tap-to-edit ingredient pattern (label → inline input + amount + unit).
- **QuickLogBar:** the compact icon bar that expands a form inline.
- **CategoryHeader:** catalogue section header in the category color.
- **WizardStepper:** the `BASE › 1 › 2 › … › FINISH` segmented nav.
- **BatchCard (extend):** add cover image + category-tinted ring + inline alert badge for the dashboard variant.

Add each as a `.prompt.md` + specimen card where practical, following the skill's existing component conventions, so they fold back into the design system.

---

## 6. Constraints & reminders for Claude Design

- **Spanish-first** copy, sentence case, no emoji in system UI (Comunidad user posts excepted).
- Respect the **status vs category** color split: status pills use status colors; rings/category headers use category colors.
- **Responsive:** phone-first for the app; the standalone ingredients card and other density-heavy panels are **≥lg only**.
- Reuse tokens — **no new arbitrary hex** beyond the four category colors above.
- Output: copy assets out of the skill and produce **static, viewable HTML** per screen (and component specimen cards for the new patterns), as `SKILL.md` instructs. Keep them offline-openable like the existing `Fermenty App (offline).html` / `Fermenty Web Dashboard (offline).html`.
- Treat this as **Scheme 2**: keep Scheme 1 intact as the base; deliver the refresh in a parallel set we can diff against.

---

## 7. Hand-back

Return: (a) the HTML screens grouped App / Web / Admin, (b) the new specimen cards, (c) a short note of
any token additions. The dev team will then feed specific screens back to the Laravel/Blade
implementation one area at a time (starting with the **batch show** screen, which is the highest-value
redesign and currently half-built in code).