Designing for iPhone Duo - HIG Guide in 5 Minutes

September 12, 2026

On September 9, 2026, Apple introduced iPhone Duo - its first foldable iPhone and published a matching "Designing for iPhone Duo" page in the Human Interface Guidelines the same afternoon. Three developer Tech Talks followed, walking through the layout system, the toolbar changes, and the new adaptive containers in more depth. This is the short version: what changes for your interface, and why.

iphone duo

Design for size classes, not poses

iPhone Duo can be held, folded, or propped up in several different positions - Apple calls these poses. The guidance is not to build a custom layout for each one. Instead, design around two familiar size classes:

  • Compact width for the outer display (the cover screen, used when the device is closed)
  • Regular width for the inner display (used when the device is open)

If your interface already adapts using size classes, layout margins, and safe-area insets, it should largely adjust on its own. Apple explicitly discourages fixed widths, hard breakpoints, or any metric tied to a specific screen size - the device can transition between poses at any moment, and the interface needs to follow along without a visible seam.

One optional third layout applies when the device is standing on a surface like a small tent: media and glanceable content sit up top, while tappable controls anchor to the bottom, closer to the hand. This layout should carry the same controls and hierarchy as every other pose - it's a rearrangement, not a reduced feature set.

Bars move to the side

On the outer display, navigation bars, toolbars, tab bars, and the status bar shift from the top and bottom edges to the right side of the screen. The goal is to reclaim vertical space and keep controls within reach of a thumb. On the inner display, bars stay vertical in landscape but return to a horizontal layout in portrait, where there's enough room for them to sit at the top as usual.

Two things decide whether an individual control can go vertical:

  1. The container it lives in. Standard containers like a tab view or navigation stack pick up the new behavior automatically. Custom toolbar or navigation bar implementations are not adapted for you.
  2. What the control contains. Icon-only controls translate well to a vertical bar. Text-only controls, segmented controls, and elements that switch between an icon and a label (like an Edit button) stay horizontal, since a vertical bar has a fixed width but flexible height.

The ordering convention: navigation actions like Back or Close sit at the top of the vertical bar, followed by a prominent action like Done, with a visual gap separating that group from everything else. When space runs short, items should overflow in a predictable order - frequently used actions and badged items should be the last things pushed into an overflow menu.

bars move to the side

Offsetting content from the side bar

Because controls now live along one edge, most content should be inset from that edge rather than centered across the full display. Aligning to the horizontal safe area handles this automatically in most layouts. A centered, edge-to-edge treatment is still appropriate for immersive content that doesn't scroll - as long as nothing interactive ends up hidden behind the controls. A hybrid works too: a full-bleed background image or header, paired with inset, scrollable foreground content, is a common and supported pattern.

Displacement: what moves near the fold

When the device is partially folded, the crease running through the display becomes an area the interface should treat with care. Apple's term for handling this is displacement: repositioning existing elements - rather than redesigning them so nothing important lands directly in the fold.

A few rules govern this:

  • Elements that can move independently should move independently; elements that belong together should move together, so their relationship stays visible.
  • Movement should be minimal. Shifting something far from where it started weakens the connection between related elements.
  • Scrolling content is exempt. Feeds, articles, documents, and lists already adapt through scrolling, so they shouldn't also be shifted around the fold.

Where things move depends on the pose. Held open like a book, displaced elements - alerts, for instance shift toward the trailing edge, which keeps them close to where they'll reappear if the device closes. Propped up like a tent, glanceable content moves to the top region and interactive controls move to the bottom, where the surface is more stable for tapping.

System-provided elements like action sheets, alerts, menus, popovers, and split-view columns get this behavior automatically. Custom grids and layouts are where you'll need to make the call yourself; a common technique is preserving outer margins while adding extra spacing around the hinge, and generally preferring an even number of columns.

iphone duo partially opened inner display

Reserved regions

Two hardware features carve out space the layout system now treats specially, called reserved regions: the fold itself, and the inner camera when it's active.

  • The fold is a division region - it splits the display into two areas, and only exists while the device is folded. Flat, it has no width at all.
  • The camera is an occlusion region - it doesn't divide the display, it just covers part of it, and is only active while the camera itself is in use.

Both are queryable in code (through a geometry proxy in SwiftUI, or directly on a view in UIKit) so custom layouts can react to them the same way they already react to safe areas.

Arrangements: a new layout container

Sitting between navigation containers and content is a new container type called an arrangement, which lays out a primary and secondary view according to the available space, aspect ratio, and whether the fold is active.

Two styles exist:

  • Split - places the two views side by side or stacked, and is the natural upgrade path if you're already using a horizontal or vertical stack.
  • Overlay - layers the two views, similar to how a ZStack works today, and flips to a side-by-side layout automatically when the device folds.

As a rule of thumb: use overlay when one view is a foreground layer over a background (like controls over readable content), and split when the two views are more of a main-and-detail pair, such as a podcast and its transcript, where neither should ever be obscured. Arrangements are meant to sit around navigation containers, not inside them, and aren't intended for use inside a list or scroll view.

iphone duo split view

The inner display, three ways

Apple describes three honest ways to use the extra space on the inner display, rather than simply stretching an existing phone layout:

  1. Split view - showing two levels of hierarchy at once (a list and a detail view, for example), with the requirement that the hierarchy itself stays identical to what appears on the outer display.
  2. Reflow - a single vertical layout on the outer display becomes a two-column layout on the inner display.
  3. Sidebar - a tab bar that becomes a sidebar, best suited to information-dense apps.

Sheets follow the same side-bar logic as the rest of the interface on the outer display, and use standard horizontal bars on the inner display - sliding away from the fold if the device is partially closed.

Availability

  • Design guidance: Live now. The HIG page and all three Tech Talks published September 9, 2026, the day of the keynote.
  • Arrangement views and reserved-region APIs: Tied to iOS 27.1, not the initial iOS 27 release.
  • Xcode 27.1 beta: Not yet released as of publication - Apple's developer site listed it as "coming later this month" (September 2026). Worth checking current status before you plan implementation timelines.

Sources

The bottom line

iPhone Duo's HIG chapter asks for less pose-specific design than you might expect. Build around two size classes, let system containers handle the vertical bar transition, exempt scrolling content from displacement, and reach for arrangements when you're already thinking in stacks. The layout engine - reserved regions, displacement, and arrangements does most of the adaptive work; your job is mostly auditing existing screens against it.

Thank you for reading. If you have any questions feel free to follow me on X and send me a DM. If this article helped you, Buy me a coffee.

Disclaimer: All iPhone Duo product photography, keynote footage, and design assets referenced or linked in this article are the property of Apple Inc.