Foundations
Layout and spacing
Page widths, the 4px spacing grid and how sections group.
Page widths
Every page sits in the header’s 1280px frame, left-aligned, so titles line up under the logo. Page width caps the content column; pages never set their own max-w-*.
| Width | Column | Use it for |
|---|---|---|
reading | 768px | Text read top to bottom: Rules, Glossary |
tool | 1024px | Things you use: Learn, Play, Strategy, Odds Lab, game pages |
wide | 1280px | Grids of cards: Games, the home page, this design system |
Spacing
Spacing follows a 4px grid through Tailwind’s scale. Space inside a group is smaller than space between groups.
space-14px: Icon to its labelspace-28px: Items in a row of chips or buttonsspace-312px: Cards in a grid; lines in a control groupspace-416px: Inside a panel on phones; between related blocksspace-624px: Inside a panel on wider screens; between panelsspace-832px: After the PageHeaderspace-1248px: Between page sections; before NextStepBreakpoints
| From | Name | What changes |
|---|---|---|
| 0 | phone | One column. Your seat comes right after the call in Play. 16px gutters. |
| 640px | sm | Two-column grids; headings grow. |
| 768px | md | The header shows the full navigation. |
| 1024px | lg | Side panels (Play’s order of play, this sidebar). |
Grouping
Do
- Group a section in one Panel.
- Inside a Panel, group with a heading, a divider, a Stat or a plain bordered box.
- One tool panel per page: the thing you interact with.
Don’t
- Nest a Panel inside a Panel.
- Use ui/card (use Panel).
- Center-align content inside left-aligned pages.