model: gpt-5.3-codex

reasoning: medium

Apply PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT.

- Normalize spacing and typography
- Improve visual hierarchy
- Apply across all tools
- No behavior/data changes
- Add validation report

Author: DavidQ

docs/dev/codex_commands.md

@@ -1,14 +1,10 @@
-# CODEX COMMANDS
-
 model: gpt-5.3-codex
 reasoning: medium
 
-Apply PR_11_2_INTERACTION_AND_FEEDBACK_POLISH.
+Apply PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT.
 
-- Add consistent hover, active, focus, and disabled states across all tools
-- Normalize selection styling
-- Ensure correct cursor behavior
-- Add subtle transitions
-- Do not change behavior, data, schema, or start_of_day folders
+- Normalize spacing and typography
+- Improve visual hierarchy
+- Apply across all tools
+- No behavior/data changes
 - Add validation report
-- Return ZIP at tmp/PR_11_2_INTERACTION_AND_FEEDBACK_POLISH_delta.zip

docs/dev/commit_comment.txt

@@ -1 +1 @@
-Improve interaction feedback and visual clarity across tools - PR 11.2
+Refine visual hierarchy and spacing across tools - PR 11.3

docs/dev/reports/PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT_report.md

@@ -0,0 +1,44 @@
+# PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT Report
+
+## Result
+PASS
+
+## Scope
+- Visual-only refinement via shared shell CSS.
+- Applied across all tools using `body.tools-platform-surface` shared selectors.
+- No behavior/data/schema changes.
+
+## Files Changed
+- `tools/shared/platformShell.css`
+- `docs/dev/reports/PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT_report.md`
+
+## Refinements Applied
+1. Spacing tokens and base type tokens added on shared tool surface:
+   - `--tools-space-1..4`
+   - `--tools-type-body`, `--tools-type-meta`, heading scale tokens
+2. Global tool-surface typography normalization:
+   - shared body font size/line-height/letter-spacing
+   - shared heading rhythm and line-height (`h1..h4`)
+   - shared label sizing/readability
+   - shared help/meta text sizing
+3. Shared spacing rhythm improvements:
+   - `tools-platform-layout-grid` gap normalized
+   - control cluster/control row gaps normalized
+   - shared toolbar/status/canvas-toolbar spacing refined
+   - accordion summary/body spacing normalized
+
+## Constraint Compliance
+- No tool logic changes.
+- No data/schema/sample/loader modifications.
+- No `start_of_day` folder changes.
+
+## Validation
+Command run:
+- `node ./tests/runtime/LaunchSmokeAllEntries.test.mjs --tools`
+
+Result:
+- PASS `18/18`
+- FAIL `0`
+
+## Notes
+- Fullscreen header state labels and exit behavior were preserved (no shared fullscreen JS behavior changes).

docs/dev/reports/REPORT_PR_11_3.md

@@ -0,0 +1,3 @@
+# REPORT_PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT
+
+Improves readability and spacing consistency across all tools.

docs/dev/reports/launch_smoke_report.md

@@ -1,6 +1,6 @@
 # Launch Smoke Report
 
-Generated: 2026-04-28T23:01:46.332Z
+Generated: 2026-04-28T23:05:51.684Z
 
 Filters: games=false, samples=false, tools=true, sampleRange=all
 

docs/pr/PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT/BUILD.md

@@ -0,0 +1,18 @@
+# BUILD_PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT
+
+## Required Codex Work
+
+1. Normalize spacing (padding/margins)
+2. Standardize typography hierarchy
+3. Improve panel separation (subtle borders/shadows)
+4. Balance density (avoid cramped UI)
+5. Apply across all tools
+6. No behavior changes
+
+## Validation
+Create:
+docs/dev/reports/PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT_report.md
+
+## Constraints
+- Visual only
+- No logic changes

docs/pr/PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT/PLAN.md

@@ -0,0 +1,17 @@
+# PLAN_PR_11_3_VISUAL_HIERARCHY_AND_SPACING_REFINEMENT
+
+## Purpose
+Refine visual hierarchy and spacing so tools feel clean, balanced, and readable.
+
+## Scope
+- Typography scale consistency
+- Spacing (padding/margins)
+- Panel separation clarity
+- Density tuning
+- No behavior, data, or layout structure changes
+
+## Acceptance
+- Consistent spacing across panels
+- Clear visual hierarchy (title > section > content)
+- No cramped or uneven UI areas
+- No regressions

