diff --git a/src/application/pages/app/inventory/[id].astro b/src/application/pages/app/inventory/[id].astro
index 10ee6a0..787db89 100644
--- a/src/application/pages/app/inventory/[id].astro
+++ b/src/application/pages/app/inventory/[id].astro
@@ -540,7 +540,7 @@ const isCompleted = count.status === "completed";
     text-align: left;
   }
   .count-items-table th {
-    background: #fbfbfb;
+    background: #ffffff;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
diff --git a/src/application/pages/app/inventory/index.astro b/src/application/pages/app/inventory/index.astro
index 9fb0ae4..c2aff16 100644
--- a/src/application/pages/app/inventory/index.astro
+++ b/src/application/pages/app/inventory/index.astro
@@ -317,7 +317,7 @@ database.close();
     gap: 16px;
   }
   .inventory-table-head {
-    background: #fbfbfb;
+    background: #ffffff;
     border-bottom: 1px solid var(--line);
     font-size: 11px;
     text-transform: uppercase;
@@ -465,7 +465,7 @@ database.close();
     display: flex;
     justify-content: flex-end;
     gap: 10px;
-    background: #fbfbfb;
+    background: #ffffff;
   }
   .cancel-btn {
     height: 36px;
diff --git a/src/application/pages/app/recipes/[id].astro b/src/application/pages/app/recipes/[id].astro
index 9d9a020..efd2f65 100644
--- a/src/application/pages/app/recipes/[id].astro
+++ b/src/application/pages/app/recipes/[id].astro
@@ -278,9 +278,33 @@ const recipeTabIcon=(name:string)=>`<span class="recipe-tab-icon"><svg viewBox="
             </section>
           ) : (
             <section class="recipe-view-method recipe-tab-panel active" data-recipe-panel="method">
-              <h2>Prep Method <small>{domainRecipe.steps.length}</small></h2>
-              <ol>
-                {domainRecipe.steps.map(step=><li class:list={{placeholder:step.instruction.startsWith("TODO:")}}><strong>{step.order}.</strong><span>{step.instruction}</span></li>)}
+              <h2>Prep Method <small>{domainRecipe.steps.filter(s => !s.instruction.trim().endsWith(":") && !/^\(.+\)$/.test(s.instruction.trim())).length || domainRecipe.steps.length}</small></h2>
+              <ol class="method-steps-list">
+                {(() => {
+                  let stepCount = 0;
+                  return domainRecipe.steps.map((step) => {
+                    const text = step.instruction.trim();
+                    const isHeading = text.endsWith(":");
+                    const isNote = /^\(.+\)$/.test(text);
+                    if (!isHeading && !isNote) {
+                      stepCount += 1;
+                    }
+                    return (
+                      <li class:list={["method-step-item", { "prep-heading": isHeading, "prep-note": isNote, placeholder: text.startsWith("TODO:") }]}>
+                        {isHeading ? (
+                          <h3 class="method-heading-text">{text}</h3>
+                        ) : isNote ? (
+                          <p class="method-note-text">{text}</p>
+                        ) : (
+                          <>
+                            <strong>{stepCount}.</strong>
+                            <span>{step.instruction}</span>
+                          </>
+                        )}
+                      </li>
+                    );
+                  });
+                })()}
               </ol>
             </section>
           )}
diff --git a/src/components/RecipeCalculator.tsx b/src/components/RecipeCalculator.tsx
index 7e81e55..51aad53 100644
--- a/src/components/RecipeCalculator.tsx
+++ b/src/components/RecipeCalculator.tsx
@@ -127,7 +127,10 @@ export default function RecipeCalculator({ components, units, basisUnitId, yield
       {calculatePercent&&percentMode==="bakers"&&baseItems.length>0&&<section class="bakers-base-summary"><strong>Base</strong><div>{baseItems.map(item=>{const displayUnitId=lineUnits[item.id]??item.amount.unit_id;const displayQuantity=convertItem(item.amount.quantity*validFactor,item.amount.unit_id,displayUnitId,item,units);return <p><span><input aria-label={`${item.label} base quantity`} type="number" min="0" step="any" value={roundForDisplay(displayQuantity)} onInput={(event)=>{const canonicalQuantity=convertItem(Number(event.currentTarget.value),displayUnitId,item.amount.unit_id,item,units);setFactor(item.amount.quantity>0?canonicalQuantity/item.amount.quantity:1)}}/><select aria-label={`${item.label} base unit`} value={displayUnitId} onChange={(event)=>setLineUnits((current)=>({...current,[item.id]:event.currentTarget.value}))}>{itemUnits(item,units).map(unit=><option value={unit.id}>{unit.symbol}</option>)}</select></span><a href={item.href}>{item.label}</a></p>})}</div></section>}
       {components.map((component) => (
         <div class="formula-component" key={component.id}>
-          {components.length > 1 && <h3>{component.name}</h3>}
+          {Boolean(component.name?.trim()) && <h3 class="formula-component-heading">{component.name}</h3>}
+          {(component.notes ?? []).filter(Boolean).map((note, noteIdx) => (
+            <p key={noteIdx} class="formula-component-note">{note}</p>
+          ))}
           <div class="table-wrap">
             <table class="recipe-ingredients">
               <thead><tr><th>Amount</th><th>Ingredient</th>{calculatePercent&&<th>{percentMode==="standard"?"Standard %":"Baker's %"}</th>}</tr></thead>
diff --git a/src/styles/base.css b/src/styles/base.css
index 0b4e9e7..a2300e6 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -41,14 +41,13 @@
   --ink-secondary: #3C4679;
   --muted: #8283a0;
   --muted-light: #a5a9c1;
-  --muted-subtle: #757677;
-  --paper: #f3f3f3;
+  --paper: #ffffff;
   --card: #ffffff;
-  --card-alt: #fbfbfb;
+  --card-alt: #fafbfd;
   --card-paper: #f1f5fe;
-  --line: #ececec;
-  --line-subtle: #f3f3f3;
-  --line-focus: #dadada;
+  --line: #edf0f5;
+  --line-subtle: #f4f5f8;
+  --line-focus: #3d5df6;
   --blue: #3d5df6;
   --blue-hover: #1236e1;
   --blue-active: #001992;
@@ -152,7 +151,7 @@ a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em;
   display: flex;
   align-items: center;
   gap: 8px;
-  background: #fbfbfb;
+  background: #ffffff;
   border: 1px solid #ececec;
   border-radius: 4px;
   padding: 4px 10px;
diff --git a/src/styles/global.css b/src/styles/global.css
index 9f0eef4..e4fc83f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -43,14 +43,13 @@
   --ink-secondary: #3C4679;
   --muted: #8283a0;
   --muted-light: #a5a9c1;
-  --muted-subtle: #757677;
-  --paper: #f3f3f3;
+  --paper: #ffffff;
   --card: #ffffff;
-  --card-alt: #fbfbfb;
+  --card-alt: #fafbfd;
   --card-paper: #f1f5fe;
-  --line: #ececec;
-  --line-subtle: #f3f3f3;
-  --line-focus: #dadada;
+  --line: #edf0f5;
+  --line-subtle: #f4f5f8;
+  --line-focus: #3d5df6;
   --blue: #3d5df6;
   --blue-hover: #1236e1;
   --blue-active: #001992;
@@ -252,28 +251,28 @@ th { font-size:.7rem; letter-spacing:.06em; }
 .ingredient-purchase-form > header button { padding:5px 7px; color:#f63d48; background:transparent; border:0; cursor:pointer; font-size:11px; }
 .ingredient-purchase-form .purchase-item-form { margin:0; padding:0; background:#fff; border:0; border-radius:0; }
 .ingredient-purchase-form .purchase-item-form label { color:#3c4679; font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; }
-.ingredient-purchase-form .purchase-item-form input,.ingredient-purchase-form .purchase-item-form select { min-height:44px; padding:9px 10px; background:#fbfbfb; border-color:#ececec; border-radius:0; }
+.ingredient-purchase-form .purchase-item-form input,.ingredient-purchase-form .purchase-item-form select { min-height:44px; padding:9px 10px; background:#ffffff; border-color:#ececec; border-radius:0; }
 .ingredient-purchase-form .purchase-form-actions button { padding:9px 16px; background:#3d5df6; border-color:#3d5df6; border-radius:20px; }
-.ingredient-cost-row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; padding:12px 0; border-bottom:1px solid #f3f3f3; }
+.ingredient-cost-row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; padding:12px 0; border-bottom:1px solid #edf0f5; }
 .ingredient-cost-row > span:last-child { text-align:right; }
 .ingredient-cost-row strong,.ingredient-cost-row small { display:block; }
 .ingredient-cost-row small { margin-top:3px; color:#a5a9c1; font-size:11px; }
 .detail-actions-menu label { display:grid; gap:6px; padding:9px 14px; color:#a5a9c1; font-size:11px; }
 .detail-actions-menu select { width:250px; padding:9px; }
 .application-body .ingredient-actions-menu > div { width:290px; }
-@media (min-width:981px) { .application-body .entity-detail-shell .entity-primary { background:#fbfbfb; } }
-.application-body .entity-detail-shell .entity-detail-header { background:#fbfbfb; }
+@media (min-width:981px) { .application-body .entity-detail-shell .entity-primary { background:#ffffff; } }
+.application-body .entity-detail-shell .entity-detail-header { background:#ffffff; }
 .application-body .entity-detail-shell .entity-primary { padding-top:35px; }
 .application-body .entity-detail-shell .entity-section { margin-bottom:35px; }
 .application-body .entity-detail-shell .entity-section h2,.application-body .entity-detail-shell .entity-tab-panel h2 { color:#050841; font-size:22px; font-weight:700; line-height:1.25; }
 .application-body .entity-detail-shell .panel-intro { max-width:640px; margin:5px 0 20px; color:#95969c; font-size:14px; line-height:1.5; }
-.application-body .entity-detail-shell .entity-tabs { position:relative; min-height:58px; background:#fff; border-color:#f3f3f3; }
+.application-body .entity-detail-shell .entity-tabs { position:relative; min-height:58px; background:#fff; border-color:#edf0f5; }
 .application-body .entity-detail-shell .entity-tabs button { min-height:58px; padding:8px 12px; color:#050841; font-size:15px; font-weight:400; }
 .application-body .entity-detail-shell .entity-tabs button.active { color:#050841; background:#f1f5fe; border-bottom:2px solid #3d5df6; }
 .application-body .entity-detail-shell .entity-tab-panel { padding:35px 2px 60px; }
 .application-body .entity-detail-shell .prep-action-table { width:100%; margin-top:26px; table-layout:fixed; }
-.application-body .entity-detail-shell .prep-action-table th { height:40px; padding:8px 10px; color:#757677; background:#fbfbfb; border-color:#f3f3f3; font-size:12px; }
-.application-body .entity-detail-shell .prep-action-table td { height:58px; padding:10px; color:#050841; background:#fff; border:1px solid #f3f3f3; font-size:14px; }
+.application-body .entity-detail-shell .prep-action-table th { height:40px; padding:8px 10px; color:#757677; background:#ffffff; border-color:#edf0f5; font-size:12px; }
+.application-body .entity-detail-shell .prep-action-table td { height:58px; padding:10px; color:#050841; background:#fff; border:1px solid #edf0f5; font-size:14px; }
 .application-body .entity-detail-shell .inline-editor > summary,.application-body .entity-detail-shell .add-purchase > summary { display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; color:#202962; background:#fff; border:1px solid #202962; border-radius:22px; font-size:14px; font-weight:600; list-style:none; }
 .application-body .entity-detail-shell .inline-editor > summary::-webkit-details-marker,.application-body .entity-detail-shell .add-purchase > summary::-webkit-details-marker { display:none; }
 .application-body .entity-detail-shell .inline-form { gap:10px; margin-top:18px; padding-top:18px; border-color:#f3f3f3; }
@@ -375,13 +374,13 @@ th { font-size:.7rem; letter-spacing:.06em; }
 .application-body {
   --ink:#050841;
   --muted:#a5a9c1;
-  --paper:#f3f3f3;
+  --paper:#ffffff;
   --card:#fff;
-  --line:#eeeeF3;
+  --line:#edf0f5;
   --green:#3d5df6;
   --orange:#647df8;
   color:#050841;
-  background:#f3f3f3;
+  background:#ffffff;
   font-family:var(--meez-font-sans);
   font-size:16px;
   font-weight:300;
@@ -396,10 +395,10 @@ th { font-size:.7rem; letter-spacing:.06em; }
 
 /* Home workspace */
 .application-body .directory-workspace { width:min(1120px,calc(100% - 48px)); padding:26px 0 32px; }
-.application-body .workspace-search-tools { position:sticky; top:0; z-index:20; display:flex; align-items:center; min-height:80px; margin:0; background:#fbfbfb; }
+.application-body .workspace-search-tools { position:sticky; top:0; z-index:20; display:flex; align-items:center; min-height:80px; margin:0; background:#ffffff; }
 .application-body .workspace-search-tools-inner { width:min(1120px,calc(100% - 48px)); margin-inline:auto; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
 .application-body .workspace-search-tools-inner .workspace-new-menu { margin-left:0; }
-.application-body .workspace-global-search { flex:0 1 504px; min-height:40px; padding:0 12px; display:flex; align-items:center; gap:5px; background:#fff; border:1px solid #f3f3f3; border-radius:4px; box-shadow:none; }
+.application-body .workspace-global-search { flex:0 1 504px; min-height:40px; padding:0 12px; display:flex; align-items:center; gap:5px; background:#fff; border:1px solid #edf0f5; border-radius:4px; box-shadow:none; }
 .application-body .workspace-global-search .search-icon { flex:none; color:#8283a0; }
 .application-body .workspace-global-search:focus-within { box-shadow:none; }
 .application-body form.workspace-global-search input[type="search"] { flex:1; min-width:0; padding:8px 0 6px; color:rgba(0,0,0,0.87); background:transparent; border:0; border-radius:0; font-size:16px; font-weight:400; }
@@ -478,7 +477,7 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .workspace-pill-icon.book { background:#f3a642; }
 .application-body .workspace-pills .filter-menu summary { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px; color:rgba(0,0,0,0.87); background:transparent; border:0; border-radius:20px; font-size:16px; font-weight:400; }
 .application-body .entity-directory-table { overflow:visible; border:0; background:#fff; }
-.application-body .entity-directory-toolbar { grid-template-columns:36px 64px minmax(0,1fr) auto; gap:8px; min-height:57px; padding:0; background:#fbfbfb; border-bottom:1px solid #f3f3f3; }
+.application-body .entity-directory-toolbar { grid-template-columns:36px 64px minmax(0,1fr) auto; gap:8px; min-height:57px; padding:0; background:#ffffff; border-bottom:1px solid #edf0f5; }
 .application-body .entity-directory-toolbar.has-selection { grid-template-columns:36px minmax(0,1fr); }
 .application-body .entity-directory-selection-bar { display:flex; align-items:center; justify-content:space-between; width:100%; padding-right:8px; }
 .application-body .selection-count { color:#3d5df6; font-size:15px; font-weight:600; }
@@ -491,7 +490,7 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .bulk-action-btn.bulk-clear:hover { background:#f4f6fa; border-color:#a5a9c1; color:#050841; }
 .application-body .entity-directory-head > span { font-size:14px; font-weight:400; color:#a5a9c1; text-transform:none; }
 .application-body .entity-directory-head > span:nth-child(2) { text-align:left; padding-left:2px; }
-.application-body .entity-directory-row,.application-body .entity-directory-row.columns-1,.application-body .entity-directory-row.columns-2,.application-body .entity-directory-row.columns-3 { grid-template-columns:36px 64px minmax(14rem,1fr) 36px; gap:8px; min-height:57px; padding:0; border-bottom:1px solid #f3f3f3; }
+.application-body .entity-directory-row,.application-body .entity-directory-row.columns-1,.application-body .entity-directory-row.columns-2,.application-body .entity-directory-row.columns-3 { grid-template-columns:36px 64px minmax(14rem,1fr) 36px; gap:8px; min-height:57px; padding:0; border-bottom:1px solid #edf0f5; }
 .application-body .entity-directory-table.read-only .entity-directory-row { grid-template-columns:30px minmax(0,1fr); }
 .application-body .entity-directory-row.selected { background:#f1f5fe; }
 .application-body .entity-directory-name a,.application-body .entity-directory-name strong { color:#050841; font-size:15px; font-weight:500; }
@@ -536,7 +535,7 @@ input[type="search"]::-webkit-search-results-decoration,
 
 /* Full-width entity workspaces */
 .application-body .immersive-main { color:#050841; background:#fff; }
-.application-body .detail-utility { min-height:58px; padding:8px 28px; background:#fbfbfb; border-color:#f3f3f3; }
+.application-body .detail-utility { min-height:58px; padding:8px 28px; background:#ffffff; border-color:#edf0f5; }
 .application-body .detail-utility input::placeholder { color:#a5a9c1; }
 .application-body .detail-utility > a { color:#202962; font-size:13px; font-weight:500; }
 .application-body .immersive-main .entity-detail-header { min-height:164px; padding:25px 38px; border-color:#eeeef3; }
@@ -547,7 +546,7 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .immersive-main .entity-detail-grid,.application-body .immersive-main .recipe-structure-workspace .structure-editor { border-color:#eeeef3; }
 .application-body .immersive-main .entity-primary { padding:42px 38px; border-color:#eeeef3; }
 .application-body .immersive-main .entity-secondary { padding:0 32px; }
-.application-body .entity-tabs { min-height:58px; border-color:#f3f3f3; }
+.application-body .entity-tabs { min-height:58px; border-color:#edf0f5; }
 .application-body .entity-tabs button,.application-body .recipe-workspace-tabs button { padding:17px 10px; color:#202962; font-size:15px; font-weight:400; }
 .application-body .entity-tabs button.active,.application-body .recipe-workspace-tabs button.active { color:#050841; background:#f1f5fe; border-bottom:2px solid #3d5df6; }
 .application-body .entity-tab-panel { padding-top:38px; }
@@ -798,7 +797,7 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .detail-actions-menu button { display:block; width:100% !important; max-width:100% !important; min-height:44px; padding:10px 20px; color:#050841; background:transparent; border:0; border-radius:0; cursor:pointer; font-size:15px; font-weight:500; text-align:left; white-space:nowrap; box-sizing:border-box; }
 .application-body .detail-actions-menu button:hover { background:#f1f5fe; }
 /* Recipe Books */
-.application-body .recipe-book-page { min-height: 100vh; background: #f3f3f3; padding-top: 48px; }
+.application-body .recipe-book-page { min-height: 100vh; background: #ffffff; padding-top: 48px; }
 .application-body .recipe-book-workspace { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 64px; }
 .application-body .recipe-book-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
 .application-body .recipe-book-breadcrumbs { margin-bottom: 8px; }
@@ -815,13 +814,13 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .book-action-btn.active { color: #687086; }
 .application-body .book-notice { margin-bottom: 20px; padding: 12px 16px; background: #fff1f1; border: 1px solid #f5cece; border-radius: 6px; color: #8d2e2e; font-size: 14px; }
 .application-body .book-directory-table { background: #fff; border: 1px solid #eef0f5; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
-.application-body .book-directory-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 20px; background: #fbfbfb; border-bottom: 1px solid #f3f3f3; }
+.application-body .book-directory-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 20px; background: #ffffff; border-bottom: 1px solid #edf0f5; }
 .application-body .book-toolbar-title { color: #050841; font-size: 14px; font-weight: 600; }
 .application-body .book-toolbar-count { color: #8b93a7; font-size: 13px; font-weight: 400; }
 .application-body .book-recipe-list { display: flex; flex-direction: column; }
-.application-body .book-recipe-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 12px; min-height: 58px; padding: 0 20px; border-bottom: 1px solid #f3f3f3; transition: background-color 0.12s ease; }
+.application-body .book-recipe-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 12px; min-height: 58px; padding: 0 20px; border-bottom: 1px solid #edf0f5; transition: background-color 0.12s ease; }
 .application-body .book-recipe-row:last-child { border-bottom: 0; }
-.application-body .book-recipe-row:hover { background: #fbfbfb; }
+.application-body .book-recipe-row:hover { background: #f8faff; }
 .application-body .book-recipe-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: #3c4679; border-radius: 50%; color: #fff; }
 .application-body .book-recipe-title { color: #050841; font-size: 15px; font-weight: 500; text-decoration: none; transition: color 0.12s ease; }
 .application-body .book-recipe-title:hover { color: #3d5df6; }
@@ -846,7 +845,7 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .book-input, .application-body .book-textarea { width: 100%; padding: 10px 14px; background: #fff; border: 1px solid #dfe3ec; border-radius: 4px; color: #050841; font-family: var(--meez-font-sans); font-size: 15px; font-weight: 400; outline: none; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
 .application-body .book-input:focus, .application-body .book-textarea:focus { border-color: #3d5df6; box-shadow: 0 0 0 2px rgba(61, 93, 246, 0.15); }
 .application-body .book-recipe-checklist { display: flex; flex-direction: column; gap: 4px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
-.application-body .book-checklist-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; background: #fff; border: 1px solid #f3f3f3; border-radius: 6px; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
+.application-body .book-checklist-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; background: #fff; border: 1px solid #edf0f5; border-radius: 6px; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
 .application-body .book-checklist-item:hover { background: #f7f9fd; border-color: #e4e7ed; }
 .application-body .book-checklist-item:has(.book-checkbox:checked) { background: #f1f5fe; border-color: #cfd5fa; }
 .application-body .book-checkbox { width: 18px; height: 18px; margin: 0; accent-color: #3d5df6; cursor: pointer; }
@@ -880,7 +879,7 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .workspace-pills > a.archive-link { margin-left:auto; color:#a5a9c1; background:transparent; border-color:transparent; }
 
 /* Archive Workspace */
-.application-body .archive-page { min-height: 100vh; background: #f3f3f3; padding-top: 48px; }
+.application-body .archive-page { min-height: 100vh; background: #ffffff; padding-top: 48px; }
 .application-body .archive-workspace { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 64px; }
 .application-body .archive-header { margin-bottom: 24px; }
 .application-body .archive-breadcrumbs { margin-bottom: 8px; }
@@ -894,10 +893,10 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .archive-chip.active { background: #DBE4FF; border-color: #DBE4FF; }
 .application-body .archive-chip .chip-count { color: #8b93a7; font-size: 12px; font-weight: 500; }
 .application-body .archive-table { background: #fff; border: 1px solid #eef0f5; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
-.application-body .archive-table-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 120px; align-items: center; min-height: 48px; padding: 0 20px; background: #fbfbfb; border-bottom: 1px solid #f3f3f3; color: #8b93a7; font-size: 13px; font-weight: 500; }
-.application-body .archive-table-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 120px; align-items: center; min-height: 58px; padding: 0 20px; border-bottom: 1px solid #f3f3f3; transition: background-color 0.12s ease; }
+.application-body .archive-table-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 120px; align-items: center; min-height: 48px; padding: 0 20px; background: #ffffff; border-bottom: 1px solid #edf0f5; color: #8b93a7; font-size: 13px; font-weight: 500; }
+.application-body .archive-table-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 120px; align-items: center; min-height: 58px; padding: 0 20px; border-bottom: 1px solid #edf0f5; transition: background-color 0.12s ease; }
 .application-body .archive-table-row:last-child { border-bottom: 0; }
-.application-body .archive-table-row:hover { background: #fbfbfb; }
+.application-body .archive-table-row:hover { background: #f8faff; }
 .application-body .archive-type-cell { display: flex; align-items: center; }
 .application-body .archive-name-cell { display: flex; flex-direction: column; min-width: 0; }
 .application-body .archive-item-title { color: #050841; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -908,7 +907,7 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .empty-icon-circle { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; background: #f1f5fe; border-radius: 50%; color: #3d5df6; }
 
 /* Purchasing Review Tool */
-.application-body .purchasing-review-page { min-height: 100vh; background: #f3f3f3; padding-top: 48px; }
+.application-body .purchasing-review-page { min-height: 100vh; background: #ffffff; padding-top: 48px; }
 .application-body .purchasing-review-workspace { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 64px; }
 .application-body .purchasing-review-header { margin-bottom: 24px; }
 .application-body .purchasing-breadcrumbs { margin-bottom: 8px; }
@@ -922,7 +921,7 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .stats-label { color: #050841; font-size: 14px; font-weight: 500; }
 .application-body .stats-hint { color: #8b93a7; font-size: 12px; }
 .application-body .purchasing-review-actions { display: flex; align-items: center; gap: 12px; }
-.application-body .purchasing-search-box { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; background: #fbfbfb; border: 1px solid #dfe3ec; border-radius: 4px; }
+.application-body .purchasing-search-box { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; background: #ffffff; border: 1px solid #dfe3ec; border-radius: 4px; }
 .application-body .purchasing-search-box .search-icon { color: #8283a0; flex: none; }
 .application-body .purchasing-search-box input { border: 0; background: transparent; outline: none; font-family: var(--meez-font-sans); font-size: 14px; color: #050841; min-width: 180px; }
 .application-body .search-clear-btn { background: transparent; border: 0; color: #a5a9c1; font-size: 18px; cursor: pointer; padding: 0 2px; }
@@ -1163,8 +1162,13 @@ input[type="search"]::-webkit-search-results-decoration,
   color: #050841;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
+.application-body .unified-recipe-editor .editor-items tr.component-header-row,
+.application-body .unified-recipe-editor .editor-items tr.component-header-row:hover,
+.application-body .unified-recipe-editor .editor-items tr.component-header-row:focus-within {
+  background: transparent !important;
+}
 .application-body .unified-recipe-editor .editor-items tr.component-header-row td {
-  padding: 16px 0 6px;
+  padding: 18px 0 6px;
   border-bottom: 0;
   background: transparent;
 }
@@ -1173,15 +1177,17 @@ input[type="search"]::-webkit-search-results-decoration,
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  min-height: 44px;
-  padding: 4px 12px;
-  background: #f3f3f3;
-  border-radius: 8px;
-  transition: background-color 0.15s ease;
+  min-height: 38px;
+  padding: 4px 0;
+  background: transparent;
+  border-bottom: 1px solid #edf0f5;
+  border-radius: 0;
+  transition: border-color 0.15s ease;
 }
 .application-body .unified-recipe-editor .component-header-content:hover,
 .application-body .unified-recipe-editor .component-header-content:focus-within {
-  background: #ebedf2;
+  background: transparent;
+  border-bottom-color: #3d5df6;
 }
 .application-body .unified-recipe-editor .component-name-input {
   width: 100%;
@@ -1933,9 +1939,9 @@ input[type="search"]::-webkit-search-results-decoration,
 .bulk-ingredient-dialog .bulk-submit:disabled { background:#aeb9f8; cursor:not-allowed; }
 .bulk-prep-dialog { width:min(860px,100%); }
 .bulk-prep-dialog textarea { min-height:390px; }
-.application-body .unified-recipe-editor .method-editor li.prep-heading { min-height:70px; padding-block:18px; background:#fbfbfd; }
+.application-body .unified-recipe-editor .method-editor li.prep-heading { min-height:70px; padding-block:18px; background:#ffffff; }
 .application-body .unified-recipe-editor .method-editor li.prep-heading textarea { min-height:34px; font-weight:700; }
-.application-body .unified-recipe-editor .method-editor li.prep-note { min-height:76px; background:#fafbfe; }
+.application-body .unified-recipe-editor .method-editor li.prep-note { min-height:76px; background:#ffffff; }
 .application-body .unified-recipe-editor .method-editor li.prep-note textarea { min-height:44px; color:#727a91; font-style:italic; }/* Recipe edit title and breadcrumb refinements. */
 .application-body .editable-entity-title {
   margin: 0;
@@ -1957,10 +1963,10 @@ input[type="search"]::-webkit-search-results-decoration,
 }
 
 /* Persistent detail breadcrumbs. */
-.application-body .immersive-main .detail-utility { position:absolute; z-index:30; top:0; left:0; right:0; width:100%; height:48px; min-height:48px; display:grid; grid-template-columns:50% 50%; gap:0; padding:0; background:#fbfbfb; border-bottom:1px solid #f3f3f3; }
+.application-body .immersive-main .detail-utility { position:absolute; z-index:30; top:0; left:0; right:0; width:100%; height:48px; min-height:48px; display:grid; grid-template-columns:50% 50%; gap:0; padding:0; background:#ffffff; border-bottom:1px solid #edf0f5; }
 .application-body .detail-context,.application-body .detail-tools { display:flex; align-items:center; min-width:0; height:48px; }
 .application-body .detail-context { gap:14px; padding:0 36px; }
-.application-body .detail-tools { gap:18px; padding:0 32px; border-left:1px solid #f3f3f3; }
+.application-body .detail-tools { gap:18px; padding:0 32px; border-left:1px solid #edf0f5; }
 .application-body .detail-tools form { flex:1; width:auto; }
 .application-body .detail-back { display:grid; place-items:center; width:30px; height:30px; color:#202962; text-decoration:none; font-size:30px; font-weight:400; line-height:1; }
 .application-body .detail-back:hover { color:#3d5df6; }
@@ -2054,7 +2060,7 @@ input[type="search"]::-webkit-search-results-decoration,
 
 
 /* Recipe read view — meez skin (measured live 2026-08-14). */
-.application-body .immersive-main { background:#f3f3f3; }
+.application-body .immersive-main { background:#ffffff; }
 .application-body .recipe-detail-shell.recipe-read-shell {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -2064,7 +2070,7 @@ input[type="search"]::-webkit-search-results-decoration,
   min-height: auto;
   margin: 0;
   padding: 0;
-  background: #fbfbfb;
+  background: #ffffff;
 }
 .application-body .recipe-read-left {
   width: 100%;
@@ -2099,13 +2105,13 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .recipe-read-right {
   width: 100%;
   max-width: 100%;
-  background: #fbfbfb;
+  background: #ffffff;
   box-sizing: border-box;
 }
 .application-body .recipe-read-right .recipe-workspace-tabs {
   min-height: 48px;
   padding: 0 16px;
-  background: #fbfbfb;
+  background: #ffffff;
   border-bottom: 1px solid #edf0f5;
 }
 .application-body .recipe-read-right .recipe-view-details {
@@ -2113,7 +2119,7 @@ input[type="search"]::-webkit-search-results-decoration,
   background: transparent;
   border-left: 0;
 }
-.application-body .recipe-detail-shell .entity-detail-header { background:#fbfbfb; }
+.application-body .recipe-detail-shell .entity-detail-header { background:#ffffff; }
 .application-body .recipe-detail-shell > .entity-detail-header > div:first-child > p { display:block; }
 .application-body .recipe-detail-shell .entity-breadcrumb a { color:#202962; font-size:12px; font-weight:400; text-decoration:none; }
 .application-body .recipe-detail-shell .entity-detail-header h1 { font-size:28px; font-weight:900; line-height:42px; }
@@ -2125,8 +2131,8 @@ input[type="search"]::-webkit-search-results-decoration,
 /* Tab row: 48px, icon + 15px label, active = #f1f5fe with blue underline. */
 .application-body .recipe-workspace-tabs {
   min-height: 48px;
-  background: #fbfbfb;
-  border-bottom: 1px solid #f3f3f3;
+  background: #ffffff;
+  border-bottom: 1px solid #edf0f5;
   justify-content: flex-start;
 }
 .application-body .recipe-workspace-tabs button {
@@ -2257,10 +2263,10 @@ input[type="search"]::-webkit-search-results-decoration,
   display: grid;
 }
 
-/* Two-column workspace: #fbfbfb cards on #f3f3f3. */
-.application-body .recipe-view-workspace { grid-template-columns:1fr 1fr; border-top:0; background:#fbfbfb; }
-.application-body .recipe-view-formula { padding:26px 36px 35px; border-right:0; background:#fbfbfb; }
-.application-body .recipe-view-details { padding:26px 32px 60px; border-left:1px solid #f3f3f3; background:#fbfbfb; }
+/* Two-column workspace: clean pure white on white. */
+.application-body .recipe-view-workspace { grid-template-columns:1fr 1fr; border-top:0; background:#ffffff; }
+.application-body .recipe-view-formula { padding:26px 36px 35px; border-right:0; background:#ffffff; }
+.application-body .recipe-view-details { padding:26px 32px 60px; border-left:1px solid #edf0f5; background:#ffffff; }
 
 /* Formula heading: label + value text controls, no input boxes. */
 .application-body .recipe-view-formula .calculator-heading { display:flex; align-items:center; gap:36px; margin-bottom:26px; }
@@ -2274,7 +2280,26 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .recipe-view-formula .calculator-heading .input-with-unit > span { border-left:0; color:#050841; font-size:14px; font-weight:400; }
 
 /* Formula table: borderless rows, meez typography. */
-.application-body .recipe-view-formula .formula-component { margin:0 0 16px 0; border:0; background:transparent; font:inherit; }
+.application-body .recipe-view-formula .formula-component { margin:0 0 20px 0; border:0; background:transparent; font:inherit; }
+.application-body .recipe-view-formula .formula-component h3,
+.application-body .recipe-view-formula .formula-component-heading {
+  margin: 18px 0 8px 0;
+  padding: 0 0 6px 0;
+  color: #050841;
+  font-family: var(--meez-font-sans);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+  border-bottom: 1px solid #edf0f5;
+  letter-spacing: 0;
+}
+.application-body .recipe-view-formula .formula-component-note {
+  margin: 4px 0 8px;
+  color: #757677;
+  font-size: 13px;
+  font-style: italic;
+  line-height: 1.4;
+}
 .application-body .recipe-view-formula .recipe-ingredients thead { display:none; }
 .application-body .recipe-view-formula .recipe-ingredients td { padding:8px 0; border:0; border-bottom:0; background:transparent; }
 .application-body .recipe-view-formula .recipe-ingredients td:first-child { padding-right:10px; }
@@ -2288,12 +2313,38 @@ input[type="search"]::-webkit-search-results-decoration,
 /* Prep method panel. */
 .application-body .recipe-view-method h2 { margin:0 0 34px; font-size:22px; font-weight:700; line-height:33px; }
 .application-body .recipe-view-method h2 small { margin-left:8px; color:#a5a9c1; font-size:16px; font-weight:700; }
-.application-body .recipe-view-method ol { padding:0; list-style:none; }
-.application-body .recipe-view-method li { grid-template-columns:28px minmax(0,1fr); gap:16px; min-height:0; padding:16px 0; background:transparent; border:0; border-bottom:1px solid #f3f3f3; }
+.application-body .recipe-view-method ol { padding:0; list-style:none; margin:0; }
+.application-body .recipe-view-method li { grid-template-columns:28px minmax(0,1fr); gap:16px; min-height:0; padding:16px 0; background:transparent; border:0; border-bottom:1px solid #edf0f5; }
 .application-body .recipe-view-method li:last-child { border-bottom:0; }
 .application-body .recipe-view-method li > strong { color:#050841; font-size:16px; font-weight:700; }
 .application-body .recipe-view-method li > span { color:#050841; font-size:16px; font-weight:300; line-height:20px; }
 .application-body .recipe-view-method li.placeholder > span { color:#a5a9c1; }
+.application-body .recipe-view-method li.prep-heading {
+  display: block;
+  padding: 20px 0 6px;
+  border-bottom: 1px solid #edf0f5;
+}
+.application-body .recipe-view-method li.prep-heading h3,
+.application-body .recipe-view-method .method-heading-text {
+  margin: 0;
+  color: #050841;
+  font-family: var(--meez-font-sans);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+}
+.application-body .recipe-view-method li.prep-note {
+  display: block;
+  padding: 8px 0;
+}
+.application-body .recipe-view-method li.prep-note p,
+.application-body .recipe-view-method .method-note-text {
+  margin: 0;
+  color: #757677;
+  font-size: 14px;
+  font-style: italic;
+  line-height: 1.4;
+}
 /* Secondary panels: meez panel headings and copy. */
 /* U of M Equivalency: Meez Style */
 .application-body .recipe-view-equivalencies {
@@ -2574,7 +2625,7 @@ input[type="search"]::-webkit-search-results-decoration,
 }
 
 /* Recipe read view — meez steps clone (measured live 2026-08-15). */
-.application-body .immersive-main:has(.recipe-read-shell) { background:#fbfbfb; }
+.application-body .immersive-main:has(.recipe-read-shell) { background:#ffffff; }
 .application-body .immersive-main .recipe-read-shell {
   display:grid;
   grid-template-columns:minmax(0,1fr) minmax(0,1fr);
@@ -2586,7 +2637,7 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .recipe-read-shell .recipe-view-formula-pane,
 .application-body .recipe-read-shell .recipe-view-details-pane { flex:none; min-width:0; }
 
-/* App bar: 48px #fbfbfb, no bottom border. */
+/* App bar: 48px #ffffff, no bottom border. */
 .application-body .recipe-read-shell .detail-utility {
   position:sticky;
   top:0;
@@ -2594,7 +2645,7 @@ input[type="search"]::-webkit-search-results-decoration,
   height:48px;
   min-height:48px;
   padding:0;
-  background:#fbfbfb;
+  background:#ffffff;
   border-bottom:0;
 }
 .application-body .recipe-read-shell .detail-context,
@@ -2674,8 +2725,8 @@ input[type="search"]::-webkit-search-results-decoration,
   min-height:48px;
   margin:0;
   padding:0;
-  background:#fbfbfb;
-  border-bottom:2px solid #f3f3f3;
+  background:#ffffff;
+  border-bottom:2px solid #edf0f5;
 }
 .application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs button,
 .application-body .recipe-read-shell .recipe-workspace-tabs button,
@@ -2814,8 +2865,8 @@ input[type="search"]::-webkit-search-results-decoration,
 .application-body .immersive-main .recipe-read-shell .recipe-view-details {
   padding:0 32px 32px;
   border-top:0;
-  border-left:1px solid #f3f3f3;
-  background:#fbfbfb;
+  border-left:1px solid #edf0f5;
+  background:#ffffff;
 }
 /* Tab panel switching: clean active state with no layout reflow or margin leakage */
 .application-body .recipe-view-details > .recipe-tab-panel,
@@ -3135,7 +3186,7 @@ input[type="search"]::-webkit-search-results-decoration,
   min-height: auto;
   margin: 0;
   padding: 0;
-  background: #fbfbfb;
+  background: #ffffff;
 }
 
 .application-body .ingredient-read-left {
@@ -3470,7 +3521,7 @@ input[type="search"]::-webkit-search-results-decoration,
   align-items: stretch;
   width: 100%;
   max-width: 100%;
-  background: #fbfbfb;
+  background: #ffffff;
   box-sizing: border-box;
 }
 
@@ -3775,9 +3826,9 @@ input[type="search"]::-webkit-search-results-decoration,
   height: 48px !important;
   margin: 0 !important;
   padding: 0 !important;
-  background: #fbfbfb !important;
+  background: #ffffff !important;
   border: 0 !important;
-  border-bottom: 1px solid #f3f3f3 !important;
+  border-bottom: 1px solid #edf0f5 !important;
   box-sizing: border-box !important;
 }
 
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 7bfd7bc..f064e41 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -4,10 +4,10 @@
  */
 :root {
   /* Surface Colors */
-  --meez-bg-page: #f3f3f3;
-  --meez-bg-card: #fbfbfb;
-  --meez-bg-card-alt: #f1f5fe;
-  --meez-bg-card-hover: #f1f5fe;
+  --meez-bg-page: #ffffff;
+  --meez-bg-card: #ffffff;
+  --meez-bg-card-alt: #fafbfd;
+  --meez-bg-card-hover: #f8faff;
   --meez-bg-white: #ffffff;
   --meez-bg-active-pill: #dbe4ff;