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。