diff --git a/packages/shared/src/htmlRender.ts b/packages/shared/src/htmlRender.ts
index 3f6d623ff1ea1cc78025ca8bd133516cf2bb7e38..b3b0c50b840ee3283bae1533f603d860b1b0a743 100644
--- a/packages/shared/src/htmlRender.ts
+++ b/packages/shared/src/htmlRender.ts
@@ -261,7 +261,9 @@ export const HTML_RENDER_THEME_GUIDE = [
 /** Agent-facing layout rules for a page that sits inside a reply. */
 export const HTML_RENDER_LAYOUT_GUIDE = [
   `The frame is borderless on the thread's background, as wide as the reply column (${HTML_RENDER_COLUMN_WIDTH}px on desktop by default, wider if the reader widens chat, about 360px on phones), and its left edge lines up with your reply text.`,
+  "The page sits on the thread's own background, so by default leave html, body, and the outermost element with no background color. This overrides general style preferences such as a fixed black page background.",
   "Use a fluid width with no horizontal padding on the outermost element, and no outer card, border, or banner title: the page is part of your reply.",
+  "If a box needs its own background (a mock of a specific screen, a panel that must stand apart), give it at least 16px of padding on every side and var(--radius) corners, so content never touches its edge.",
   "Give charts fixed pixel heights rather than heights that scale with width.",
   "Let content set the page's height. Avoid viewport-based heights such as 100vh or height:100% on html or body; the frame grows to fit the page, so they can make it grow again and again.",
 ].join(" ");