Jordancoin ios design tokens

Skill JordanCoin/ios-skills-collection/skills/jordancoin--ios-design-tokens

200+ iOS/Swift/Xcode agent skills from 28 authors with phase-aware routing. Claude Code plugin + Codex CLI + Mac App. Full lifecycle: ideation → design → develop → test → deploy → iterate.

Install

npx -y skills add JordanCoin/ios-skills-collection --skill jordancoin--ios-design-tokens

Assembled 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.

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.

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)