iPhone Duo

Preview

Eight apps, each laid out for the outer display and for the inner display, in light and dark. Each pair shares one rail, one set of components and one set of variables, so a rebrand moves both displays at once.

iPhone Duo, outer and inner displayouter 466 x 678, inner 951 x 669, device corner 48, light and dark

Apple's guidelines describe how iPhone Duo behaves: controls move to the vertical axis and the layout adapts to the display that is open. The point sizes on this page are working values from the Appetite UI Figma file, not an Apple specification. Each frame sets its modes explicitly. The dark frames add Color Tokens = Dark to Platform = ios-duo-outer or ios-duo-inner, so a frame dropped into another file arrives in the theme it was drawn in.

Read from the iPhone Duo page of the Appetite UI Figma file on October 2, 2026.

How is iPhone Duo different from iPhone?

On iPhone Duo the status bar, toolbar and tab bar leave the horizontal axis and stack in a 96 point rail at the trailing edge, and the inner display adds a sidebar and a split view. On iPhone the status bar sits at the top and the tab bar at the bottom.

On the inner display held in portrait, Apple's guidelines keep horizontal bars. Use the standard iOS / Tab Bar and iOS / Toolbar there, and iOS / Status Bar - Duo in its Compact layout at the top. The inner frames on this page show the display in landscape, 951 wide, which is the pose that uses the rail. For the phone counterparts of each part, see the iOS mirror.

Read from the Platform collection, modes ios-md, ios-lg, ios-duo-outer and ios-duo-inner, and from the iOS Status Bar, Tab Bar and Toolbar sets, on October 2, 2026.

How does an app change between the two displays?

The outer display holds one pane beside the rail. The inner display holds two: a list or sidebar on the left and a detail pane on the right, with the same rail on the trailing edge.

The detail pane runs under the rail, so a pane and the rail add up to more than the display. Dividers are 1 wide.

Pane widths are the top level frames of the light inner frames in the Appetite UI Figma file, read on October 2, 2026.

How is the control rail built?

The rail is a 96 point strip on the trailing edge of both displays. Its groups are 48 wide and sit 24 in from the top, the bottom and the edge: the status mark and the toolbar on top, the tab bar at the bottom.

The status mark is a 240 degree battery arc, stroke 3, with Wi-Fi inside it and four signal dots in the opening. It is drawn from the status bar's own vectors in fg/strong-950, so it follows light and dark. The selected tab is a 44 x 58 capsule filled with iOS/systemFill and its icon takes iOS/tintColor; the other tabs use iOS/label. The bars use the liquidGlass/Regular effect style.

Touch targets: platform/min-touch-target is 44 in both Duo modes. Tab cells are 48 wide, and _Duo / Glass Group draws 44 point targets. The toolbar action buttons are 36 inside the capsule, so give each of them a 44 point hit area in code. The outer frames also carry a camera cutout above the rail, a drawing aid that is not part of the kit.

Measured from the Duo sets on the Status Bar, Toolbar and Tab Bar pages of the Appetite UI Figma file on October 2, 2026.

Which components have a Duo version?

The rail has a Duo version of each of its parts, and Keyboard, List and Sheet each have one for the larger panels. The rail parts are placed on these screens. Keyboard, List and Sheet are published on their own component pages and are not placed here.

Counts are instances on the eight light frames of each display, placed directly or nested inside another component, read on October 2, 2026.

Which Platform variables change in the Duo modes?

Two modes of the Platform collection, ios-duo-outer and ios-duo-inner, change five variables against ios-lg: both safe areas, the trailing safe area, the bottom bar height and, on the inner display only, the sidebar width. The other variables carry their ios-lg values.

The last three rows of the variable table hold the same value in all four iOS modes. On Duo the status bar and the tab bar leave the horizontal axis, so the top and bottom safe areas stop being hardware clearance and become 24 point content margins. grid/safe-area/trailing is the rail: 96 on both Duo modes and 0 everywhere else. The frames on this page bind the top safe area 29 times, the trailing safe area 13 times and the device corner 48 times. The corner is 48 on all four corners of the inner display and on the two right corners of the outer display, and dimensions/radius/lg, 12, on the two left corners of the outer display.

For the whole collection see Platform Bridge and the iOS mirror.

Read from the Platform collection and the 5 local grid styles of the Appetite UI Figma file on October 2, 2026. Binding counts are for the eight light frames of each display.

What are the Apple and Material 3 counterparts?

Apple's own parts are the iOS Status Bar, Tab Bar, Toolbar, Keyboard, List and Sheet, and each Duo version is a vertical or wider variant of one of them. Material 3 and Android have no iPhone Duo counterpart, and Appetite UI draws no Material 3 version of any Duo set.

The nearest Material 3 idea to the inner display is an adaptive layout, a list beside a detail pane with a navigation rail at the wider window sizes. An Android foldable starts from the android mode and the M3 / Navigation bar, because Appetite UI draws no adaptive layout for Material 3.

Counterpart sizes read from the iOS and Material 3 pages of the Appetite UI Figma file on October 2, 2026.

Which tokens do the iPhone Duo frames use?

Every color on the rail resolves through a variable, which makes the dark row a mode switch. The frames pin Color Tokens and Platform and leave Platform Bridge on Brand.

In System mode iOS/label reads #000000 and #FFFFFF, iOS/tintColor reads #007AFF and #0A84FF, and iOS/systemFill reads #787880 at 16 and 36 percent. See Platform Bridge.

Values are the Brand mode of Platform Bridge, read on October 2, 2026.