Jordancoin ios design tokens
Skill JordanCoin/ios-skills-collection/skills/jordancoin--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.From its SKILL.md
npx -y skills add JordanCoin/ios-skills-collection --skill jordancoin--ios-design-tokensAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
4.9 KB, ~1.7k tokens by cl100k_base, as published. Nobody here has run it
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)
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.
Gives 1 of the 12 instructions most design systems skills give in ~1.7k tokens
Counted across 501 of the 520 authors here whose files we hold, read 2026-09-06
- Extract colors, typography, spacing, radii, shadows, breakpointsin 20 of 501, across 10 files
- Create a self-contained dependency-free HTML preview pagein 20 of 501, across 10 files
- Keep touch targets at least 44x44pxhere, and in 20 of 501
- Score the UI across ten dimensionsin 18 of 501, across 8 files
- Animate exclusively via transform and opacityin 18 of 501, across 15 files
- Ensure WCAG AA color contrastin 18 of 501, across 13 files
- Generate DESIGN.md with rationale for each decisionin 17 of 501, across 7 files
- Ensure proper contrast and readabilityin 15 of 501, across 10 files
- Scan the codebase for existing style patternsin 15 of 501, across 6 files
- Give every interactive element a visible focus indicatorin 15 of 501, across 13 files
- Propose a design token setin 14 of 501, across 5 files
- Create a custom theme when none fitin 14 of 501, across 9 files
Said here and by no other author read
- Use SF Pro Text at 19pt and below
- Use SF Pro Display at 20pt and above
- Use 8pt grid spacing tokens
- Use continuous squircle corners, not circular
- Run set_variables with these tokens when creating an iOS .pen file
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.