NUTRISYNCBuilders Hub
🏠 🛠
NUTRISYNC · Docs

Design Brief — Open Requests

Fixes that live in Design's compiled web bundle (marketing index.html + web app app.html). We can only patch around these from the integration layer; Design should fix them at the source so they survive each re-export. This is the shareable version of the Open Design requests tracked in the Change Log.

Hand this straight to Design.

Status: items 1–13 closed ✅ (6–13 delivered at source in the 1707_v11.43 pack — marketing copy ×14, PMOS ×14, battery UI, progress card, hero animation, team photos, Edit Period/movement source fixes). New minor: i18n/es.json → app.condLabels.PCOS still says "SOP" at source (embedded ES dict is fixed); our layer patches it — please align in the next export. (previous status line: items 1–5 closed) (1–4 in the 0607v02.53 pack; item 5 error overlay root-caused in v11.1). Item 6 (Multilingual — 14 languages) is NEW and open — see below.


1 · Web app — "Back to site" exit ✅ delivered (0607v02.53)

From inside the web app journeys there's no way back to the marketing site. Add a clear, persistent control in the app header/sidebar (e.g. on the NutriSync logo, or a menu item) that returns the user to index.html. We've added a temporary floating button as a stopgap — please replace it with a proper in-header one.

2 · Web app — back buttons are too small ✅ delivered (0607v02.53)

The in-app back arrows (Edit Period, Edit Health, sub-screens) are tiny and hard to see/tap. Increase the icon size and tap target to a comfortable minimum (~24px icon, ~44px touch target).

3 · Web onboarding — Back on every step + Start over ✅ delivered (0607v02.53)

The onboarding wizard has step-back logic internally, but the Back control is missing/inconsistent on some steps. Please:

(Reference: the mobile onboarding already does exactly this — Back on all steps, hardware-Back handled, and a "Start over" with a confirm.)

4 · Hub navigation — deeper back paths ✅ delivered (0607v02.53)

The sticky room tabs + Investor↔Builder switcher (added in the 05/07 pack) work well. Remaining gap: opening a card/section and using in-page back — or the browser Back button — can still drop the user to the site landing. Please:

5 · Remove the dev error overlay ✅ resolved (v11.1)

Root-caused rather than masked: the overlay only fires on a real asset miss, and the one genuine miss (a typo'd mood-icon, mischeviousmischievous) was fixed at source. A full asset audit confirms zero console errors on both pages. The #__bundler_err{display:none} rule is retained deliberately as a production safety net — a debug overlay should never reach users even if an asset regresses.



6 · Multilingual — 14 languages (NEW · open)

Expand from EN/ES to 14 languages: - European: English (en), Spanish (es), French (fr), Italian (it), German (de), Dutch (nl), Greek (el). - Spain co-official: Catalan (ca), Basque (eu), Galician (gl), Valencian (va, a variety of Catalan), Aranese (oc-aran, Occitan/Aranese). - East Asian: Chinese (zh, Simplified), Japanese (ja).

CJK font requirement: Chinese and Japanese need CJK glyph coverage. Poppins/Inter (Latin) won't render them — on mobile the OS font falls back automatically, but on web Design must add a CJK web-font (e.g. Noto Sans SC / Noto Sans JP) or a robust system-font fallback so the app + marketing render correctly. Greek also needs Greek coverage (already flagged).

Language selector — confirmed UX (marketing nav, web-app login, Settings card): - Two pills, always visible: [English] + [OS language]. - The second pill is the device/OS language when it's in the supported set, and it is the default selection on first load. - Edge case: if the OS language is English or unsupported → fall back to the pair [English] [Español] with English selected. - A dropdown (▾) beside the pills lists the remaining supported languages, alphabetically, to switch to any of them (the chosen one takes the second pill's slot for that session). - Persist the choice in localStorage.ns_locale (shared web ↔ app). Backend values stay canonical English so CAS/analytics are unaffected. - Greek is non-Latin — confirm the chosen fonts include Greek glyph coverage.

Ownership for this feature: - Design — the pill + dropdown UX above, in the compiled bundle; and the professional FR/IT/DE/NL/EL translations for the customer-facing web (app + marketing + prototype), as done for Spanish. - Integration (here) — the same selector logic + OS default in the mobile app; bundling each new language's app strings into the mobile catalogs (a real crossover); extending the founder Translations tool from 2 → 7 languages; integrate.py carries the new locale files and keeps values English-canonical. - Founders — native review/QA of each language before ship. Extra review weight for Basque (eu) and Aranese (oc-aran) — low-resource languages where MT quality is weakest.

