Launching today

r12

Launching today

a Swiss-inspired grid overlay for designers and developers

2 followers

a Swiss-inspired grid overlay for designers and developers

2 followers

Visit website

r12 is a lightweight grid overlay for inspecting layout structure on the web. Visualize 12-column, modular, baseline, and rule-of-thirds systems directly on any site to check alignment and spacing in real context. Designed for speed and simplicity; no setup, no friction, just a quick way to bring structure into your workflow. Inspired by Swiss design principles. Already used by designers and developers, and featured on the Chrome Web Store.

Free

Launch tags:Chrome Extensions•Design Tools•Graphics & Design

Launch Team

Mintlify Editor — Knowledge infrastructure for AI agents

Knowledge infrastructure for AI agents

Promoted

Maker

📌

Hello! I built r12 because I was constantly frustrated with eyeballing layouts while building UIs. I’ve lately been inspired by Swiss design and wanted to bring that into the chrome browser in a simple way. r12 lets you overlay a clean grid system on any web surface so you can instantly check alignment, spacing, and layout decisions. It’s designed to be lightweight, fast, and out of your way. Curious to know: – Does this fit into your workflow? – Anything missing that would make it more useful?

Report

13d ago

Forum Threads

p/r12

•

13d ago

Curious to know the tech behind r12?

As a developer, I wanted to embrace Swiss design principles not only in UI/UX design but also in software development.

r12 is built on these principles by using pure JavaScript, HTML, and CSS to enhance performance and reduce bundle size. And uses the most efficient compression libraries: html-minify-html for HTML, parcel for CSS, and swc for JavaScript.

View all