formulation/docs/site-spec/SITE_SPEC.md

meez Recipe App — Site Specification (Phase 1 Discovery)

Source of truth: this document + reference screenshots under generated/site-spec/screenshots/. All colors/typography/geometry are exact computed values (CSS px at 1440×900 unless noted). Phase-1 scope: frontend UI discovery only. Network/API contracts intentionally excluded (user decision).

---

1. Site Overview

• App: meez — restaurant recipe management web app (authenticated SPA).
• Base: https://app.getmeez.com/; entered at home?type=recipe&orderBy=last_viewed&direction=desc (no redirect).
• Framework: React SPA in #root, Material UI 5 components (MuiGrid2, MuiAppBar, MuiChip, MuiTab, MuiDialog, MuiMenu…) with JSS-generated class names (jssNNNN), webpack chunk bundles (main.ddfec8b1.js, NNNN.hash.chunk.js). No common framework globals detected; bundle naming is webpack.
• Extensions/widgets observed: Intercom chat iframe, candu A/B component (<candu-component>), Google Tag Manager (gtm.js), Recurly billing (recurly.js, recurly.css), Google Material Icons font.
• Auth: logged-in session (owner identity shown as initials NW in list Owner columns). Title format: {Page} - meez (list pages), {RecipeName} - Recipe - {Folder} - meez (editor).
• Core concept: single "home" list view switched by type query param: recipe, ingredient, recipebook, doc, purchased_item. Recipe creation is a wizard (name → paste ingredients/prep → editor). Recipe editor is a two-column workspace with tabs.
• Upgrade-gated features (never attempted, per user directive): Menus nav tab ("Upgrade" pill), New→Menu, New→Count Sheet, editor Nutrition tab ("Upgrade" suffix). Purchase-import services (Invoice Processing, Inventory integrations) mentioned in help copy as contact-gated.

2. Route Inventory

All list routes share the same shell (header + nav pill row + list). URL pattern: /home?type={type}&orderBy={orderBy}&direction={dir} (+ optional query=).

Route	URL (type=)	Purpose	Major unique components	Notes
Recipes	recipe	Recipe list	list rows (thumb, name, owner, last-viewed), row kebab menu, sort combobox, search	orderBy: last_viewed, name, date_created, modified, shared; 3-4 recipes
Ingredients	ingredient	Ingredient library	section header "Needs Attention:", svg type icons, Filter chip shows count (1)	19-20 items; older rows show date (Aug 12, 2026) instead of relative time
Menus	—	Menu builder	—	GATED (Upgrade pill next to nav label); route not accessed
Recipe Books	recipebook	Recipe book collections	5-column grid incl. "Recipes/Docs" count column	rows: "Sample Recipes" (2), "Get Started With Meez" (4)
Docs	doc	Help documents	4-column grid, no Owner values	meez-authored docs (FAQ, how-tos)
New Purchase Items	purchased_item	Purchase imports needing attention	empty state: success message + "Tool Tip / Purchase items" help panel	no items → explanatory card; sort defaults to created
Recipe editor	/recipes/{id}/steps?conceptId={id}	Recipe editing workspace	2-column editor, tab bar, ingredient table, prep method cards, additional details	title {name} - Recipe - {folder} - meez; see §8

Navigation: header has logo/back icon (x32), "All" text tab, search box, right-side "New" cluster (add icon + contained "New" button); pill-tab row below lists the six library types with live count badges. New button opens a menu: Recipe, Recipe Book, Menu (gated), Doc, Count Sheet (gated), Import, Export.

3. Global Design System

