Skip to content

Swiss Tech MonoMotion

Grid Guides

The page's printed grid: column guides on the Container's columns behind everything (-z-10, no pointer events), drawing down once when fonts are ready; with ruler, the numbered 01–12 column ruler with ink majors, in the flow where you place it.

Live, interactive React component · light themeResponsive

About the Swiss Tech Mono Grid Guides

The page's printed grid: column guides on the Container's columns behind everything (-z-10, no pointer events), drawing down once when fonts are ready; with ruler, the numbered 01–12 column ruler with ink majors, in the flow where you place it. One per page, right after the Navbar. The page root needs relative isolate (or, with fixed={false}, the parent band) so the guides sit above the page ground and below the content. Phones always show 4 columns.

It is part of Swiss Tech Mono. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.