Features

Minimal. Functional. Modular.

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

Activate it with one click to visualize 12-column, modular, 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.

⧉ RESPONSIVE MODE

• Each preset adapts columns, rows, gutters, and margins automatically.
• Switch between mobile, tablet, laptop, and desktop layouts.
• Adjust breakpoints for each device.
• Preview grids for different devices.

⇥ 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 — automatically adapt to each device preset.

⊡ POPUP CONTROLS

• Minimal, fast, and accessible interface.
• Contrast Control — adjust grid color, line width and opacity.
• Live Preview — see changes instantly as you adjust settings.
• Accessibility — ARIA labels, keyboard navigation, high contrast.

⛭ 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 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.

Questions or feedback?
💌 r12.grids@gmail.com