agentsclimarketplace

Ios design tokens

Skill JordanCoin/ios-design-stack/skills/ios-design-tokens

Design-to-code pipeline for iOS: Pencil MCP → Design Philosophy → XcodeBuildMCP → Ralph Loop. Orchestrator, not a collection.

Install
npx -y skills add JordanCoin/ios-design-stack --skill ios-design-tokens

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 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.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

4.9 KB, 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.

StyleWeightSizeLeadingSwiftUI
Large TitleRegular34pt41pt.largeTitle
Title 1Light28pt34pt.title
Title 2Regular22pt28pt.title2
Title 3Regular20pt24pt.title3
HeadlineSemi-Bold17pt22pt.headline
BodyRegular17pt22pt.body
CalloutRegular16pt21pt.callout
SubheadRegular15pt20pt.subheadline
FootnoteRegular13pt18pt.footnote
Caption 1Regular12pt16pt.caption
Caption 2Regular11pt13pt.caption2

Colors — iOS Semantic (Light / Dark)

Labels

TokenLightDarkSwiftUI
label#000000#FFFFFFColor(.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)

TokenLightDarkSwiftUI
groupedBackground#F2F2F7#000000Color(.systemGroupedBackground)
secondaryGroupedBg#FFFFFF#1C1C1EColor(.secondarySystemGroupedBackground)
tertiaryGroupedBg#F2F2F7#2C2C2EColor(.tertiarySystemGroupedBackground)

Backgrounds (Flat)

TokenLightDarkSwiftUI
systemBackground#FFFFFF#000000Color(.systemBackground)
secondaryBg#F2F2F7#1C1C1EColor(.secondarySystemBackground)

System Tints

TokenLightDarkSwiftUI
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

TokenLightDark
systemFill#787880/20%#787880/36%
separator#3C3C43/29%#545458/60%
opaqueSeparator#C6C6C8#38383A

Grays

TokenLightDark
systemGray#8E8E93#8E8E93
systemGray2#AEAEB2#636366
systemGray3#C7C7CC#48484A
systemGray4#D1D1D6#3A3A3C
systemGray5#E5E5EA#2C2C2E
systemGray6#F2F2F7#1C1C1E

Spacing — 8pt Grid

TokenValueUse
spacing-22ptHairline, icon internal
spacing-44ptMicro, tight elements
spacing-88ptSmall, compact spacing
spacing-1212ptBetween related items
spacing-1616ptStandard padding, compact margins
spacing-2020ptDefault layout margins (iPhone)
spacing-2424ptSection internal padding
spacing-3232ptSection spacing
spacing-4848ptMajor 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

TokenValueUse
radius-sm8ptSmall cards, chips
radius-md12ptCards, input fields
radius-lg16ptLarge cards, modals
radius-xl20ptWidgets, full-width cards
Use .continuous—Always use continuous (squircle) corners, not circular

Component Heights

ComponentHeight
Navigation Bar44pt (standard), 96pt (large title)
Tab Bar49pt
Search Bar36pt field
Primary Button50pt
Toolbar44pt
Status Bar54pt (Dynamic Island), 44pt (notch)

Safe Areas

EdgeValue
Top59pt (Dynamic Island) / 44pt (notch)
Bottom34pt (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)

Gives 0 of the 12 instructions most design systems skills give

Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06

  • create a custom theme if neededin 54 of 528, across 10 files
  • read the corresponding theme filein 54 of 528, across 10 files
  • ask which theme to applyin 53 of 528, across 9 files
  • show the theme showcasein 53 of 528, across 9 files
  • maintain visual identity across all slidesin 50 of 528, across 6 files
  • apply the specified colors and fontsin 47 of 528, across 3 files
  • get explicit confirmationin 45 of 528, across 1 file
  • Generate a design system before codingin 19 of 528, across 6 files
  • Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
  • Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
  • Check Python installation and install if missingin 17 of 528, across 4 files
  • Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files

Said here and by no other author read

  • use these tokens with Pencil MCP
  • use SF Pro Text at 19pt and below
  • use SF Pro Display at 20pt and above
  • use continuous corners
  • run set_variables with these tokens

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.