| 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)
