Structural Grid Design System

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.

Core Principles

1. Visible structure — Vertical rail lines and horizontal dividers are decorative elements, not hidden scaffolding
2. Content lives inside the grid — Components blend into the rail structure rather than floating over it
3. Dashed internal, solid external — Rail lines and section dividers are solid; internal grid cell dividers are dashed
4. Alternating visual rhythm — Sections alternate between default and dot-pattern backgrounds for depth
5. Minimal containers — No rounded-xl bordered cards floating inside sections. Content sits directly within the grid
6. Consistent letter-spacing — Use tracking-wide on all section labels and inline labels. Never mix tracking-widest and tracking-wider
7. Every card hovers — All grid cells get transition-colors hover:bg-white/[0.02] for interactive feedback

CSS Foundation

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