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.
中文简介正在准备中。当前显示原文说明。
实测评分 未实测
查看安装方法安装前可以查看交给 AI 代理的指令内容。
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.
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 |
| 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) |
| Token | Light | Dark | SwiftUI |
|---|---|---|---|
| groupedBackground | #F2F2F7 | #000000 | Color(.systemGroupedBackground) |
| secondaryGroupedBg | #FFFFFF | #1C1C1E | Color(.secondarySystemGroupedBackground) |
| tertiaryGroupedBg | #F2F2F7 | #2C2C2E | Color(.tertiarySystemGroupedBackground) |
| Token | Light | Dark | SwiftUI |
|---|---|---|---|
| systemBackground | #FFFFFF | #000000 | Color(.systemBackground) |
| secondaryBg | #F2F2F7 | #1C1C1E | Color(.secondarySystemBackground) |
| 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 |
| Token | Light | Dark |
|---|---|---|
| systemFill | #787880/20% | #787880/36% |
| separator | #3C3C43/29% | #545458/60% |
| opaqueSeparator | #C6C6C8 | #38383A |
| Token | Light | Dark |
|---|---|---|
| systemGray | #8E8E93 | #8E8E93 |
| systemGray2 | #AEAEB2 | #636366 |
| systemGray3 | #C7C7CC | #48484A |
| systemGray4 | #D1D1D6 | #3A3A3C |
| systemGray5 | #E5E5EA | #2C2C2E |
| systemGray6 | #F2F2F7 | #1C1C1E |
| 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 |
| 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 | 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) |
| Edge | Value |
|---|---|
| Top | 59pt (Dynamic Island) / 44pt (notch) |
| Bottom | 34pt (home indicator) |
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)
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
When the user wants to A/B test App Store product page elements to improve conversion rate. Also use when the user mentions "A/B test", "product page optimization", "test my screenshots", "test my icon", "conversion rate optimization", "CPP", or "custom product pages". For screenshot design, see screenshot-optimization. For metadata optimization, see metadata-optimization.
中文简介正在准备中。当前显示原文说明。
Discover and configure Bluetooth and Wi-Fi accessories using AccessorySetupKit. Use when presenting a privacy-preserving accessory picker, defining discovery descriptors for BLE or Wi-Fi devices, handling accessory session events, migrating from CoreBluetooth permission-based scanning, or setting up accessories without requiring broad Bluetooth permissions.
中文简介正在准备中。当前显示原文说明。
Implement, review, or improve Live Activities and Dynamic Island experiences in iOS apps using ActivityKit. Use when building real-time updating widgets for the Lock Screen and Dynamic Island — delivery tracking, sports scores, ride-sharing status, workout timers, media playback, or any time-sensitive information that updates in real time. Also use when working with ActivityKit, ActivityAttributes, Activity lifecycle (request/update/end), Dynamic Island layouts (compact/minimal/expanded), push-to-update Live Activities, or Lock Screen live widgets.
中文简介正在准备中。当前显示原文说明。
Measure ad effectiveness with privacy-preserving attribution using AdAttributionKit. Use when registering ad impressions, handling attribution postbacks, updating conversion values, implementing re-engagement attribution, configuring publisher or advertiser apps, or replacing SKAdNetwork with AdAttributionKit for ad measurement.
中文简介正在准备中。当前显示原文说明。
Implement AlarmKit alarms and countdown timers for iOS and iPadOS with Lock Screen, Dynamic Island, and Apple Watch system UI. Covers AlarmManager scheduling, AlarmAttributes and AlarmPresentation, AlarmButton stop and snooze actions, authorization, state observation, and Live Activity integration. Use when building wake-up alarms, countdown timers, or alarm-style alerts that need Apple's system alarm experience.
中文简介正在准备中。当前显示原文说明。
When the user wants to optimize their Google Play Store listing — title, short description, full description, keywords, ratings, or Play Store-specific features. Use when the user mentions "Google Play", "Android", "Play Store", "Play Console", "short description", "full description indexed", "Google Play ASO", or wants Google Play-specific keyword, creative, or ratings strategy. For iOS App Store optimization, see aso-audit and metadata-optimization.
中文简介正在准备中。当前显示原文说明。