structural-grid

You are implementing a Structural Grid (also called "Exposed Grid" or "Rail Layout") design pattern. This is the modern SaaS design pattern used by Linear, Vercel, Resend, Profound, and Planetscale — where the underlying page grid is promoted to a first-class visual element.

Add these to your global CSS. All measurements derive from a single --rail-offset variable.

Always use overflow-x: clip on .page-rails, NEVER overflow-x: hidden. hidden creates a new scroll container which breaks position: sticky on any descendant. clip clips overflow visually without affecting scroll/sticky behavior.

適用於現代 SaaS 登陸頁面的結構網格（露出網格/導軌佈局）設計系統。在建立受 Linear、Vercel、Resend 和 Planetscale 啟發的深色主題行銷網站、登陸頁面或 SaaS 產品頁面時使用。提供 CSS 基礎、部分模式、元件配方和響應式邊框邏輯，以實現可見網格美感。 來源：nabinkhair42/structural-grid-skill。