Skip to main contenteBay Playbook

Layout in product

A responsive grid dynamically updates the page layout according to viewport size. The use of a grid allows us to remain consistent throughout our products and platforms.

Stylized graphic for 3 different screen sizes with grids.

Grids

We have four main grid presets to consolidate margin and gutter adjustments across breakpoints. Please note that these names are slightly different than the ones found in the breakpoints section below.

Small 8 column (320–511px)

Use for small to medium screens.

Construction

  • 8 columns flexed
  • 8px gutters
  • 16px margins fixed

Medium 16 column (512–1279px)

Use for medium to large screens.

Construction

  • 16 columns flexed
  • 16px gutters
  • 32px margins fixed

Large 16 column (1280–1679px)

Use for large to x-large screens.

Construction

  • 16 columns flexed
  • 16px gutters
  • 48px margins fixed

X-large 16 column (1680px+)

Use for x-large screens. The columns are fixed-widths with auto margins from 1680px+. Max design area excluding margins is 1584px wide.

Construction

  • 16 columns fixed
  • 16px gutters
  • Margins auto/flexed

Spacing blocks

Spacing blocks are used to create spacing and dimension throughout the system.

Activating grids in Figma

To activate grids in Figma, select a frame, navigate to the "layout grid" section on the right panel, and select the "style" button that appears on hover. Choose the appropriate grid from the menu.

Screen sizes for designers

Designers should create focused layouts for at least three core screen sizes—small (375px), medium (768px), and large (1280px)—to effectively collaborate with development partners. While (320px) widths may not be a standard design size, it is our minimum supported viewport and should remain a consideration. Whenever possible, we recommend designing across the full range of screen sizes listed below to ensure optimal behavior at all breakpoints and a smoother development handoff.

Breakpoints

Resources