# V6 Design 026 - Clean Focus Board ## Thesis Clean Focus Board uses smart resize as the primary interaction: the WordPress iframe and one secondary surface are always present, and the labeled seam teaches the current ratio. The default state keeps the iframe dominant at `76 / 24`, the preview snap compresses tools to an icon rail for a near-full live site, work snaps expand the pane for files/logs/blueprints, and full preview hides all chrome with an Esc exit pill. ## TypeUI Skill Used I used `clean` from `v6/style-skills/typeui-clean.md`. It is applied beyond color: Poppins is used for headings, Roboto for body/UI, Inconsolata for paths, labels, ratios, logs, code, and blueprint JSON; the palette follows Clean's white surfaces, `#111827` text, blue primary, violet secondary, and semantic success/warning/danger states; radii stay at 4px and 8px; spacing follows an 8pt rhythm; surfaces are flat, bordered, and low-shadow rather than decorative; motion/state language is shown through the one-shot seam pulse, snap labels, saved-state dot, loading overlay, toast, and reset gating. ## Remix / Merge / Remove From `023-smart-resize`, I kept focus-as-layout, snap ratios, a gauge, and fullscreen escape, then made the teaching layer more explicit with visible `92 / 76 / 60 / 48` detents and a one-shot pulse. From `018-quiet-rail-to-loud`, I kept one secondary surface and quiet-to-loud reveal, but replaced the dark rail with a clean preview icon rail. From `036-corner-widget-control-center`, I kept the Sites-as-canonical-door lesson: Sites owns saved playgrounds, all six launch routes, import, featured blueprints, and the full gallery. From `035-three-layer-depth`, I borrowed only mild elevation and blur polish. I avoided `030-two-row-top-bar`: there is one compact command capsule, not persistent identity and context rows. ## Trade-offs The Clean style risks looking similar to other V6 white/blue entries, so this version pushes difference through geometry and behavior: the pane can collapse into a narrow preview rail, the seam is a vertical teaching object, and mobile rotates the same ratio system instead of becoming a fallback drawer. The top command capsule still exposes Sites, Manager, and Settings because those are current Playground top-bar capabilities; Settings deep-links to the single Manager Settings tab rather than opening a duplicate popover. The mock site is inside a real `