iOS Typography Reference

Ios typography reference

by wondelai · MIT license · ★ 2,235 on GitHub · updated Sep 10

SKILL.md section 2 covers the sizes, weights, and the six type rules (min 11pt, 1.3x line height, 35-50 chars, left-aligned,…

# iOS Typography Reference

SKILL.md section 2 covers the sizes, weights, and the six type rules (min 11pt, 1.3x line height, 35-50 chars, left-aligned, weight-over-size, 4.5:1). This file adds what it does not carry: exact light-mode color values and the Dark Mode color mapping.

## System Font: San Francisco

iOS uses San Francisco (SF Pro) as the default typeface. Always reach the styles through semantic APIs (`.font(.title)`, `.font(.body)`, `.font(.caption)`) so Dynamic Type scaling and these colors apply automatically — never hardcode the point sizes or hex values below.

## Light-Mode Color Values

The point sizes live in SKILL.md; these are the hex values iOS resolves each semantic style to in light mode.

| Element | Semantic style | Color (light) |
|---------|----------------|---------------|
| Large Title / Title / Body | `.largeTitle` `.title` `.body` | `#000000` (label) |
| Secondary text | `.subheadline` + `.secondary` | `#3C3C43` @ 60% (secondaryLabel) |
| Caption / Tertiary | `.caption` + `.secondary` | `#3C3C43` @ 60% |
| Tab bar labels (unselected) | 10pt | `#8A8A8E` (tertiaryLabel) |

Overview

SKILL.md section 2 covers the sizes, weights, and the six type rules (min 11pt, 1.3x line height, 35-50 chars, left-aligned, weight-over-size, 4.5:1). This file adds what it does not carry: exact light-mode color values and the Dark Mode color mapping.

Manual install (npx, ZIP)

Claude Codenpx skills add wondelai/skills --skill ios-typography-reference -g -a claude-code

Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

typography.md1.7 KB

Read typography.md here

wondelai/main1 file

typography.md1.7 KB

typography.md

Show the full text35 lines

ios-typography-reference/typography.md35 lines · 1.7 KB

PreviewCode

Outline

RawView on GitHub

iOS Typography Reference

System Font: San Francisco

iOS uses San Francisco (SF Pro) as the default typeface. Always reach the styles through semantic APIs (.font(.title), .font(.body), .font(.caption)) so Dynamic Type scaling and these colors apply automatically — never hardcode the point sizes or hex values below.

Light-Mode Color Values

The point sizes live in SKILL.md; these are the hex values iOS resolves each semantic style to in light mode.

Element	Semantic style	Color (light)
Large Title / Title / Body	`.largeTitle` `.title` `.body`	`#000000` (label)
Secondary text	`.subheadline` + `.secondary`	`#3C3C43` @ 60% (secondaryLabel)
Caption / Tertiary	`.caption` + `.secondary`	`#3C3C43` @ 60%
Tab bar labels (unselected)	10pt	`#8A8A8E` (tertiaryLabel)

Text("Caption")
    .font(.caption)
    .foregroundColor(.secondary)   // resolves to secondaryLabel in both modes

Dark Mode Color Mapping

Semantic styles flip automatically; this is the mapping they apply so you can verify a custom color matches it:

Primary text #000000 -> #FFFFFF (label)
Secondary/tertiary gray -> lighter gray at the same opacity (secondaryLabel/tertiaryLabel)
Backgrounds shift darker while preserving the relative hierarchy between layers

If you define a custom text color, put light/dark variants in the Asset Catalog so it follows this mapping instead of staying fixed.

1	# iOS Typography Reference
2
3	SKILL.md section 2 covers the sizes, weights, and the six type rules (min 11pt, 1.3x line height, 35-50 chars, left-aligned, weight-over-size, 4.5:1). This file adds what it does not carry: exact light-mode color values and the Dark Mode color mapping.
4
5	## System Font: San Francisco
6
7	iOS uses San Francisco (SF Pro) as the default typeface. Always reach the styles through semantic APIs (`.font(.title)`, `.font(.body)`, `.font(.caption)`) so Dynamic Type scaling and these colors apply automatically — never hardcode the point sizes or hex values below.
8
9	## Light-Mode Color Values
10
11	The point sizes live in SKILL.md; these are the hex values iOS resolves each semantic style to in light mode.
12
13	\| Element \| Semantic style \| Color (light) \|
14	\|---------\|----------------\|---------------\|
15	\| Large Title / Title / Body \| `.largeTitle` `.title` `.body` \| `#000000` (label) \|
16	\| Secondary text \| `.subheadline` + `.secondary` \| `#3C3C43` @ 60% (secondaryLabel) \|
17	\| Caption / Tertiary \| `.caption` + `.secondary` \| `#3C3C43` @ 60% \|
18	\| Tab bar labels (unselected) \| 10pt \| `#8A8A8E` (tertiaryLabel) \|
19
20	```swift
21	Text("Caption")
22	.font(.caption)
23	.foregroundColor(.secondary) // resolves to secondaryLabel in both modes
24	```
25
26	## Dark Mode Color Mapping
27
28	Semantic styles flip automatically; this is the mapping they apply so you can verify a custom color matches it:
29
30	- Primary text `#000000` -> `#FFFFFF` (label)
31	- Secondary/tertiary gray -> lighter gray at the same opacity (secondaryLabel/tertiaryLabel)
32	- Backgrounds shift darker while preserving the relative hierarchy between layers
33
34	If you define a custom text color, put light/dark variants in the Asset Catalog so it follows this mapping instead of staying fixed.
35