Decision (locked): machine-translation first pass → native review, generated per language family: - European + East Asian set (fr/it/de/nl/el/zh/ja): MT from English via Google/DeepL. - Spain co-official (ca/gl/eu/va/oc-aran): MT from Spanish via Apertium (rule-based, offline) — its Spanish↔Catalan/Galician and Occitan(Aranese) pairs are mature; Valencian is produced as the Catalan valencia variety; mainstream engines don't offer Valencian or Aranese at all. Basque is low-resource everywhere → heaviest native review. - A ready-to-run script (mt_translate.py, in the skeletons pack) does both, protecting interpolation tokens + brand nouns and flagging any string where a placeholder didn't survive.

OS-default caveat: device locale detection is reliable for the European set + Catalan/Basque/Galician; Valencian and Aranese rarely surface as an OS locale, so they'll usually be reached via the dropdown rather than the OS-default pill (Valencian devices typically report Catalan).

Skeletons provided (12 files): fr/it/de/nl/el/ca/eu/gl/va/oc-aran/zh/ja.json — same key structure as en.json (613 keys incl. mobile), placeholders. Design/the translator (or mt_translate.py) fills the values in place; the mobile side and the founder tool are ready to receive them.

Mobile side (done, ours): the app already ships the 14-language registry with OS-language default and the two-pill + dropdown selector; each locale falls back to English until its catalog lands. The founder Translations tool is now a 14-language reviewer (pick a language, MT beside English source, per-language export).


Note on workflow: the marketing site and web app are the compiled bundle Design exports. Each of the above should be fixed in the source design, then re-exported as a normal pack — we re-apply our integration layer (integrate.py) on top. See Change Log → Who fixes what (Design vs Integration) for the ownership split.

7 · Marketing copy update — 12 locales (NEW · open, from PO Round 1)

