Guidelines
Layout
One grid for the whole hub: a 200px rail for the category nav, then four columns with an 8px gutter. Tight gutters make the photographs read as one wall; wide rows between them let each story breathe.
Desktop anatomy
Measured from the design at 1440 wide. Rows are top aligned, so mixed crops make a ragged edge along the bottom of each row. That edge is the look.
24Rail 200324 columns · 8px gutter24
Mobile
Below 1024px the rail becomes a scrolling row of tabs above the grid, and the grid drops to two columns. The first story, wide stories and text cards take both columns; dense packing fills the holes they would leave.
| Rule | Value |
|---|---|
| Page margin | 16px |
| Gutter | 8px, both axes of the card grid |
| Columns | 2 |
| Full width | First story, two-column stories, text cards |
| Card content | Image, category, title. Excerpts hidden. |
| Category nav | Horizontal, scrolls under the margin to the screen edge |
Hero
The lead story spans the page less one column; the rail beside it holds two stories at the grid's column width, so the hero and the grid line up on the right.
lg:grid-cols-[minmax(0,3.85fr)_minmax(0,1fr)], 16:10 on desktop, 4:5 on mobile with the rail wrapping underneath in two columns.
Values
Read from the tokens where they are tokens.
| Token or class | Value | Where |
|---|---|---|
--page-margin | 16px, 24px from lg | Every edge of the page |
--grid-gutter | 8px | Between cards, both ways within a band |
--spacing-rail | 200px | Category nav column |
gap-x-8 | 32px | Rail to content |
gap-y-10 lg:gap-y-12 | 40px, 48px | Between rows of stories |
py-14 lg:py-20 | 56px, 80px | Inside a paper band |
lg | 1024px | The one layout breakpoint |
<RailLayout
intro={<SectionIntro title="Explore the world of Coach" />}
rail={<CategoryNav categories={categories} active={active} />}
>
<StoryGrid items={exploreGrid} />
</RailLayout>