patterns / 08 Guides over real content Inspect columns and rhythm in the same logical coordinates as the artwork, then apply a deliberate guide snapshot.
Session only Preview Usage
Try the controls Use Guides to compare Blank page, Type sample and Current layout. Toggle columns, baseline or square grid without changing artwork. Open the separate Layout workspace to browse all 15 sources, then Snap/Release deliberately. Keep two named guide sets, Save/Reopen and compare workspace JSON, current-preview SVG and responsive CSS in this independent memory example.
Opening Studio preview Opening Studio…
Usage Choose a blank, sample or real source-layout view, then compare column edges and horizontal/square-grid intervals. Use Apply/Snap explicitly. Changing guide visibility, color, opacity or preview zoom leaves the saved document and applied snapshot intact. Variants Blank guides Sample with guides Layout with guides Frozen Apply/Snap Custom guide paint and light/dark guide canvas
Preview states
Integration boundary Snap quantizes boxes, line boxes and spacing; it does not measure font glyph baselines. Exhaustive keyboard/mobile and delivery acceptance is recorded separately. The overlay is reusable within this host. Arbitrary external pages, persistent uploaded artwork and a distributable package are not connected. Source modules 9 conceptualize/components/studio-v2/studio-guide-overlay.tsxconceptualize/components/studio-v2/studio-grid-guides-inspector.tsxconceptualize/components/studio-v2/studio-grid-guide-appearance.tsxconceptualize/components/studio-v2/use-studio-grid-workspace-view.tsconceptualize/components/studio-v2/studio-grid-layout-canvas.tsxconceptualize/components/studio-v2/studio-grid-layout-workspace.tsxconceptualize/lib/grid-model.tsconceptualize/lib/grid-layout-session.tsconceptualize/lib/grid-layout-geometry.ts