The EN/ES marketing copy changed in three places (PO feedback 14–16 Jul). The other 12 locale files (i18n/*.json → top-level marketing) still carry the old text and need native translations for: - prYears: "Years" → "~4 yrs" (localised) - prC2t: "Later diagnoses & delayed care" → "Later diagnoses than men" - prC2b: → "Diagnosed ~4 years later than men on average — 4.5y later for metabolic conditions, 2.5y for cancer, 5–6y for conditions like ADHD." - casP: append "— and tracks how your alignment improves over time, so you can see the progress you're actually making."

8 · PMOS terminology — 12 locales (NEW · open)

PCOS was officially renamed PMOS (polyendocrine metabolic ovarian syndrome, May 2026). EN + ES labels are updated in the integrated build (stored data keys unchanged). Please add the correct localized PMOS terminology to the remaining 12 locale files (condLabels and any onboarding/marketing mention), reviewed by native speakers where applicable.

9 · Daily Check-in — battery energy UI (W20 · open)

Replace the numeric 1–5 button selector on the "And your energy?" check-in step with the interactive battery component from the Figma wireframe (tap/drag to fill; same coral palette). Acceptance: energy input renders as the Figma battery on web-app check-in; value still maps 1–5 to the existing energy field.

10 · Progress card — current / weekly / best (W22 · open)

Rework the CAS Progress card to the Figma layout showing current score, weekly score, best score (three circular stats), replacing the "First score on the board" placeholder copy. Acceptance: three score states visible per Figma; empty states used when history is insufficient — never fabricated numbers.

11 · Hero/wearables phone mockup — real wireframe + animation (W23 · open)

The "Hello, Olivia" phone mockup should show the actual approved wireframe UI and auto-cycle through states (different cycle days/phases/scores) on a CSS/JS loop. Illustrative only — no live wearable APIs. Acceptance: mockup uses real wireframe frames and animates without user interaction.

12 · Team section — re-export photos with local asset paths (NEW · open)

The three team cards reference stale UUID image files not shipped in current packs (they only render because old deploys left files on the server). Lucía's was mis-cropped (fixed in integration by pointing at assets/team/co3_sq.png). Please re-export the team section using the local assets/team/*_sq.png paths for all three founders so a clean deploy can never 404 them.

13 · Fix at source: Edit Period defaults + movement checklist (W3/W2 · FYI)

Our integration layer now patches these, but please fix in the source so future exports come clean: (a) epFlow/epMood must initialize to null — never pre-selected "Medium"/"Content"; (b) "Mark as done" must not write a checked row per session part (we reduced it to one session row). The full movement redesign is the separate 4-screen rebuild already briefed.

14 · Web app — swap to the approved Nutri avatars (NEW · open)

The founders delivered the official Nutri asset set on 17 Jul (Nutri avatars/ — Avatar_Selection Red/Pink/Yellow/Blue + per-surface daily-tip character variations + onboarding SVGs + streak dots). The mobile app now uses them everywhere; please swap the web app's placeholder circles (Choose your Nutri, Settings, Check-in header, onboarding intro) to the same files so the surfaces match. IG/TikTok footer URLs also still pending (LinkedIn is live).

15 · Marketing footer — QR "scan to open the app" + tighter columns ✅ delivered (v11.44/v11.45)

Founder request (18 Jul): (a) a QR code in the footer's top block, right-aligned — a fourth element beside the PRODUCT / COMPANY / LEGAL columns: white rounded tile ~90–100px, caption "Scan to open the app", encodes https://nutrisynccollective.com/app.html (custom domain, not pages.dev), tile clickable → app.html; (b) tighter footer column gutters — roughly half the current spacing so the columns read as one grid, QR flush right. Store buttons / socials / STAY IN SYNC row unchanged. The integration layer currently injects a provisional small QR next to the store buttons; it will be dropped when the pack ships its own. Acceptance: footer top block = PRODUCT · COMPANY · LEGAL · QR (right), scannable from a desktop screen, custom-domain URL, visibly tighter gutters.

16 · Support email — hello@ → contact@ (NEW · open)

The real support mailbox is contact@nutrisynccollective.com. The pack's deactivation copy (EN+ES, alertDeactivate* strings in app.html) still says hello@. Our layer patches it on every build; please fix at source.

17 · Marketing footer — broken anchors + dead links (NEW · open, live nav review 18 Jul)

Live-DOM audit findings: (a) footer "The science" points to #science and "Our team" to #team, but no elements with those ids exist (only platform and pricing render) — both clicks do nothing. Please give the science and team sections real ids and point the links at them. (b) Seven placeholder links (href="#"): About, Careers, Contact, Privacy, Terms, Your data rights, Cookies. Suggest: Contact → mailto:contact@nutrisynccollective.com now; legal four wired when the approved texts land (privacy draft exists); About/Careers → founders to decide (page vs remove until ready). Acceptance: every footer link either navigates somewhere real or is removed.

18 · Footer QR — re-point to the mobile PWA (NEW · open)

Founder decision (18 Jul): the footer QR should encode https://m.nutrisynccollective.com (the installable mobile PWA — 4th surface) instead of app.html, and the tile click should open that URL too. Our integration layer already overrides both (asset + click); please regenerate qr_app.png and the tile link at source so packs ship it natively.

§19 · Pricing section polish (marketing) — fix at source (19 Jul)

Founder feedback: the pricing block feels bare and the enterprise card flat/unloved; CTAs sit at different heights. We shipped an interim integration patch (ns-pricing-polish) so the live site looks right, but please fix in the canvas so it exports correctly:

  1. CTA alignment bug: both pricing buttons declare margin-top: auto and then a second margin-top: 26px that overrides it — buttons don't pin to the card bottom, so heights diverge. Remove the second margin (our patch gives the features list margin-bottom: 26px and lets auto pin the button).
  2. Enterprise card: flat white on cream reads unfinished next to the dark Premium card. Interim: warm background #FFFDF8 + soft shadow 0 30px 60px -30px rgba(60,30,20,.22). Feel free to design something better (e.g. subtle border accent or brand tint) — parity of visual weight with Premium is the goal.
  3. Feature lists: plain text lines look sparse. Interim: coral/peach ✓ glyph per line. A designed icon set would be nicer.
  4. Optional: the section could carry a third column (Free tier) or a comparison hint — currently two cards float in a wide row and the section feels empty at desktop widths (asymmetry the founders flagged).

§20 · Round-4 wireframe updates (23 Jul)

  1. Progress: add the "View History" button to the wireframe (founder decision f26 — the app keeps it, below the Current/Last/Best stat block).
  2. Re-share the missing Round-4 screenshots (IMG_15xx/16xx were not in the drive drop) if you want them archived with the round.

§21 · Baseline-ladder states (Progress) — ✅ DELIVERED in v11.49 (25 Jul) · follow-up: port the ladder into the web app (app.html) Progress — accepted by Design, next pack

Shipped in v0.14.1 with engineering styling; please spec the designed versions: 1. Stat row 3 states: baseline progress ("n/7", faint), provisional (amber % + "provisional" tag), solid (green %). 2. "Baseline set" celebration card (currently a soft amber banner). 3. CAS comparison line: "vs your first week" (pre-first-cycle) vs "vs last cycle".

§22 — Premium & payments surfaces (from doc 29, pending founder GO)

Wireframes requested, mobile-first, both stores' legal wording accounted for: (1) Paywall — Nutri hero, benefits in cycle language, monthly/annual cards with saving pill, 7-day trial CTA, restore link, auto-renewal legal footer; (2) consolidated locked-state pattern (evolve the Progress yearly lockBox into THE premium lock: blur + lock pill + one-line value + CTA); (3) Settings → Suscripción row with state chip (Free / Premium · renews date / Billing issue); (4) post-purchase success reusing the SuccessRing; (5) web pricing cards connected to checkout; (6) quiet billing-issue banner (Settings only). Reference flows in doc 29 §4-5.