Layout
A 4px spacing scale with a three-step rhythm: inside a group, between groups, between sections.
Spacing Scale
Every gap and padding comes from this 4px scale.
14px28px312px416px624px832px1040px1664px2496pxRhythm and Breakpoints
Spacing follows a 4px scale: 4, 8, 12, 16, 24, 32, 40, 64, 96px. Keep a three-step rhythm: 8px inside a group, 16px between groups, 32–40px between sections. Cards use 24px padding, 16px when compact and 32px for hero areas. Center content in a 1200px column with side padding that grows at wider breakpoints, and make every layout work on mobile and desktop. Breakpoints are sm 401px, md 601px, lg 961px, xl 1200px, and 2xl 1400px.
Every scrolling region below the page itself uses ScrollArea, which fades the edge wherever more content waits.