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.
Structural Grid (Exposed Grid / Rail Layout) design system for modern SaaS landing pages. Use when building dark-themed marketing sites, landing pages, or SaaS product pages inspired by Linear, Vercel, Resend, and Planetscale. Provides CSS foundations, section patterns, component recipes, and responsive border logic for the visible-grid aesthetic. Source: nabinkhair42/structural-grid-skill.