ios-design-tokens

name	ios-design-tokens
description	iOS design system tokens for Pencil MCP: SF Pro typography scale, iOS semantic colors (light + dark mode hex values), spacing grid, touch targets, corner radii, and component heights. Use when initializing a .pen file for iOS design or setting up design variables.

iOS Design Tokens

Design tokens for iOS apps following Apple HIG. Use these with Pencil MCP's set_variables tool to initialize a .pen file for iOS design.

Typography — SF Pro

SF Pro Text at 19pt and below. SF Pro Display at 20pt and above.

Style	Weight	Size	Leading	SwiftUI
Large Title	Regular	34pt	41pt	.largeTitle
Title 1	Light	28pt	34pt	.title
Title 2	Regular	22pt	28pt	.title2
Title 3	Regular	20pt	24pt	.title3
Headline	Semi-Bold	17pt	22pt	.headline
Body	Regular	17pt	22pt	.body
Callout	Regular	16pt	21pt	.callout
Subhead	Regular	15pt	20pt	.subheadline
Footnote	Regular	13pt	18pt	.footnote
Caption 1	Regular	12pt	16pt	.caption
Caption 2	Regular	11pt	13pt	.caption2

Colors — iOS Semantic (Light / Dark)

Labels

Token	Light	Dark	SwiftUI
label	#000000	#FFFFFF	Color(.label)
secondaryLabel	#3C3C43/60%	#EBEBF5/60%	Color(.secondaryLabel)
tertiaryLabel	#3C3C43/30%	#EBEBF5/30%	Color(.tertiaryLabel)
placeholderText	#3C3C43/30%	#EBEBF5/30%	Color(.placeholderText)

Backgrounds (Grouped — most common for iOS)

Token	Light	Dark	SwiftUI
groupedBackground	#F2F2F7	#000000	Color(.systemGroupedBackground)
secondaryGroupedBg	#FFFFFF	#1C1C1E	Color(.secondarySystemGroupedBackground)
tertiaryGroupedBg	#F2F2F7	#2C2C2E	Color(.tertiarySystemGroupedBackground)

Backgrounds (Flat)

Token	Light	Dark	SwiftUI
systemBackground	#FFFFFF	#000000	Color(.systemBackground)
secondaryBg	#F2F2F7	#1C1C1E	Color(.secondarySystemBackground)

System Tints

Token	Light	Dark	SwiftUI
blue	#007AFF	#0A84FF	.blue
green	#34C759	#30D158	.green
red	#FF3B30	#FF453A	.red
orange	#FF9500	#FF9F0A	.orange
yellow	#FFCC00	#FFD60A	.yellow
purple	#AF52DE	#BF5AF2	.purple
pink	#FF2D55	#FF375F	.pink
indigo	#5856D6	#5E5CE6	.indigo
teal	#5AC8FA	#64D2FF	.teal

Fills and Separators

Token	Light	Dark
systemFill	#787880/20%	#787880/36%
separator	#3C3C43/29%	#545458/60%
opaqueSeparator	#C6C6C8	#38383A

Grays

Token	Light	Dark
systemGray	#8E8E93	#8E8E93
systemGray2	#AEAEB2	#636366
systemGray3	#C7C7CC	#48484A
systemGray4	#D1D1D6	#3A3A3C
systemGray5	#E5E5EA	#2C2C2E
systemGray6	#F2F2F7	#1C1C1E

Spacing — 8pt Grid

Token	Value	Use
spacing-2	2pt	Hairline, icon internal
spacing-4	4pt	Micro, tight elements
spacing-8	8pt	Small, compact spacing
spacing-12	12pt	Between related items
spacing-16	16pt	Standard padding, compact margins
spacing-20	20pt	Default layout margins (iPhone)
spacing-24	24pt	Section internal padding
spacing-32	32pt	Section spacing
spacing-48	48pt	Major section breaks

Touch Targets

• Minimum: 44 x 44pt (Apple HIG requirement — never smaller)
• Recommended: 48 x 48pt
• Tab bar icon touch area: 44pt minimum

Corner Radii

Token	Value	Use
radius-sm	8pt	Small cards, chips
radius-md	12pt	Cards, input fields
radius-lg	16pt	Large cards, modals
radius-xl	20pt	Widgets, full-width cards
Use .continuous	—	Always use continuous (squircle) corners, not circular

Component Heights

Component	Height
Navigation Bar	44pt (standard), 96pt (large title)
Tab Bar	49pt
Search Bar	36pt field
Primary Button	50pt
Toolbar	44pt
Status Bar	54pt (Dynamic Island), 44pt (notch)

Safe Areas

Edge	Value
Top	59pt (Dynamic Island) / 44pt (notch)
Bottom	34pt (home indicator)

Pencil MCP: Initialize iOS Design File

When creating a new .pen file for iOS design, run set_variables with these tokens:

Font Family: SF Pro
Font sizes: 11, 12, 13, 15, 16, 17, 20, 22, 28, 34
Spacing: 4, 8, 12, 16, 20, 24, 32, 48
Primary: #007AFF (light) / #0A84FF (dark)
Background: #FFFFFF (light) / #000000 (dark)
Surface: #F2F2F7 (light) / #1C1C1E (dark)
Label: #000000 (light) / #FFFFFF (dark)
Secondary Label: #3C3C43/60% (light) / #EBEBF5/60% (dark)