iOS

How does Appetite UI support iOS 26 and 27?

The Apple pages follow the iOS 27 patterns: 20 pattern pages, 67 variant sets and 419 variants. Liquid Glass, which arrived in iOS 26, comes at the three transparency levels of iOS 27, and iPhone Duo has its own chrome.

The selected tab label reads iOS/tintColor and the others iOS/label, the selection capsule reads iOS/systemFill, and the label is 12 in Brand mode and 10 in System mode (iOS/sys/typography/tabBarLabel).

Measured in the Figma file on October 2, 2026: iOS / Toggle, iOS / Slider, iOS / Tab Bar, iOS / Status Bar and iOS / Action Sheet.

How do Brand and System mode differ?

Brand mode resolves the Apple roles to Appetite UI tokens, and System mode resolves the same roles back to Apple's own values. Platform Bridge holds 53 iOS roles and each one resolves twice.

Nothing in the Apple mirror is filled with a hex. Set the mode on a frame and the whole screen re-resolves: geometry and structure hold, only the values move. One swap on one collection means there is no second set of screens to keep in sync.

iOS / Segmented Control, Size Large, is 370 × 50 with padding 2, gap 4 and segments 46 high, in both modes. Its track reads iOS/tertiarySystemFill: flat gray in Brand, translucent in System.

Which Apple patterns are covered?

20 pattern pages in the Apple mirror, one row each, with 67 variant sets and 419 variants in total, counted in the Figma file.

Button and Keyboard carry the largest matrices because both cross size with state.

Counted in the Figma file on October 2, 2026. A set is every component set on the page, helper sets included, and a variant is a component inside one of those sets. Loose single components are not counted.

What are Passkey, Permission Alert and Review Prompt?

They are the three system dialogs most apps show in their first minutes: saving a passkey, asking for a permission and asking for an App Store rating. Each is a component set on the Alert page, with copy you edit and the button verbs Apple uses.

The three sets hold 12 Passkey variants, 6 Permission Alert variants and 3 Review Prompt variants. Title and body of Passkey and Permission Alert are editable text layers on each variant.

Verifying waits on Face ID and offers Cancel only. Success offers Done. Heights run from 238 to 384 with the copy.

Two short actions sit side by side. Three actions, or a label that does not fit beside another, force the stacked layout, the same rule iOS follows. Tracking has no primary action on purpose: Apple styles both tracking choices alike so the dialog does not steer the answer.

Review Prompt reuses the Rating component for the stars, with a caption under them. Default and Input Rating are 300 × 288, and Rating Submitted drops the stars and shrinks to 300 × 194.

What is the Dynamic Island component?

The Dynamic Island is the pill at the top of iPhone that grows into live information. Appetite UI draws it as three sets on one black pill: the four presentations of one activity, 23 system presentations and 10 expanded layouts.

Expanded is 371 wide on the 393 pt device class and 408 wide on the 430 pt class, and Apple allows 84 to 160 tall. The radius of 44 is the value Apple publishes.

The apps behind the island are Company Logo placeholders, from the twelve placeholder companies in Assets: Tidal, Sundial, Relay, Northwind, Pinpoint and Orbital appear across the sets. Replace the Icon swap with your own mark.

System presentations are what the island shows without an app running a Live Activity. Every pill follows one rule: the icon sits 14 from the leading edge, the label ends 15 from the trailing edge and the sensor cutout fills the middle, so a pill is 142 plus the label width.

Media, Timer and Delivery share one header, progress and meta scaffold, and only Alert uses the Action text. The progress track is the helper set _DI Progress, 331 × 6 at radius 3. The Lock Screen side of the same activity is iOS / Live Activity, 361 wide and up to 154 high with its footer.

The main set carries a morph prototype: pressing an island changes it to the next presentation, Idle to Compact to Expanded and back to Idle. The transition is Smart Animate over 320 ms, the motion/duration/slow variable, on motion/easing/emphasized, cubic-bezier(0.05, 0.7, 0.1, 1).

Read from the Figma reactions on October 2, 2026.

How does the iPhone Duo chrome work?

iPhone Duo moves the status bar, toolbar and tab bar off the horizontal edges onto a 96 pt control rail beside the content. Appetite UI draws the rail as Duo versions of Status Bar, Toolbar, Tab Bar, List, Keyboard and Sheet, and two Platform modes, ios-duo-outer and ios-duo-inner, set the geometry.

The screens that use them are on the iPhone Duo screens page, 8 apps on an outer and an inner display.

The toolbar carries the navigation pill on top and one to three actions below, and items overflow from the bottom up. The tab bar is icon only, with 48 wide cells, and each tab has a Default and a Selected state. The toolbar actions are 36 inside their capsule. Glass Group is the shared glass surface for both, one to three targets.

The Platform collection does the layout work. Duo status bar and tab bar leave the horizontal axis, so the top and bottom safe areas shrink to 24 and the bottom bar height becomes 0. The trailing safe area is 96 for the rail, and the inner display adds a 262 wide sidebar. All values are in the Platform table under Tokens and metrics.

How is Liquid Glass built?

Liquid Glass is an effect style on a background layer, never on a frame that holds content. The iOS components use three styles, liquidGlass/Regular, liquidGlass/Tinted and liquidGlass/Clear, the stops of the iOS 27 transparency slider.

Regular is the default stop, for bars, buttons, menus and sheets. Tinted is the fully tinted end, for busy backgrounds and Reduce Transparency. Clear lets content show through and keeps only refraction and rim light.

All three share depth 30, splay 0.2 and light angle 0, plus a soft drop shadow, a one pixel edge shade and a white rim light. They differ in the inner tint: white at 32 percent for Regular, a near white at 86 percent for Tinted and white at 6 percent for Clear.

The shared surface is _Glass - Control, a private set with Style Regular, Clear or Tinted and State Default or Primary. Primary drops the glass and uses a solid fill, the way iOS draws a prominent glass button. The glass buttons are iOS / Button - Liquid Glass - Text, with Style Glass or Glass Prominent and Size Small, Medium or Large, and iOS / Button - Liquid Glass - Symbol at 50 × 50.

Tokens and metrics

Device geometry lives in its own collection, one mode per device class, and the minimum touch target is 44 on every iOS mode and 48 on android. The iOS half of Platform Bridge is 53 roles.

grid/columns is 4 on every mode except ios-duo-inner, which has 6, the same counts as the grid styles on the Dimensions page. The switch track is 64 by 28 on every iOS mode, the size of the iOS / Toggle set. ios-md and ios-lg differ in one variable, grid/safe-area/top, 59 on ios-md and 62 on ios-lg. The android mode sits in the same collection and is listed on the Material 3 page. Apple publishes the 44 pt target and the 11 pt minimum text, and every other number is an Appetite UI decision. Both font variables read Inter.

Collection of 20 variables on five modes, read on October 2, 2026.

A sample of the 53 roles, resolved in Light and Dark, read in the Figma file on October 2, 2026.