Answer
Brew is phone first: three bottom tabs and one column under 600 px, a left rail with a side peek and a two pane Make it over 1024 px, and these widths settle where every screen part sits.
Today
Checked 26 October 2026 against brew origin/main at b91e364.
| Fact | Source |
|---|---|
| The live stylesheets use 21 different width breakpoints; 700 px is the most common, in 46 rules, then 560 in 25 and 600 in 16 | brew origin/main public/*.css |
| The feed is one column, 530 px wide | brew origin/main public/feed-system.css:36 |
| The desktop rail shrinks to 60 px when the card page opens full | brew origin/main public/brew.css:1498 |
| Below 861 px the jam's ship bar floats over the stage, which keeps room for it | brew origin/main public/jam-fit.css:21-22 |
| The ship bar stacks under 640 px of canvas, by a container query | memory brew-one-stage |
| The viewport fits the device, covers the notch and resizes with the keyboard | brew origin/main public/index.html |
| Navigation today has a rail, a phone tab bar, a top bar, phone titles and a floating round button | brand-directions/_shared/surface-map.md:461 |
| The kit draws phones at 390 by 844 and the desktop at 1280 by 800, scaled to fit | brand-directions/_kit/kit.css:36-49 brand-directions/_kit/render.js:68-72 |
| The kit has no tablet frame yet | brand-directions/book/content/e2.js:136 |
Tomorrow
By width
| Width | Navigation | Today | A pick | Make it | Version | Tag |
|---|---|---|---|---|---|---|
| Phone, under 600 | Bottom tabs, top bar with the character corner | One column: greeting, Need your yes, rings, picks | Full screen sheet over Today | The thing on top, chat below, Hand it off bar at the bottom | v1 | Changes |
| Tablet, 600 to 1024 | Bottom tabs | Two columns of cards | Sheet from the right, half width | Side by side in landscape, stacked in portrait | v1 | New |
| Laptop, over 1024 | Left rail of three, Settings at its foot | Picks in a column, Need your yes beside it | Side peek beside the list, Esc closes | The thing left, chat right, full window | v1 | Changes |
brand-directions/_shared/product-model.md:242-248 Three breakpoints replace today's 21.
The parts, measured
| Part | Phone | Laptop | Source |
|---|---|---|---|
| Gutter | 16 px | 32 px page padding | brand-directions/_kit/kit.css:19, 550 |
| Spacing steps | 4, 8, 12, 16, 20, 24, 32, 40, 56 px | same | brand-directions/_kit/kit.css:16 |
| Top bar | 56 px: brand mark, character corner, your picture | 64 px over the main column | brand-directions/_kit/kit.css:60, 550 |
| Tabs | Bottom bar of three, 26 px bottom padding for the home bar | Rail 236 px wide, items 42 px tall | brand-directions/_kit/kit.css:81, 88-90 |
| Today | One column | Picks up to 520 px, Need your yes 340 px beside, sticky | brand-directions/_kit/kit.css:551-554 |
| Bottom bar | One main button filling the bar, 28 px bottom padding | the same inside the side peek | brand-directions/_kit/kit.css:132-133 |
| Sheet | From the bottom, at most 88 percent tall | a centred panel | brand-directions/_kit/kit.css:318 brand-directions/book/content/e.js:177 |
| Toast | 96 px above the bottom, full width less gutters | bottom of the main column | brand-directions/_kit/kit.css:341 |
| Make it | stacked | thing column plus a 420 px chat column; the thing up to 520 px tall at 4 to 5 | brand-directions/_kit/kit.css:556-560 |
Places outside the app
| Place | Layout | Version | Tag |
|---|---|---|---|
| Inside Shopify | The same Paste screen with the store filled in; follows phone or laptop rules by width | v1 | Changes |
| Monday email | One column, picks as rows, one block button, small sign off | v1 | New |
| Brief status email | One column, where it is, one button | v1 | Changes |
| Brief page | One read only page, phone first, no login | v1 | Changes |
brand-directions/_shared/ia.md:31, 62 brand-directions/book/content/e2.js:147-170
Later
| Item | Version | Tag |
|---|---|---|
| Brand switcher on the brand mark, for people with several brands | v2 | New |
| A Scheduled column on Work and a time picker in Hand it off | v2 | New |
| How it went, with charts that fit one column on a phone | v3 | New |
How we do it
- Design the phone at 390 wide first, then check 360 and 430.
- Check 768 and 1024 for the tablet rules, then 1280 and 1440 for the laptop.
- No sideways page scroll at any width. Tables sit in their own scroll box.
- The bottom bar and the main button sit in the thumb zone on phones.
- The open pick never jumps to a full page on a laptop; it is a side peek.
- Use only the three breakpoints, 600 and 1024 by width, plus a container query where a pane, not the page, sets the size.
Numbers
| Number | Definition | Today | Where it is measured | Status |
|---|---|---|---|---|
| Width breakpoints | Distinct width media queries in the shipped CSS | 21 | CSS scan | Measured |
| Sideways scroll | Screens that scroll sideways at 360 wide | not measured | Headless audit at 360, 390, 768, 1280 | Proposed |
| Phone share | Share of sessions under 600 px wide | not measured | Analytics | Proposed |
Open
- Tablet has no kit frame. Draw one at 820 by 1180 before tablet ships? Proposal: yes, in v1, since the rules exist.
- Does the Shopify admin frame need a slimmer top bar? Proposal: test it against Shopify's App Bridge rules after the app review clears.
- Is 1024 the right switch to the rail, given today's most common break is 700? Proposal: keep 1024 from the model, and use two columns of cards between 600 and 1024.