r12

a Swiss-inspired grid overlay for designers and developers

2 followers

a Swiss-inspired grid overlay for designers and developers

2 followers

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

LightfieldAI-native CRM that builds itself and does work for you

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

4mo ago

Forum Threads

p/r12

•

4mo 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