• No CSS custom properties on :root (design tokens are hardcoded MUI/JSS values).
• Body: bg #F3F3F3, text #050841, font CircularCustCapNum, 16px, weight 300, line-height 20px, margin 0.
• Header (MUI AppBar): bg #FBFBFB, height 80px, sticky, z-index 1100.
• Primary brand blue: #3D5DF6 — contained buttons, links, selected dropdown items, active sort.
• Navy: #050841 (body text, Share button bg), #202962 (breadcrumb text, 12px/400).
• Secondary gray: #A5A9C1 (icon buttons); header icon color rgba(0,0,0,0.54); tab text #3C4679 (500 weight).
• Active pill bg: #DBE4FF; active editor tab bg #F1F5FE; active row/select text blue.
• Radius scale: pills 100px (buttons) / 99px (nav chips) / 20px (chips) / 10px (dialogs) / 4px (tabs, selects) / 50% (icon buttons).
• Shadows: MUI elevation system (dialogs: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12); backdrop rgba(0,0,0,0.5)).
• Buttons: default text 16px/500; contained = blue bg, white text, pill; icon buttons 24-40px, radius 50%.
• Spacing rhythm (repeated values): 8px (row grid gap), 12px (chip/button padding X), 16px (menu option padding, card margins), 20px, 24px, 32px, 40px (dialog padding 30px 38px), 80px, 160px (content column margins at ≥1440).

4. Typography

Primary family: CircularCustCapNum (custom, all UI text; Arial fallback for some icon buttons; Roboto also loaded for MUI defaults; Material Icons font for glyph icons).

Use	Size	Weight	Line-height	Color	Notes
Body/default	16px	300	20px	#050841
Header buttons ("All", "New", "Done")	16px	500	—	#3C4679 / white / gray
Nav pill labels	16px	400	30px	rgba(0,0,0,0.87)	h40 pills
List titles (links)	16px	300	20px	#3D5DF6 (blue link)
List secondary (owner, time)	16px	300	20px	#3D5DF6 / #050841	time-ago is a blue link
Sort combobox	14px	400	23px	#050841
Editor tab labels	15px	400	—	#050841	active tab bg #F1F5FE
Editor input values	14px	400	—	rgba(0,0,0,0.87)
Breadcrumb	12px	400	16px	#202962
Section headers ("Needs Attention:")	16px	300	—	#050841

Letter-spacing normal throughout; no text-transform observed.

5. Colors

Token	Value	Usage
Ink	#050841	body text, Share button bg
Primary blue	#3D5DF6	contained buttons, links, selected states
Page bg	#F3F3F3	app background
Surface	#FFFFFF	rows, cards, dialogs
Header bg	#FBFBFB	app bar, list header row
Active pill	#DBE4FF	selected nav chip
Active tab bg	#F1F5FE	selected editor tab
Tab text	#3C4679	header "All" tab, unselected
Icon gray	#A5A9C1	icon buttons, filter icons
Icon faint	rgba(0,0,0,0.54)	header icon buttons
Disabled	#DADADA text on #40B49A bg	Done button (disabled state)
Success green	#40B49A	Done button bg
Row divider	#F3F3F3	row bottom border (0.74px)
Backdrop	rgba(0,0,0,0.5)	modal scrim

6. Spacing / Layout Conventions

• Content column: at 1440px, list column is 1120px centered (x=160, margins 160). At ≤1024: margins collapse to 24px (list x=24, w=1057); at ≤768: full-width (x=0-24); at 390: x=16, w=358.
• Grid lists: CSS grid rows, 8px gap; list header row 57px bg #FBFBFB; data rows 57px white, bottom border #F3F3F3; cells vertically centered.
• Recipe list columns (1120 total): 36 (checkbox) | 112 (Type thumb 24×24) | 560 (Name) | 0 (hidden) | 112 (Owner initials) | 224 (Last viewed) | 36 (actions 24×24).
• Recipe Book columns: 56 | 84 | 516 | 144 (Recipes/Docs count) | 100 | 172 | 48.
• Header: logo icon 28×28 at x32 y26; "All" tab x72 y18; right cluster New icon+button at x1258/1274 y24 (each 32px tall); nav pill row y≈106 (h40, gap 8px); Filter chip right-aligned (h44).
• Editor: two columns — ingredient table left (x125-460), prep/details right (x≈778+). Tab bar h48 at y48. Header h80.
• Padding norms: chips 8px 16px 8px 12px; dialog 30px 38px; menu 8px 0; menu options 6px 16px; contained buttons 0 12px.

7. Reusable Components

