r12: grid overlay & layout inspector

▔▔▔▔▔▔▔▔▔▔▔▔▔▔
r12 is a precision grid overlay for anyone who values structure — from web designers and developers to creatives and professionals.

Activate it with a single click to visualize 12-column, modular, baseline or rule-of-thirds systems directly on websites, documents, design tools or even your resume.

Built around clarity, order, and usability.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔
⊞ GRID OVERLAYS
▪︎ Classic Guides — 12-column, rule-of-thirds, modular, baseline and center lines.
▪︎ Columns & Rows — customizable, responsive grids for any layout.
▪︎ Device Presets — mobile, tablet, laptop, desktop.
▪︎ Gutter Control — adjust inner and outer gutters independently.

⧉ RESPONSIVE MODE
▪︎ Each preset automatically adjusts columns, rows, gutters, and margins.
▪︎ Switch between mobile, tablet, laptop, and desktop layouts.
▪︎ Adjust breakpoint widths for each device.
▪︎ Preview responsive layouts instantly.

⇥ MARGIN CONTROL ⇤
▪︎ Linked / Unlinked Margins — control spacing uniformly or adjust sides independently.
▪︎ Position grids anywhere — align over resumes, portfolios, design tools, or websites.
▪︎ Outer Gutter Toggle — switch between margin-based or gutter-based edges.
▪︎ Responsive Margins — adapt automatically to device presets.

⌖ PRECISION CONTROLS
▪︎ Drag sliders to quickly set grid values.
▪︎ Use arrow keys for precise adjustments.
▪︎ Contrast Control — adjust color, opacity, and line weight.
▪︎ Live Preview — see changes instantly as you adjust settings.

⛭ PERFORMANCE & PRIVACY
▪︎ Works anywhere — on design tools, web apps, or static pages.
▪︎ State Memory — all controls are synced to browser storage.
▪︎ Lightweight overlays — zero impact on performance.
▪︎ No analytics, cookies, or data collection — ever.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔
⌘ HOW TO USE
↳ Add r12 to Chrome and pin it to your toolbar.
↳ Click the r12 globe icon.
↳ Adjust columns, gutters, and margins from the popup.
↳ Use Responsive Mode to preview grids across devices.
↳ Review your layouts.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔
❖ FAQ
▪︎. If grids are not visible, refresh the page or restart the browser.
▪︎. Saves local preferences (grid, margins, color) — no personal data collected.
▪︎ Works on all websites and web-based design tools (e.g., Figma, Canva, Notion).
▪︎ Supports both light and dark modes.
▪︎ Free to use.

▔▔▔▔▔▔▔▔▔▔▔▔▔▔
⁂ GRID FOUNDATIONS
▪︎ Figma — Layout Grids
⤏ figma.com/best-practices/everything-you-need-to-know-about-layout-grids/
▪︎ Google — Material Design Layout
⤏ m3.material.io/foundations/layout/understanding-layout
▪︎ Design Lab — History & Theory
⤏ designlab.com/blog/grid-systems-history-ux-ui-layout

▔▔▔▔▔▔▔▔▔▔▔▔▔▔
Questions or feedback?
💌 [email protected]

Changelog: r12.io/changelog

▔▔▔▔▔▔▔▔▔▔▔▔▔▔