tools/shared/platformShell.css

@@ -7,10 +7,21 @@
 }
 
 body.tools-platform-surface {
+  --tools-space-1: 6px;
+  --tools-space-2: 10px;
+  --tools-space-3: 12px;
+  --tools-space-4: 16px;
+  --tools-type-body: 0.95rem;
+  --tools-type-meta: 0.82rem;
+  --tools-type-heading-1: clamp(1.08rem, 1.6vw, 1.24rem);
+  --tools-type-heading-2: clamp(0.96rem, 1.2vw, 1.06rem);
   min-height: 100vh;
   min-height: 100dvh;
   color: var(--text, #f7f4ff);
   background: var(--bg-gradient, linear-gradient(180deg, #c4b5fd 0%, #a78bfa 18%, #8b5cf6 36%, #7c3aed 54%, #6d28d9 74%, #5b21b6 88%, #4c1d95 100%));
+  font-size: var(--tools-type-body);
+  line-height: 1.45;
+  letter-spacing: 0.005em;
 }
 
 [data-tools-platform-header],
@@ -556,15 +567,15 @@ body.tools-platform-workspace-context .tools-platform-frame__shared-status stron
 
 /* Shared tool polish contract: layout spacing, control grouping, docking/resizing affordances. */
 body.tools-platform-surface .tools-platform-layout-grid {
-  gap: 12px;
+  gap: 14px;
   align-items: stretch;
 }
 
 body.tools-platform-surface .tools-platform-control-cluster {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
+  gap: var(--tools-space-2);
 }
 
 body.tools-platform-surface .tools-platform-control-cluster--primary {
@@ -584,7 +595,7 @@ body.tools-platform-surface .tools-platform-control-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
+  gap: var(--tools-space-2);
 }
 
 body.tools-platform-surface .tools-platform-control-row > button,
@@ -670,6 +681,8 @@ body.tools-platform-surface .canvas-toolbar {
   border-color: var(--line, rgba(221, 214, 254, 0.26));
   background: var(--tools-shell-glass);
   color: var(--text, #f7f4ff);
+  gap: var(--tools-space-2);
+  padding: var(--tools-space-2) var(--tools-space-3);
 }
 
 /*
@@ -755,7 +768,7 @@ body.tools-platform-surface .panel-accordion {
 body.tools-platform-surface .panel-accordion__summary {
   list-style: none;
   cursor: pointer;
-  padding: 10px;
+  padding: var(--tools-space-2) var(--tools-space-3);
   border-bottom: 1px solid transparent;
 }
 
@@ -774,7 +787,7 @@ body.tools-platform-surface .panel-accordion[open] .panel-accordion__summary {
 }
 
 body.tools-platform-surface .panel-accordion__body {
-  padding: 10px;
+  padding: var(--tools-space-3);
 }
 
 body.tools-platform-surface .panel,
@@ -786,6 +799,27 @@ body.tools-platform-surface .card {
   color: var(--text, #f7f4ff);
 }
 
+body.tools-platform-surface :is(h1, h2, h3, h4) {
+  margin: 0 0 var(--tools-space-2);
+  line-height: 1.25;
+  letter-spacing: 0.01em;
+  color: var(--text, #f7f4ff);
+}
+
+body.tools-platform-surface h1 {
+  font-size: var(--tools-type-heading-1);
+}
+
+body.tools-platform-surface :is(h2, h3, h4) {
+  font-size: var(--tools-type-heading-2);
+}
+
+body.tools-platform-surface label {
+  font-size: var(--tools-type-meta);
+  line-height: 1.3;
+  color: var(--muted, #e9ddff);
+}
+
 body.tools-platform-surface section.panel.debug-tool-panel {
   padding: 16px;
 }
@@ -935,6 +969,8 @@ body.tools-platform-surface #statusLeft,
 body.tools-platform-surface #statusCenter,
 body.tools-platform-surface #statusRight {
   color: var(--muted, #e9ddff);
+  font-size: var(--tools-type-meta);
+  line-height: 1.4;
 }
 
 body.tools-platform-surface .app-shell > .toolbar:first-child,