Platforms · iOS & iPadOS

iOS & iPadOS — SwiftUI native

The SkyCanvass companion app ships on Apple-native frameworks only — SwiftUI, SF Symbols, and SF Pro. No web views, no cross-platform shims. This page is the point-accurate platform reference: real device canvases and bezels, Apple's published logical resolutions, and the native component metrics the app is built against. All values are points; this page renders them at 1 pt = 1 px. Tokens live in tokens.css under iOS / iPadOS device metrics.

Device canvases — point accurate

The primary phone design target is iPhone 16 Pro (402×874 pt) — the exact frame the approved ISO CRM design canvas uses — and the tablet target is iPad Pro 11″ landscape (1210×834 pt). Dashed guides mark the safe-area insets; content never renders in the Dynamic Island or home-indicator zones.

safe top 62
safe bottom 34
9:41●●●●
Dashboard
Today's tasks
Follow up callGiselle Rodriguez · Today
High
Send supplement docsBarbara Youngblood · Today
Med
Pipeline
7open leads
$83,700value
Recent activity
Chris Kestnerlogged an inspection · 8814 Juniper Loop
Dashboard
Canvass
Projects
Storms

iPhone 16 Pro · screen 402×874 pt @3x · display corner 62 pt · Dynamic Island 125×37 pt at 11 pt · home indicator 139×5 pt. Rendered 1:1. Tab bar 49 pt + 34 pt safe bottom.

SkyCanvass
Dashboard
Projects
Contacts
Notifications
Sync center
Walkie
Settings
Dashboard
Today's tasks
Follow up callGiselle Rodriguez
Call adjusterMitchell William
Pipeline (org-configured)
7open leads
$83,700value

iPad Pro 11″ (M4), landscape · screen 1210×834 pt @2x · display corner 30 pt · rendered at 52% (frame is still authored at true point size — scale is presentation-only). Split view: 300 pt sidebar + content, per the tablet CRM split-view design.

tokens: --ios-iphone-pro-* · --ios-ipad-pro-11-* · --ios-island-* · --ios-safe-*1 pt = 1 px

Device metrics

Apple's published logical resolutions (points, portrait). Corner radii and Dynamic Island values are measured device values (UIScreen.displayCornerRadius) — Apple does not publish them in the HIG; they are marked ◆.

Device
Points (w×h)
Scale
Safe area (portrait)
iPhone 16 Pro — primary target
402 × 874
@3x
top 62 · bottom 34 · corner 62◆
iPhone 16 Pro Max
440 × 956
@3x
top 62 · bottom 34
iPhone 16 / 15 Pro / 15 / 14 Pro
393 × 852
@3x
top 59 · bottom 34 · corner 55◆
iPhone 16 Plus
430 × 932
@3x
top 59 · bottom 34
iPad Pro 11″ (M4) — tablet target
834 × 1210
@2x
corner 30◆ · indicator zone 20
iPad Pro 13″ (M4)
1032 × 1376
@2x
corner 30◆
iPad Air 11″ / iPad (10th gen)
820 × 1180
@2x
—
iPad Air 13″
1024 × 1366
@2x
—
iPad mini (6th/7th gen)
744 × 1133
@2x
—

Atomic components — native metrics

Each specimen renders at exact point size on the dark app surface, with its SwiftUI construct and the governing token. These are Apple's system defaults — the app inherits them by using native controls, never by re-implementing them.

‹ ProjectsJob #10013
Dashboard
NavigationStack — inline 44 pt · large-title region 96 pt--ios-navbar-h / --ios-navbar-large-h
Dashboard
Canvass
Projects
Storms
TabView bar — 49 pt (+34 pt home-indicator zone)--ios-tabbar-h · --ios-safe-bottom
Email sync›
Storm alerts
List/Form row ≥44 pt · icon tile 29 pt · Toggle 51×31 pt--ios-list-row-min-h · --ios-list-icon · --ios-switch-*
Collect signature & complete
Low
Med
High
Button .controlSize(.large) 50 pt · segmented Picker 32 pt--ios-control-large-h · --ios-segmented-h
⚲  Name, address, job #, claim #…
.searchable field 36 pt · sheet grabber 36×5 pt--ios-searchfield-h · --ios-sheet-grabber-*
44
60
Tap targets — 44 pt HIG minimum · 60 pt field/sunlight surfaces--target-min · --target-field

Dynamic Type — default (Large) sizes

SwiftUI text styles at the default content size, with the closest web DS token. The app uses text styles exclusively (never fixed sizes) so Dynamic Type scaling is free; the web scale is the analog, not a 1:1 mapping.

.largeTitle · 34 pt · RegularStorm Intelligence
.title · 28 pt · RegularInspection queue
.title2 · 22 pt · RegularToday's route
.title3 · 20 pt · RegularRoof specs
.headline · 17 pt · Semibold ≈ --text-lgToday's tasks
.body · 17 pt · Regular ≈ --text-lgThe homeowner confirmed the appointment.
.callout · 16 pt · Regular38 doors · 6.1 mi away · ~14 min drive
.subheadline · 15 pt · Regular ≈ --text-mdCanvasser · Ocala office
.footnote · 13 pt · Regular ≈ --text-smSessions appear under Settings → Devices.
.caption · 12 pt · Regular ≈ --text-xsstage entered 2026-07-14
.caption2 · 11 pt · RegularQUEUE · 5 ITEMS

Token → SwiftUI mapping contract

The iOS DesignSystem module mirrors the web tokens as Swift constants and asset-catalog colors; the bridge is by name, so a token rename is a cross-platform change. Rules of the road:

Do
Use native controls (List, TabView, Toggle, NavigationStack) and inherit their metrics · express color/spacing via the DesignSystem token constants · use SF Symbols at text-style sizes · respect safe areas via .safeAreaInset / automatic insets · keep every tappable ≥44 pt (60 pt on field surfaces).
Don't
Re-implement system controls with fixed pixel art · hardcode hex colors in views (asset catalog + tokens only) · use fixed font sizes where a text style exists · draw into the Dynamic Island / home-indicator zones · introduce web views for product surfaces.
// tokens.css ↔ DesignSystem (SwiftUI) — same names, same numbers --ios-tabbar-h: 49px // TabView system metric — inherited, never set --target-min: 44px // .frame(minWidth: 44, minHeight: 44) --ios-iphone-pro-w: 402px // canonical preview device: iPhone 16 Pro #Preview(traits: .fixedLayout(width: 402, height: 874))