IOS Design Tokens

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.

jordancoin Updated Sep 17, 2026

Install

Press C to copy

$ npx skillmds@latest add jordancoin/ios-design-tokens

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download SKILL.md

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/jordancoin/ios-design-tokens.svg)](https://skillmd.com/skills/jordancoin/ios-design-tokens)

Trust & safety

Audits pending

Not yet audited · commit f9d0012

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

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)

---name: ios-design-tokensdescription: 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 TokensDesign 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 ProSF 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 FileWhen creating a new .pen file for iOS design, run `set_variables` with these tokens:```Font Family: SF ProFont sizes: 11, 12, 13, 15, 16, 17, 20, 22, 28, 34Spacing: 4, 8, 12, 16, 20, 24, 32, 48Primary: #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)```

JordanCoin/ios-design-stack/tree/main/skills/ios-design-tokens commit f9d0012a30

Frequently asked questions

npx skillmds@latest add jordancoin/ios-design-tokens