# V6 Design 015 - Refined Depth Workbench

## Thesis
Refined Depth Workbench is a professional product surface that uses depth as visual hierarchy, not as a navigation model. The live WordPress iframe remains the credible center, while a quiet rail expands into one secondary pane for Sites or Site Manager work. The design makes the core interaction teach itself: the depth ribbon labels `L1 rail`, `L2 one pane`, and `L3 live site`, and the ratio strip exposes `Site focus 82/18`, `Balanced 72/28`, and `Pane focus 52/48` as visible snap states. Full preview hides all chrome and exits with `Esc`.

## TypeUI Skill Used
I used the assigned **TypeUI Refined** skill from `v6/style-skills/typeui-refined.md`. It is applied beyond colors: Playfair Display shapes the product title, section headings, and card hierarchy; JetBrains Mono handles caps labels, route inputs, logs, code, tags, and ratio states; the palette uses the required blue primary, violet secondary, success, warning, and danger tokens; surfaces are white, layered, and restrained; radii stay at 4px and 8px inside an 18px shell; spacing follows the 4/8/12/16/24/32 rhythm; interaction states are expressed through focused edges, active tabs, depth labels, typed destructive confirmation, toast feedback, and booting overlay.

## Remix / Merge / Remove
From `018-quiet-rail-to-loud`, I kept the rail-to-pane reveal, one secondary surface, and restraint, but replaced the dark rail skin with a refined layered white surface. From `023-smart-resize`, I kept the ratio gauge and focus-shift idea, making the detents explicit and clickable. From `035-three-layer-depth`, I borrowed elevation, blur, tint, and labeled depth, but removed abstract z-stack navigation. From `036-corner-widget-control-center`, I kept the compact Sites widget as the canonical saved-site, launch, import, and blueprint discovery door. I avoided `030-two-row-top-bar`: there is one compact toolbar plus a rail, not a persistent two-row chrome model.

## Trade-offs
The top toolbar and rail both expose shortcuts into the same canonical destinations because the current Playground inventory expects saved playgrounds, Site Manager, and settings access near the top-level chrome. They do not open separate UI: Sites owns saved sessions, all six launch routes, import `.zip`, featured blueprints, and the full 43-blueprint gallery; Site Manager owns Settings, Files, Blueprint editor, Database, Logs, WP Admin, Homepage, Export to GitHub PR, and Download `.zip`. The pane is always present on desktop, so users use the ratio strip or full preview when they want stronger iframe focus. Mobile keeps the same rail, pane, toolbar, ratio, and full-preview logic, but stacks the surfaces vertically.

## Self-Critique / Revision Note
After checking `v6/INSIGHTS.md`, I revised the concept to keep only one secondary pane and folded blueprint discovery into Sites while keeping active `blueprint.json` editing inside Site Manager. After checking `v6/STYLE_VARIATION_SYSTEM.md`, I tightened the refined style beyond color by using the assigned type stack, white depth surfaces, compact radii, mono labels, and explicit state language. Remaining weakness: the toolbar shortcuts may read as duplicate doors unless reviewers notice they route to the same rail/pane states; the design makes that ownership visible in the pane copy and tabs rather than adding another explanatory screen.

## Feature Coverage
The static mock includes refresh, address/path input, Playground name, Save, Saved Playgrounds launcher, Site Manager/tools access, settings access, Vanilla WordPress, WordPress PR, Gutenberg PR/branch, From GitHub, Blueprint URL, Import `.zip`, featured blueprints, full 43-blueprint gallery with search and category filters, Your Playgrounds, Settings, Files, Blueprint editor, Database, Logs, WP Admin, Homepage, Export to GitHub PR, Download `.zip`, loading/booting, active session, save/resume toast, destructive Apply & Reset confirmation, route-specific input forms, full preview mode, and responsive mobile parity.