Sheets — iOS 27

Read when: you need an exact iOS 27 value for sheets (size, colour, text, effect) as Apple's kit draws it. Owns: Sheets in Apple's iOS 27 kit: components, anatomy, sizes, colours and states, text, effects, kit notes.

Source: specs/sheets.txt from Apple's iOS 27 UI Kit (Sketch, v27.1.3), read 2026-11-01. Values are copied from the kit; derived values say so.

Components

50 components. The page has no documentation boards.

The sheet's content area is empty in every component: each sheet holds only its top toolbar (and, on iPhone Duo, a vertical button bar).

Anatomy

iPhone Inspector (402 × 460)

Derived: 8 + 386 + 8 = 402; 452 + 8 = 460 (no top padding).

iPhone Medium Detent (402 × 874)

Derived: the sheet is inset 8 from the sides and 874 − (415 + 451) = 8 from the bottom; it covers 451 of the 874 pt screen.

iPhone Large Detent (402 × 874)

Derived: the sheet starts 62 from the top and reaches the bottom edge (62 + 812 = 874); it is full width. The corner value has four parts as stored: 38, 38, 0, 0 (rounded top, square bottom).

Button swaps on the Inspector and Medium Detent toolbars (the swapped-in components are not on this page):

iPad sheet (1210 × 834 screen)

Derived: the sheet is centred horizontally ((1210 − 936) / 2 = 137) and leaves 32 above and 834 − 32 − 770 = 32 below. The toolbar buttons are inset 10 from the sheet's sides (936 − 882 − 44 = 10). The iPad sheet has no shadow or blur in the dump.

Overlay (building block)

These are unbound in the dump; the values equal Overlays/Default in colors.md (Light α 0.2, Dark α 0.48). The iPad sheet does not use this component; it draws its own 16.2% overlay rect.

iPhone Duo examples

Each example is a screen with the app's toolbar (use "Toolbar" → Toolbars/<Appearance>/iPhone Duo/Top - Standard/Title, 82 tall, or a vertical bar at the right edge), then use "Overlay" → Sheets/􀻃/Overlay/<Appearance>, then group "Sheet". Full Screen examples have no overlay and no sheet, only the toolbar and buttons.

Sheet geometry:

Derived bottom gap (screen height − y − sheet height): Small Detent 28 on every screen (669 − 561 − 80, 951 − 843 − 80, 466 − 358 − 80, 678 − 570 − 80); Medium Detent 8 where the sheet is glass (669 − 305 − 356, 951 − 587 − 356, 678 − 314 − 356); Large Detent 0 (the sheet reaches the bottom edge). Landscape / Outer Medium and Large are identical.

Sheet parts by detent:

The one button in the Small Detent's vertical bar is Share (􀈂 U+100202) in Dark and Close (􀆄 U+100184) in Light; both → Toolbars/<Appearance>/Buttons/48pt/Active/Symbol 1.

Outer-display Medium and Large sheets also carry a Vertical Bar (76 wide, stack v gap8 pad16,16,24,12, or pad24,16,24,12 in Portrait Outer Large) with Close (􀆄) and Share (􀈂) 48 × 48 buttons, 12 apart (corners 24 or 32 on the instances).

Sizes

The iPhone glass styles store corners 20 in the token; the sheets override it with 34, 40, 48 or max.

Colours and states

The kit has no interactive states for sheets (no pressed, dragging or disabled variants). A grabber, a drag handle and the sheet's content area: Not in the kit.

Text

Text on this page lives in the nested toolbar components (titles and buttons, see toolbars.md). The only text layers stored here are:

Glyph overrides on the toolbar instances: 􀆉 U+100189 (Back), 􀆄 U+100184 (Close), 􀈂 U+100202 (Share), 􀯶 U+100BF6 (iPad Back Button).

Effects

The inline expansions match the tokens except for the corner value (checked by script on every styled line). Key values from materials.md:

Each also has five inner shadows, a 0.3 pt edge shadow (blur0.3 spread0.3) and two ±1.25 pt side shadows; see materials.md.

The outer-display Back button's inner group ("Label" in Dark, "Button 1" in Light, 40 × 40 @4,4) stores border 15 inside #FF0000 in all six examples that have it. This is how the kit stores it.

Kit notes

The page has no documentation boards. Its only non-component layer is a _Header instance (1600 × 126) with the title "Sheets" and a description the dump cuts off after "A sheet helps people perform a scoped ta…". The full text is Not in the dump.

What the components show (summarised from their layout): a medium-detent iPhone sheet is a glass panel floating 8 pt from the screen edges; a large-detent sheet is opaque, full width, rounded only at the top and casts a soft shadow; an inspector uses the heavier Regular - Large glass. On iPhone Duo, the small detent is an 80 pt glass capsule floating 28 pt above the bottom, the medium detent is glass 8 pt from the bottom, and the large detent is opaque and reaches the bottom edge.

Finding it in the spec