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.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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.
日本語の概要は準備中です。原文の説明を表示しています。