• Nav pill chips (MuiChip-filled/outlined): h40, radius 99px, label 16px/400; active bg #DBE4FF; live count in label (e.g., "Recipes 4"); Filter chip variant h44 radius 20px, icon+label.
• List row: checkbox (20×20 MUI) + type icon (24×24, svg for ingredients) + name link + owner initials (20px) + time link + 2 icon buttons (24×24, radius 50%): favorite/open + kebab.
• Row kebab menu (MUI Menu, portal): width 275, options 16px/300 pad 6px 16px; items: Add to Recipe Book, Grant view access, Send a copy, Make a copy, Export, Print, Delete.
• Sort combobox (MUI Select): 14px, pad 4px 32px 5px 0; dropdown 196w; selected option blue 400.
• Search textbox: 16px input, pad 8px 0 6px, placeholder "Search "; commits on Enter → query= param; count badges live-filter.
• Buttons: contained (blue pill, 16px/500), text, icon (radius 50%); "New" = add icon + contained button pair; "Done" = green pill disabled until saved state; "Share" = navy pill (#050841).
• Dialogs: 700w radius 10px (create wizard), 900w (steps wizard); white bg, pad 30px 38px; backdrop rgba(0,0,0,0.5); footer buttons Cancel (text) + primary pill (250×48).
• Form fields: text inputs 14px, pad 10px 12px, borderless underline (MUI); FilledInput variants in editor ("Qty", "Unit", "Station Name", "Tag Name" placeholders).
• Empty state card: white, pad 0 40px 80px, title + help text (purchase items page).
• Editor controls: "Add Header"/"Add Note" buttons, "Bulk Add"/"Add Ingredients" (outlined, opens textarea dialog 583×320), Total Yield Qty+Unit inputs, toggles "Auto calculate total yield", "Calculate %".

8. Per-Route Specification

8.1 Recipes list (/home?type=recipe)

Header + nav + list as §6. Row: checkbox | Type thumb (24×24) | Name (blue link) | Owner initials | relative time link | action icons. Sort options: Last Modified, Last Viewed, Date Created, Last Modified, Date Shared (direction arrows keyboard_arrow_up/arrow_downward toggle asc/desc). Search filters live with query= param; nav badges update (Recipes 1…). Screenshots: home@1440w.png (3 rows), home@1440w-sort-open.png, home@1440w-row-menu.png, home@1440w-search.png, home@1024w.png, home@768w.png, home@390w.png.

8.2 Ingredients (/home?type=ingredient)

Same shell; section header "Needs Attention:" (16px/300, y189); rows have SVG type icons; Filter chip shows (1). Older items show Aug 12, 2026 date format. Screenshots: ingredients@1440w.png, ingredients@1024w.png, ingredients@768w.png, ingredients@390w.png.

8.3 Recipe Books (/home?type=recipebook)

5-column grid incl. Recipes/Docs count; loading state shows "Loading...". Screenshots: recipe-books@1440w.png, recipe-books@390w.png.

8.4 Docs (/home?type=doc)

4-column grid; meez-authored docs; no Owner values. Screenshots: docs@1440w.png, docs@390w.png.

8.5 New Purchase Items (/home?type=purchased_item)

Empty state: "Your purchase items are up to date!" + help panel (upload template / Invoice Processing Service / Inventory integrations — services contact-gated). Screenshots: purchase-items@1440w.png, purchase-items@390w.png.

8.6 Recipe create wizard

1. Create Recipe dialog (700×636, r10): fields Recipe Name (583×40, 14px), Owner radio "Personal" (disabled for single-user), Folder radio "First Concept", "Add to Recipe Book (optional)" search (placeholder "Search existing recipe books or create new"); buttons Cancel + Next (250×48 blue pill). Screenshot: recipe-create-modal@1440w.png.
2. Add Ingredients & Prep Method dialog (900×742): Ingredients textarea (387×320) + Prep Method textarea, tip text "(note)" syntax and "To Garnish:" header syntax; buttons Skip + Add Recipe. Screenshot: recipe-steps-wizard@1440w.png.
3. On Add Recipe → /recipes/{id}/steps?conceptId={id} editor.

8.7 Recipe editor (/recipes/{id}/steps)

• Header: logo/back icons, breadcrumb Home / First Concept / Recipes (12px/400 #202962), Done (green pill #40B49A, disabled in initial state), Share (navy pill #050841), New cluster, kebab.
• Tab bar (h48, y48): Prep Method (active bg #F1F5FE), Cost, UoM Equivalency, Nutrition Upgrade (gated). At ≤768 an Ingredients tab is prepended; at 390 tabs shrink to 70w each in a scrollable bar.
• Left column — ingredient table: header "Total Yield" with toggles "Auto calculate total yield" / "Calculate %"; columns Qty (83w) / Ingredient (220w, autocomplete → library match, e.g. "Test Flour"→"Flour") / Notes (232w); tip "Enter to complete, Tab to add a note"; Add Header / Add Note buttons; Add Ingredients (outlined) opens textarea dialog.
• Right column: "Add Cover Image" (landscape recommended), Prep Method section (step cards: "1." + "Drag & Drop or click to add an image or a video — File should not excede 200mb or 2 min"), Add Header / Add Note.
• Additional Details (right, y≈791): Shelf Life, Station Name input, Tag Name input, Owner accordion (radio "First Concept").
• Cost tab: adds "Calculate %" toggle context; UoM Equivalency tab: "U of M Equivalency" rows (Weight = / Volume = / Each =), help text, "Standard Weight - Volume Conversion" toggle (locked to 8oz = 1 cup when on).
• Screenshots: recipe-editor@1440w.png, recipe-editor-cost@1440w.png, recipe-editor-uom@1440w.png, recipe-editor@1024w.png, recipe-editor@768w.png, recipe-editor@390w.png.

9. Responsive Behavior

Viewports emulated (CDP): 1440×900, 1024×768, 768×1024, 390×844 (real window 1157×744 @ dpr 1.35; captures at physical 1296×810 for 1440).

Breakpoint	Header	Nav	List column	Notes
≥1440	80px, one row	pill row y106	x160, w1120
1024	80px	y106	x24, w1057 (margins 160→24)	Filter chip stays right
768	120px (wraps to 2 rows)	y144	x0, w768 full-bleed	editor: Ingredients tab appears; Filter moves to header row (y76)
390	140px (3 rows)	y148, horizontally scrollable (chips ≥390 wide)	x16, w358	editor tabs 70w scrollable; New cluster icon-only (no text button found in header at 390)

Inferred breakpoints from layout transitions: ~1200 (margins collapse), ~900 (header grows, nav row wraps), ~600 (full-bleed list, compact tabs).

10. Interaction / State Behavior

• Search: type + Enter → URL query= param, list filters, count badges update, sort resets to unsorted; clearing restores.
• Sort: combobox pick → list reorders; arrow icons toggle direction (direction=asc/desc); URL reflects orderBy/direction.
• Row kebab: menu with 7 actions (Add to Recipe Book, Grant view access, Send a copy, Make a copy, Export, Print, Delete). Delete NOT exercised (only for test recipe cleanup).
• Row hover: second action icon reveals (24×24 buttons, both present in DOM).
• New menu (MuiListItemButton list, 375×348): Recipe / Recipe Book / Menu (gated) / Doc / Count Sheet (gated) / Import / Export; opens create wizard (Recipe) — DOM click required; real-mouse clicks failed to activate popover items on the relay (implementation detail for automation).
• Create wizard: modal steps; "Next" advances; "Add Recipe" creates draft and opens editor at /recipes/{id}/steps?conceptId={id}.
• Editor dirty state: Done button disabled initially (green #40B49A + gray text); enabled state not observed (not triggered).
• Ingredient autocomplete: typing in Ingredient cell matches library ingredients (e.g., "Test Flour" → "Flour"); Qty/Unit cells per row ("g", "ea").
• Filter chip: no observable panel opened via mouse on relay; documented as inert in this environment (possible relay input quirk) — flag for manual verification.
• Loading states: list routes show "Loading..." while fetching; empty states (purchase items) show guidance card.
• Dialogs: ESC and Cancel close; backdrop rgba(0,0,0,0.5) click closes (standard MUI).

11. Asset Inventory

Asset	Source/type	Dimensions	Where used	Behavior
CircularCustCapNum	fonts.css (custom @font-face)	—	all UI text	primary font
Material Icons	Google icon?family=Material+Icons	—	glyph icons	icon font
Roboto	MUI default	—	fallback
MUI SvgIcon set	inline SVG, viewBox 0 0 24 24	20 (small) / 24 (medium)	all controls (add, kebab, arrows, filter, share)	MuiSvgIcon-root classes; icon font Material Icons also used
Logo	header icon button (svg) + "FC" text in editor breadcrumb	28×28 / 27×27	app bar left
Thumbnails	list Type column	24×24 div/svg	rows	ingredients = svg icons
Cover image	user upload (editor "Add Cover Image", landscape)	up to 200MB / 2min video	editor right column	drag&drop or click
Intercom widget	iframe	—	floating chat	third-party
candu component	<candu-component>	—	A/B overlays	third-party
gtm/recurly scripts	external JS	—	analytics/billing	third-party

12. Animation Behavior

• Menus/popovers (New menu, kebab, sort dropdown): MUI Grow/Fade entry — sampled mid-transition transition: all, settling to background-color 0.15s cubic-bezier(0.4,0,0.2,1); entry completes <300ms (opacity 1, transform none at rest). Standard MUI durations (~195-225ms, cubic-bezier(0.4,0,0.2,1)).
• Dialog open: MUI Dialog fade+zoom with backdrop fade; backdrop rgba(0,0,0,0.5).
• Hover: row action icons reveal (opacity/visibility); no transform motion observed.
• No entrance animations on list content observed; loading = text "Loading...".

13. Reference Screenshot Index

All under generated/site-spec/screenshots/ (PNG; 1440 captures at 1296×810 physical):

File	Route	Viewport
home@1440w.png	Recipes list	1440×900
home@1440w-sort-open.png	Recipes, sort dropdown open	1440×900
home@1440w-row-menu.png	Recipes, row kebab menu	1440×900
home@1440w-search.png	Recipes, search "banana"	1440×900
home@1024w.png / home@768w.png / home@390w.png	Recipes list	1024 / 768 / 390
ingredients@1440w.png, @1024w, @768w, @390w	Ingredients list	all four
recipe-books@1440w.png, @390w	Recipe Books	1440 / 390
docs@1440w.png, @390w	Docs	1440 / 390
purchase-items@1440w.png, @390w	Purchase items empty state	1440 / 390
recipe-create-modal@1440w.png	Create wizard step 1	1440×900
recipe-steps-wizard@1440w.png	Create wizard step 2	1440×900
recipe-editor@1440w.png, @1024w, @768w, @390w	Recipe editor	all four
recipe-editor-cost@1440w.png / recipe-editor-uom@1440w.png	Editor Cost / UoM tabs	1440×900

14. Unknowns / Things That Could Not Be Observed

• Upgrade-gated (not attempted, per directive): Menus nav + editor flow; New→Menu; New→Count Sheet; editor Nutrition tab; purchase-import services (Invoice Processing, Inventory integrations — contact-gated).
• Filter chip: clicking produced no observable panel in this environment (possible relay input quirk); needs manual verification — expected to open a filter drawer/menu.
• Done button enabled state: disabled in initial editor state; enabling trigger (save/dirty) not observed — manual check needed.
• Row action icons (24×24 pair): exact icon semantics (favorite vs open) not labeled in DOM; inferred from position.
• Ingredient detail view: row click navigation target (ingredient editor) not opened (read-only constraint on non-test data).
• Recipe detail/share flows: Share menu, Grant view access, Send a copy, Export/Print outputs not exercised.
• Real window: native 1157×744 @ dpr 1.35 — all captures used CDP-emulated viewports; physical vs CSS px scaling noted.
• Test recipe OMP DISCOVERY TEST (id 1210817): created for editor discovery, deleted at phase cleanup via row kebab → Delete → confirm dialog ("Delete recipe?" + "Recipe Deleted Successfully" toast).