iPhone Duo design guidelines for product teams

Updated 2026-09-12 · 6 min read · Markdown version

Good iPhone Duo design keeps the app continuous between the outer and inner displays, uses the regular-width inner display for two-column layouts rather than stretched phone screens, designs a dedicated half-fold layout for media and camera screens, and keeps content and controls out of the fold and camera regions.

Most Duo guidance is written for engineers. This page is for the people who decide what the app should look like on the new device: designers, product managers and founders. It distills Apple's design guidance for iPhone Duo into rules you can put in a brief.

Rule 1: Continuity, not two apps

The outer and inner displays share roughly the same aspect ratio on purpose. A user starts a task on the outer display, opens the device, and expects the same screen with more room, not a different app. Keep navigation structure, position in a flow, scroll position and in-progress edits identical across the transition. Do not present a different home screen when the device opens.

Rule 2: Use the width, do not stretch into it

The inner display is regular width, like a small iPad. Phone layouts stretched across it look broken. Design a two-column version of list-and-detail screens, a sidebar for apps with sections, and a maximum reading width for text-heavy views. Standard iOS components do this automatically when engineering uses size classes; custom components need a designed regular-width variant.

Rule 3: Two size classes first; a bespoke half-fold layout only where it earns it

Apple's guidance is explicit: do not design a custom layout for each pose. Design for two size classes, compact and regular, and let every pose fall out of them. The documented exception is a bespoke layout for a specific pose when it clearly helps: a half-folded Duo stands on its own, and video playback, camera, video calls and media browsing benefit from content on one half and controls on the other. If you add such a layout, Apple asks that functionality and general hierarchy stay the same as in the regular layout. Every other screen simply avoids placing critical content across the fold.

Rule 4: Respect the fold and the camera

iOS 27.1 exposes two reserved regions: the fold (division) and the camera (occlusion). System components already nudge interactive elements away from the hinge, with scrollable content as the stated exception, so standard bars and lists need no design work. Custom bars, floating buttons and edge-to-edge canvases must be designed with these regions in mind. Provide engineering with a regular-width layout that shows where custom controls go, and a half-fold variant only for the screens covered by Rule 3.

Rule 5: Put toolbars and tab bars along the vertical edge

On the inner display iOS 27.1 lays standard navigation and toolbar buttons out vertically along the edge. Custom control bars should follow the same convention so the app feels native next to system apps and keeps controls clear of the fold. On the outer display, most content needs an offset so it is not hidden behind controls.

Rule 6: Match the hardware corners

Rounded containers near the display edge should be concentric with the device corner. Apple's Concentricity APIs handle the math, but the design should specify which containers sit at the edge and therefore need it.

Rule 7: Assume the window can be any size

Users run two apps side by side on the inner display, so the app can be a compact slice one moment and full width the next. Design breakpoints by width, not by device. Two layouts, compact and regular, cover every pose on Duo and also iPad multitasking.

What to hand engineering

What does not change

Typography scale, color, iconography and interaction patterns carry over. The outer display behaves like any iPhone, so existing designs remain valid there. Duo work is additive: it adds regular-width and half-fold variants rather than replacing the phone design.