{
 "id": "3.12",
 "title": "Web and phone layouts",
 "department": "Design",
 "department_slug": "design",
 "direction": null,
 "branded": false,
 "status": "draft",
 "owner": "Param",
 "last_verified": "Mon Oct 26",
 "holds": "Rail and two-pane Make it on the web, bottom bar on a phone",
 "urls": {
  "html": "https://handbook.joinsquareup.com/design/web-and-phone-layouts",
  "markdown": "https://handbook.joinsquareup.com/design/web-and-phone-layouts.md",
  "json": "https://handbook.joinsquareup.com/design/web-and-phone-layouts.json"
 },
 "other_directions": [],
 "tldr": {
  "headline": "Phone first, with three widths replacing today's twenty one breakpoints",
  "points": [
   {
    "icon": "map",
    "text": "Under 600 px: three bottom tabs and one column."
   },
   {
    "icon": "eye",
    "text": "600 to 1024 px: two columns of cards and a sheet from the right."
   },
   {
    "icon": "gear",
    "text": "Over 1024 px: left rail, side peek and a two pane Make it."
   },
   {
    "icon": "warn",
    "text": "The kit has no tablet frame yet; one at 820 by 1180 is proposed."
   },
   {
    "icon": "flag",
    "text": "No sideways page scroll at any width."
   }
  ],
  "stat": {
   "value": "21",
   "label": "Breakpoints in the live CSS"
  },
  "decide": "Draw a tablet frame before tablet ships, and keep 1024 for the rail?",
  "mood": "building"
 },
 "sources": [
  "brand-directions/_shared/product-model.md:221-250",
  "brand-directions/_shared/ia.md:7-52",
  "brand-directions/_kit/kit.css:16-19, 36-52, 60, 81-94, 132, 318, 341, 551-563",
  "brand-directions/_kit/render.js:1-3, 68-72",
  "brand-directions/book/content/e2.js:123-170",
  "brew origin/main b91e364: public/feed-system.css:36; public/brew.css:1498; public/jam-fit.css:18-22; public/index.html viewport meta; all public/*.css breakpoints",
  "memory: brew-one-stage"
 ],
 "open_questions": [
  "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."
 ],
 "parts": {
  "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.\n\n| Fact | Source |\n|---|---|\n| 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 | [src: brew origin/main public/*.css] |\n| The feed is one column, 530 px wide | [src: brew origin/main public/feed-system.css:36] |\n| The desktop rail shrinks to 60 px when the card page opens full | [src: brew origin/main public/brew.css:1498] |\n| Below 861 px the jam's ship bar floats over the stage, which keeps room for it | [src: brew origin/main public/jam-fit.css:21-22] |\n| The ship bar stacks under 640 px of canvas, by a container query | [src: memory brew-one-stage] |\n| The viewport fits the device, covers the notch and resizes with the keyboard | [src: brew origin/main public/index.html] |\n| Navigation today has a rail, a phone tab bar, a top bar, phone titles and a floating round button | [src: brand-directions/_shared/surface-map.md:461] |\n| The kit draws phones at 390 by 844 and the desktop at 1280 by 800, scaled to fit | [src: brand-directions/_kit/kit.css:36-49] [src: brand-directions/_kit/render.js:68-72] |\n| The kit has no tablet frame yet | [src: brand-directions/book/content/e2.js:136] |",
  "Tomorrow": "### By width\n\n| Width | Navigation | Today | A pick | Make it | Version | Tag |\n|---|---|---|---|---|---|---|\n| 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 |\n| 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 |\n| 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 |\n\n[src: brand-directions/_shared/product-model.md:242-248] Three breakpoints replace today's 21.\n\n### The parts, measured\n\n| Part | Phone | Laptop | Source |\n|---|---|---|---|\n| Gutter | 16 px | 32 px page padding | [src: brand-directions/_kit/kit.css:19, 550] |\n| Spacing steps | 4, 8, 12, 16, 20, 24, 32, 40, 56 px | same | [src: brand-directions/_kit/kit.css:16] |\n| Top bar | 56 px: brand mark, character corner, your picture | 64 px over the main column | [src: brand-directions/_kit/kit.css:60, 550] |\n| Tabs | Bottom bar of three, 26 px bottom padding for the home bar | Rail 236 px wide, items 42 px tall | [src: brand-directions/_kit/kit.css:81, 88-90] |\n| Today | One column | Picks up to 520 px, Need your yes 340 px beside, sticky | [src: brand-directions/_kit/kit.css:551-554] |\n| Bottom bar | One main button filling the bar, 28 px bottom padding | the same inside the side peek | [src: brand-directions/_kit/kit.css:132-133] |\n| Sheet | From the bottom, at most 88 percent tall | a centred panel | [src: brand-directions/_kit/kit.css:318] [src: brand-directions/book/content/e.js:177] |\n| Toast | 96 px above the bottom, full width less gutters | bottom of the main column | [src: brand-directions/_kit/kit.css:341] |\n| Make it | stacked | thing column plus a 420 px chat column; the thing up to 520 px tall at 4 to 5 | [src: brand-directions/_kit/kit.css:556-560] |\n\n### Places outside the app\n\n| Place | Layout | Version | Tag |\n|---|---|---|---|\n| Inside Shopify | The same Paste screen with the store filled in; follows phone or laptop rules by width | v1 | Changes |\n| Monday email | One column, picks as rows, one block button, small sign off | v1 | New |\n| Brief status email | One column, where it is, one button | v1 | Changes |\n| Brief page | One read only page, phone first, no login | v1 | Changes |\n\n[src: brand-directions/_shared/ia.md:31, 62] [src: brand-directions/book/content/e2.js:147-170]\n\n### Later\n\n| Item | Version | Tag |\n|---|---|---|\n| Brand switcher on the brand mark, for people with several brands | v2 | New |\n| A Scheduled column on Work and a time picker in Hand it off | v2 | New |\n| How it went, with charts that fit one column on a phone | v3 | New |",
  "How we do it": "1. Design the phone at 390 wide first, then check 360 and 430.\n2. Check 768 and 1024 for the tablet rules, then 1280 and 1440 for the laptop.\n3. No sideways page scroll at any width. Tables sit in their own scroll box.\n4. The bottom bar and the main button sit in the thumb zone on phones.\n5. The open pick never jumps to a full page on a laptop; it is a side peek.\n6. 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 |\n|---|---|---|---|---|\n| Width breakpoints | Distinct width media queries in the shipped CSS | 21 | CSS scan | Measured |\n| Sideways scroll | Screens that scroll sideways at 360 wide | not measured | Headless audit at 360, 390, 768, 1280 | Proposed |\n| Phone share | Share of sessions under 600 px wide | not measured | Analytics | Proposed |",
  "Open": "1. Tablet has no kit frame. Draw one at 820 by 1180 before tablet ships? Proposal: yes, in v1, since the rules exist.\n2. Does the Shopify admin frame need a slimmer top bar? Proposal: test it against Shopify's App Bridge rules after the app review clears.\n3. 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."
 }
}