Scaffold
A fundamental UI design structure that provides a standard platform for assembling key components
Overview · Bars · Rails · Panes

- The layout scaffold structures every piece of an adaptive layout into bars, rails, and panes
- Bars can frame the page to help people navigate through a product
- Rails create the perimeter space surrounding panes, creating space for elements like navigation and toolbars
- Panes hold a product’s primary content, adapting to breakpoints (previously window size classes) and other conditions
Availability & resources
| Type | Resource | Status |
|---|---|---|
| Design | M3 Design Kit (Figma) | Available |
| Spacing system & tokens | Available | |
| Implementation | Jetpack Compose: Rulers | Available |

- Safety region
- Bar
- Pane
- Rail