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.
Système de conception de grille structurelle (Exposed Grid / Rail Layout) pour les pages de destination SaaS modernes. À utiliser lors de la création de sites marketing à thème sombre, de pages de destination ou de pages de produits SaaS inspirées de Linear, Vercel, Resend et Planetscale. Fournit des fondations CSS, des modèles de section, des recettes de composants et une logique de bordure réactive pour l'esthétique de la grille visible. Source : nabinkhair42/structural-grid-skill.