iOS typography applied — the SF family system (SF Pro / Pro Rounded / Mono / New York), Dynamic Type built-in text styles + their point sizes, weights to prefer/avoid, type pairing and label-vs-value hierarchy for a minimal health/nutrition app, tabular/monospaced digits for data, and the concrete SwiftUI font APIs.
NewMaintained
Automatic
◆Frontend / UI pack
Last verified 8/3/2026
What it changes
Passed 11 of 22 test cases with the skill, and 11 of 22 without it.
Without skill50%
With skill50%
Checks it passed that the model alone missed
The output specifies `.fontDesign(.rounded)`.
The output uses `.caption` style for the upper label.
The output uses `.largeTitle` or `.title` style for the numeric value.
2 fixed18 passed either way1 still failing1 broke
Pass-rate lift
0 pp
Tokens
+77%
Agent turns
0%
Response time
-18%
Model gemini-3.6-flashMeasured 8/3/2026v120 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 2
Prompt
Write a SwiftUI view snippet for a prominent daily water intake display ('2,500 mL') in a fitness app, applying a friendly system font design while adhering to standard iOS platform practices.
What was checked, without and with the skill
Checked
Without skill
With skill
The output specifies `.fontDesign(.rounded)`.
Missed
Passed
case-06 · gemini-3.6-flash · 8/3/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md70 linessingle file
iOS typography — Dynamic Type, SF, and data-grade numerics
Source: Apple HIG Typography + SwiftUI Font docs, cross-checked across two research passes (June 2026). Apple says: use the built-in text styles, prefer SF, avoid thin weights, support Dynamic Type.
1. The SF family system
Four system typefaces — SwiftUI selects optical sizes automatically:
SF Pro — default UI sans (.fontDesign(.default)). Auto-switches Text (small) vs Display (large) optical sizes.
SF Pro Rounded — friendlier; great for large numerics / health-app tone (.fontDesign(.rounded)).
SF Mono — fixed-width, code/data (.fontDesign(.monospaced)).
New York — system serif, editorial/reading (.fontDesign(.serif)).
Weights run Ultralight→Black. Don't embed system fonts — use the Font.Design constants. Default iOS text size is 17 pt; minimum 11 pt.
2. Dynamic Type built-in text styles (default "Large" size)
Use these, not hard-coded sizes — they scale with the user's setting, hit larger accessibility sizes, and switch the SF optical variant automatically.
Style
Size (pt)
Weight
SwiftUI
Large Title
34
Regular
.largeTitle
Title 1
28
Regular
.title
Title 2
22
Regular
.title2
Title 3
20
Regular
.title3
Headline
17
Semibold
.headline
Body
17
Regular
.body
Callout
16
Regular
.callout
Subheadline
15
Regular
.subheadline
Footnote
13
Regular
.footnote
Caption 1
12
Regular
.caption
Caption 2
11
Regular
.caption2
Verify-at-source flag: a live-HIG read in this research returned an anomalous spec table (Large Title 31 / Body 14) on the iOS Typography page, conflicting with the canonical values above and with the page's own "default body = 17pt." The 34/17 ramp above is the long-established iOS scale and is what to build to; confirm against Apple Design Resources (Sketch/Figma/Adobe templates) or on-device before locking a production ramp. Tracking/leading are auto-adjusted by the system per point size — don't set them manually.
3. Weights — prefer / avoid
Prefer: Regular, Medium, Semibold, Bold.
Avoid: Ultralight / Thin / Light on body or UI text — fragile, low-contrast, reads "designery but cheap." Reserve only for very large display numerals, if at all.
4. Pairing & hierarchy for a minimal health/nutrition app
One family; build hierarchy from size + weight + color + spacing, not from many fonts. Use the built-in styles: Large Title = the screen's single title; Title 2 = section heads; Headline = eyebrow/label; Body = content; Subheadline/Footnote = secondary; Caption = metadata. A tight scale (≈6–8 steps) is the biggest "looks designed" signal — don't invent intermediate sizes.
Serif vs SF: keep all chrome + data in SF; reach for New York only on an editorial reading surface (an insight/article screen). Serif in dense data UI usually hurts.
Rounded for big numbers:.fontDesign(.rounded) on large calorie/macro counts gives the friendly modern health-app feel (FoodNoms/Cal-AI) without breaking HIG.