System: Home Screen, Lock Screen and Control Center — iOS 27

Read when: you need wallpapers, the Home Screen, widgets, Quick Actions, the Lock Screen, notifications, Control Center or app icon frames on iOS 27, as Apple's kit draws them. Owns: the anatomy of those system surfaces. Sizes and colours are in system-values.md; text and effects in system-text-and-effects.md.

Source: specs/system.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, windows, status bars and home indicators are in system.md.

Anatomy

Wallpapers

The blurred iPhone wallpaper is the background of every iPhone "Widgets - …" Home Screen.

Home Screen — iPad (1210×834)

Screen = Wallpaper + App Layout iPad (one of 􀻃/Layouts - iPad/…) + Dock 740×107 @235,699 + Status Bar Status Bars/iPad/Dark Background/Full Screen/Menu Collapsed @0,0 (both appearances use the Dark Background bar). Dock is centred (derived (1210 − 740) / 2 = 235) with 28 below it (derived 834 − 699 − 107).

Icon grid (􀻃/Layouts - iPad): group "Icons" 1210 wide, stack v, pad 0,162,0,162, so the rows are 886 wide @162. Icons are App Icons/Home Screen/Home Screen - iPad 68×68.

Derived: column pitch 163.6 (gap 95.6 between 68-pt icons). The row stacks store gap98, which does not match the positions. Places a widget covers hold rect "Blank" layers of icon size. Widgets are placed at @127,49: Extra Large 628×300, Large 300×300, Medium 300×136, Small 138×138 (the Small layout's instance points at the Medium master).

Dock - iPad (740×107): corners 36, stack h gap19.5 pad19.5,19.5,19.5,19.5.

Home Screen — iPhone (402×874)

Screen = Wallpaper (blurred for widget screens) + dimming overlay (Default screens only) + App Icons layout + Dock + Search Field + Status Bar Status Bars/iPhone 18 Pro/Dark Background (both appearances).

Icon grid (􀻃/Layouts - iPhone): stack v, pad 90,30,0,30 (Default, Default + Custom Icon, Medium, Large, XL) or 80,30,0,30 (Widget - Small). Rows are 342×64 @30, stack h gap24. Icons are App Icons/Home Screen/Home Screen - iPhone 64×64.

Derived: row pitch 100.33 (64 + gap 36.33); column pitch 92.67, gap 28.67 between icons; the rows store gap24, which does not match the positions.

Dock - iPhone (368×103): corners 38, stack h gap0 pad20,19,19,19. Four 64×64 icons (Phone, Safari, Messages, Music) at x 19, 107.67, 196.33, 285, y20 (pitch 88.67, derived). Derived bottom inset: 17 on Default screens (874 − 754 − 103), 12 on widget screens, 7 on Quick Actions screens.

Search Field (78×30): corners 41; text "Search" 55×16 @11,6.66, content "􀊫 Search" (glyph U+1002AB). Centred on Default screens (derived (402 − 78) / 2 = 162).

Home Screen — iPhone Duo

The Duo home screens place the dock and status bar in the same 84-wide trailing column, except Inner Portrait, where the dock sits at the bottom.

Home Screen widgets

iPad (Widgets/iPad/…): "Widget" group with "Background" (fill #6155F5 {System Colors/Light/9 Indigo}) and "Glass" (Liquid Glass/Widget Glass), both the full widget size, corners 21; plus "Padding" → Padding Guide (18pt) at full size.

iPhone widgets add a name label under the body: stack v gap6 pad0; text "Widget Name" 79×14, centred (x42.5 on Small, x135 on the others); label y = body height + 6 (derived: 164.67 + 6 = 170.67).

􀻃/Widget Layout Guide/Padding Guide (18pt) 120×120: fill #FFFFFF, corners 27.88; rect "Rectangle" 84×84 @18,18, border 0.5 outside #000000, dash 4, corners 10. Content inset 18 on every side (derived from the rect position).

Home Screen Quick Actions

Menu corners 30 on all four menus.

Screens: iPad: Home Screen (Default + Custom Icon) + rect "Overlay" 1210×834 #000000@48% (Dark) / @20% (Light) + menu 250×328 @157,106 + icon App Icons/Home Screen/Home Screen Quick Action 78×78 @157,442 (8 below the menu, derived 442 − 434). iPhone: Home Screen layout + dock + dimming overlay + menu 250×328 @28,142 + icon 74×74 @28,482 (12 below the menu, derived 482 − 470).

Lock Screen

iPhone "Date and Time" (402×123.41 @0,79, stack v gap10): text "Date" "Tue April 1" 104×26 @149,0; shape "Time" 68.83×84.55 @196.08,37.45 (Liquid Glass/Lock Screen Time).

iPad 􀻃/iPad - Lock Screen Date & Time Lockup 576×261: text "Lock" "􀎡" (U+1003A1) 18×23 @279.5,27; text "Date" "Apr 1 􀇕 Cupertino" (􀇕 U+1001D5) 265×28 @156,65; shape "Time" 239.31×102 @168,105 (Liquid Glass/Lock Screen Time). Placed at @317,0 on iPad screens (@309,0 on the Dark iPad example).

Lock Screen controls: System/Lock Screen Widgets/Control 58×58, Liquid Glass/Clear, corners 1000; text "Symbol" "􀌟" (U+10031F) 50×50 @4,4 (the Action 1 instances override it with "􀝌" U+10074C). Row: group 402×108 @0,766, stack h pad0,46,50,46, controls at x46 and x298 (46 from each edge, 50 from the bottom; derived 402 − 298 − 58 = 46). Swipe-down indicator: rect 48×2.33 @309,47, corners 1.17.

Lock Screen widgets — iPhone rectangular (162×72):

Lock Screen widgets — iPhone circular (72×72). Every circular widget draws inside 58×58 @7,7 (7 inset, derived).

Lock Screen widget rows (Widgets/iPhone/…, 342×72):

Derived: four circular widgets fill 342 exactly (4 × 72 + 3 × 18); two rectangular widgets fill 342 (2 × 162 + 18).

iPad Lock Screen widgets (162×162):

• iPad Clock Big: path "Face" 152×152 @5,5 (Materials/Light/4 Ultrathin); "Ticks Minor" 146×146 @8.39,8.39 (ticks 3.63×5.65); "Ticks Major" 147×146 @8,8; "Numbers" 122×131 @20.2,16.84 (12 hour numerals, each 8–19 wide × 20 tall); "Hands" 65×101 @20.64,8.5: Hour Hand 33.82×15.52, Minute Hand 63.37×31.91, Second Hand 1.03×80.
• iPad Date: group "Stack" 162×38 @0,5, stack h gap8: "Wed" 66×38 @17.5,0 and "Apr" 53×38 @91.5,0; path 39×89 @59.51,54 below.

Lock Screen examples:

• iPhone: widgets row 4 Circular 342×72 @33,214 (Dark) / @30,214 (Light); controls row, home indicator, date/time and inline status bar as above.
• iPad: column "Date & Time + Widgets" 162 wide @47,66 (Dark) / @47,68 (Light): iPad Date @0,0 (162 tall); Modular with Bar @0,180; Circular Open Gauge 2 @0,270 and Gauge 3 @90,270; Rectangular with Chart @0,360; iPad Clock Big @0,450; Tall Body @0,630. Derived: 18 between widgets vertically and horizontally (180 − 162, 270 − 252, 90 − 72).

Notifications

Banner 1 Single (300×62.33): Liquid Glass/Clear, corners 22, stack h gap10 pad12,14,12,14.

1 Single with Image (300×78): same shell; text block 223.67×54, stack h: "Title and Description" 166.67×54 (Title @0,9.5, Description @0,26.5) and "Date and Image" 57×54 (Time @0,0; rect "Image" 32×32 @25,22, corners 6, opacity 50%); icon stack 38.33×54 with the icon at @0,7.83.

Stacked banners (the extra banners peek out underneath):

Derived: each banner behind is 20 narrower per side and shows 8 below the one in front.

Lock Screen notification lists:

Expanded notification (long-look card) with action menu:

Control Center

Control tiles. All iPad tiles use Liquid Glass/Clear; all iPhone tiles too, with a larger glass radius (see Effects).

Control Center screens:

iPad (1210×834): Lock Screen example (with its widgets hidden) + System/Control Center/􀻃/Overlay (100×100, fill #000000@45%, stretched to 1210×834) + group "Controls" 295×446 @866,117 (Dark) / @866,105 (Light).

Derived: grid pitch 76, gap 10 (142 = 2 × 66 + 10). Inline tiles here use corners 34.

iPad top area: text "􀅼" (U+10017C) 44×44 @858,16; "􀆨" (U+1001A8) 44×44 @1123,16; "Status bar" group 98×18 @1057,66: Wifi "􀙇" (U+100647) 20×18 @0,0, "100%" 41×18 @22,0, Battery 30.75×14 @67,2 (rect "Border" 28×14 corners 4 opacity 40%; "Capacity" 23×9 @2.5,2.5 corners 2; cap 1.75×5.5 @29,4 opacity 50%). Index Scrubber 16×128 @1177,341, stack v gap40, three 16×16 items.

iPhone (402×874): Lock Screen example (widgets hidden) + rect "Overlay" 402×874 + group "Controls" 327×497 @37,132 (both appearances).

Derived gaps from these positions: 15 between columns 1 and 2 (171 − 156), 15.5 or 15 between columns 3 and 4; 16 between rows 1 and 2 (171 − 155), 16 between the 2x1 and the 2x2 below it (342 − 326), 15 between the 1x1 rows (427 − 412). The kit has no single gap value.

iPhone top area: group "Status Bar" 402×110.67 @0,0, stack v gap46 pad23,0,0,0: "Plus and Power Buttons" 402×28.67 @0,23 (stack h pad0,38,0,38): Plus 28.67×28.67 @38,0 with "􀅼" 44×44 @-7.66,-7.66 (stack pad-8 on all sides); Power 28.67×28.67 @335.33,0 with "􀆨" 28×28; "Signal and Battery"/"Stack" 402×13 @0,97.67 (pad0,42.67,0,42.67): Leading 44.99×13 @42.67 (Cellular 19.33×12.33 @3,0.33, bars 3.28 wide at heights 4.75/6.97/9.53/12.33; Wifi 16.66×12.33 @28.33,0.33), Trailing 75×13 @284.33 ("100%" 41×18 @0,-2.5; Battery 28×13.33 @47,-0.17). Index Scrubber 16×232 @375,321.24, stack v gap38, five 16×16 items.

Tile contents:

App icons

App Icons/Artwork/{Default|Dark}/<App>: every one of the 96 artwork masters is 66×66 with fill #FFFFFF and one image layer 66×66 @0,0 named <app>-iOS-Default or <app>-iOS-Dark (grep-checked: 96 images, all 66×66).

The 48 apps (each in Default and Dark): Airdrop, App Store, Books, Calculator, Calendar, Camera, Clock, Contacts, Custom (image "placeholder-iOS-…", the stand-in for your own icon), FaceTime, Files, Find My, Fitness, Freeform, Games, Health, Home, Image Playground, iTunes Store, Journal, Keynote, Mail, Maps, Measure, Messages, Music, News, Notes, Numbers, Pages, Passwords, Phone, Photos, Podcasts, Preview, Reminders, Safari, Settings, Shortcuts, Siri, Stocks, Tips, Translate, TV, Voice Memos, Wallet, Watch, Weather.

Icon frames (App Icons/Home Screen/…):

Derived label gap below the icon: 6 on iPad (74 − 68), 5 on iPhone and Duo (69 − 64, 65 − 60).

App Icons/􀻃 - Badge/Badge 44×24: corners 100, stack h gap0 pad2.5,8,2.5,8; text "Badge Count" "247" 28×19 @8,2.5.

Sizes the artwork is placed at elsewhere: 23×23 (App Library folder), 38.33×38.33 (notifications), 48×48 (Duo docks), 60×60, 64×64, 68×68.