---

name: apple-ios-design description: Use this skill to generate well-branded interfaces and assets for Apple iOS 26 / iPadOS 26, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. user-invocable: true

Read the README.md file within this skill, and explore the other available files. If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand. If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.

Key files:

• colors_and_type.css — all tokens (colors, materials, radii, type scale, semantic classes).
• ui_kits/ios/ — iPhone components + click-thru prototype.
• ui_kits/ipados/ — iPad sidebar+list+detail layout.
• preview/ — compact reference cards.
• assets/ — wallpapers, app icon, cover image.

When designing: link colors_and_type.css, use the .ios-* type classes, apply --material-regular-light + backdrop-filter: var(--blur-regular) for Liquid Glass chrome, and honor the 16px iPhone / 20px iPad edge margins.

Apple iOS 26 Design System

A design system derived from Apple's official "iOS and iPadOS 26 (Community)" Figma library. Use it to create iPhone/iPad mockups, click-thru prototypes, slide templates, and production-adjacent UI that matches Apple's Human Interface Guidelines.

⚠️ Source context: Apple Design Resources. These assets belong to Apple Inc. and are provided only for designing for Apple platforms. Do not use the SF family or the exact iOS chrome to impersonate Apple products; do not ship Apple icons in non-Apple apps.

---

Sources

• Figma file: iOS and iPadOS 26 (Community).fig — mounted as a virtual filesystem during authoring.
  • 41 pages, 225 top-level frames, ~30k nodes.
  • Structure: /Colors, /Materials, /Text-Styles-and-Dynamic-Type, /Buttons, /Lists, /Sidebars, /Tab-Bars, /Toolbars, /App-Icons, /Examples/iPhone, /Examples/iPad …
  • Authoring reference: Apple Human Interface Guidelines — https://developer.apple.com/design/human-interface-guidelines/

---

What's in this folder

File / folder	Purpose
README.md	This document — brand, content, visual foundations, iconography.
SKILL.md	Skill manifest (usable from Claude Code / Agent Skills).
colors_and_type.css	All design tokens — colors (light/dark), materials, elevation, radii, spacing, type scale, semantic classes.
assets/	Wallpapers, cover art, app icons, SF Symbol-style SVGs.
fonts/	Web font fallback (SF Pro is not shipped; see below).
preview/	Cards rendered in the Design System tab (colors, type, components, materials).
ui_kits/ios/	iOS UI kit — React JSX components + interactive index.html.
ui_kits/ipados/	iPadOS UI kit — sidebar-led layouts + interactive index.html.

---

Brand / Product Context

Apple's iOS 26 and iPadOS 26 introduce "Liquid Glass" — a translucent, light-refracting material language applied to tab bars, toolbars, sheets, controls, and system chrome. The rest of the system stays recognizably iOS: generous white space, rounded superellipse corners, edge-to-edge content with floating chrome, SF Pro typography, and a small palette of vivid system tints.

Three products share this system:

1. iPhone apps (iOS 26) — portrait-first, edge-to-edge, chrome floats on Liquid Glass.
2. iPad apps (iPadOS 26) — sidebar-driven, multitasking-aware, same primitives at larger scale.
3. Widgets & Home Screen — rounded-tile icons, small/medium/large widgets with glass backing.

---

Content Fundamentals

Apple's copy is famously sparse. The voice is confident, direct, and product-first.

Voice & tone

• Second person, imperative or descriptive. "Tap to add." "Your photos are backed up." Not "Users can tap…"
• Confident but not hype-y. Avoid marketing adjectives in UI copy; save them for App Store product pages.
• Friendly, never cute. No exclamation marks in system UI. No emoji in system strings.
• Calm specificity over vagueness. "Delete 3 photos?" not "Are you sure?"

Casing

• Title Case for most titles, navigation, section headers, buttons, and switches: "Add Photo", "Do Not Disturb", "Face ID & Passcode".
• Sentence case for body copy, descriptions, and long-form explanations inside Settings footers.
• ALL CAPS reserved for small uppercase group headers in grouped lists (e.g. "LOCATION SERVICES"), tracked +0.5px, color --tertiary-label.

Examples

• Alert title: "Delete Message?" · body: "This message will be deleted for you. It will still be visible to other people in the conversation." · actions: "Delete" / "Cancel"
• Empty state: "No Messages" · "Your conversations will appear here."
• Settings row: "Show Preview" · "Always (Default)"
• Section footer: "Calls from unknown numbers will be silenced and sent to Voicemail."

Do / Don't

• ✅ "Turn on Notifications" ❌ "Enable notifications now!"
• ✅ "Couldn't load your photos." ❌ "Oops! Something went wrong 😕"
• ✅ "Done" ❌ "✓ All set!"

Emoji

• Not used in system chrome. Emoji belong to user content (messages, captions, reactions). Never in buttons, titles, alerts, or section headers.

---

Visual Foundations

Colors

• System tints (12) — Red, Orange, Yellow, Green, Mint, Teal, Cyan, Blue, Indigo, Purple, Pink, Brown. Each has a light and dark variant. Blue is the default tint.
• System Grays 1–6 — neutral fills ranging from #8E8E93 (Gray 1) to #F2F2F7 (Gray 6). Gray 6 is the default light grouped-background.
• Label colors — 4 opacity tiers of near-black (rgba(0,0,0,1) → rgba(60,60,67,.18)) or near-white in dark mode. Use these for text, never pure #000 / #FFF inside content areas.
• Fills — translucent grays (rgba(120,120,128,0.2) etc.) for slider tracks, unfilled switches, tag backgrounds.
• Separators — rgba(60,60,67,.36), hairline (0.33–0.5 px in iOS; render as 1px in CSS).

Typography

• SF Pro Text (≤19px) and SF Pro Display (≥20px) — Apple picks automatically by size.
• SF Pro Rounded for playful/kid/fitness contexts.
• SF Mono for code.
• Dynamic Type scale drives sizes; the default "Large" setting is the design target. See colors_and_type.css.
• SF Pro is not licensed for redistribution, so this system uses the system font stack with Inter as a web fallback — fonts/ only contains Inter. ACTION REQUESTED: if you want exact-metrics SF Pro in web exports, drop the SF Pro .woff2 files into fonts/ yourself (from developer.apple.com/fonts after accepting the license).

Spacing

• Base unit 4px, primary rhythm 8px. iPhone edge margin 16px; iPad 20px. Minimum hit target 44×44px.

Backgrounds

• Plain or grouped. Grouped = content on a tinted gray background with inset white cards (iOS Settings look).
• Full-bleed wallpapers only on Home/Lock screens and some onboarding. System chrome otherwise floats on a neutral surface.
• No gradients, textures, or hand-drawn illustrations in system UI. Illustration (if any) is flat, product-photo realism, or San-Francisco-glyph based.

Liquid Glass (materials)

• Five tiers: ultrathin / thin / regular / thick / chrome. Each is a tinted translucent fill + backdrop-filter: saturate(180%) blur(20–60px).
• Applied to: tab bars, navigation bars, sheets, toolbars, control center, context menus, pop-ups.
• Liquid Glass surfaces also get a subtle 0.5px inner top highlight and soft ambient shadow.

Shadows / Elevation

• iOS is mostly flat. Shadow appears under overlays: menus, popovers, alerts, sheets, device bezels.
• Scroll Edge Effect: a soft top/bottom gradient fade where content meets the Liquid Glass bar, so text appears to dissolve into it.
• 4-tier system in --shadow-level-1..4.

Corners

• Continuous (superellipse) corners everywhere. CSS approximates with standard border-radius. Key values:
  • List cells / medium buttons: 12px
  • Cards / alerts: 16px
  • Sheets, popovers: 22px
  • App icons (120px grid): 22.37px (~18.6%)

Animation

• Default curve: spring. cubic-bezier(0.25, 0.1, 0.25, 1) is a reasonable standard-ease substitute; for bouncier moments use cubic-bezier(0.5, 1.5, 0.5, 1).
• Durations: 200ms (taps), 350ms (push/pop nav), 500ms (sheet present), 800ms (home screen zoom).
• Sheets slide up; pushes translate from the right; modals fade+scale.

Interaction states

• Press (buttons): opacity 0.3, no scale change for system buttons. Custom buttons may scale to 0.96.
• Press (list rows): background fades to --fill-quaternary.
• Hover (iPad pointer only): subtle --fill-quaternary overlay or 1.05× highlight inside a 44×44 hit zone.
• Focus: blue 3px outline + 2px offset (Accessibility / keyboard nav).
• Disabled: opacity 0.3.

Transparency & blur

• Used only for system chrome, materials, and scroll edge effect. Content areas stay fully opaque.

Imagery

• Photography: warm, neutral, clean. No heavy filters, no grain. Product shots on white or gradient-free solid.
• Home/Lock wallpapers are the one exception: dreamy gradients + abstract blurs.

Card anatomy

• White fill (--secondary-grouped-background in grouped contexts).
• 16px radius.
• No border; rely on contrast with the gray grouped background.
• Shadow only when overlayed (menu/popover).

Layout rules

• Safe areas matter — respect status bar (top), home indicator (bottom 34px), and Dynamic Island.
• Floating chrome: tab bars and toolbars float 8–16px off the content edges.
• Large title → compact title on scroll (the signature iOS nav behavior).

---

Iconography

iOS uses SF Symbols — a library of 6,900+ vector glyphs that inherit the current text style's size and weight. They render as PDFs on device and SVGs on web.

• Stroke style — outlined by default ("regular"); filled, circled, and multi-color variants exist for the same glyph.
• Weights — Ultralight → Black, matching SF Pro text weights.
• Sizes — Small / Medium / Large, auto-aligned to the type's cap height.

Apple does not license SF Symbols for non-Apple contexts, so this kit ships a small set of Apple-licensed system glyphs that were embedded in the Figma export (assets/svg/) plus Phosphor Icons (CDN) as a close visual substitute for arbitrary glyphs.

• Substitute: https://unpkg.com/@phosphor-icons/web (regular weight — matches SF Symbols "regular")
• Flag: Phosphor is a stand-in. For an App Store–bound design, use SF Symbols from the Apple SF Symbols app.

Emoji are never used as UI iconography. They appear only in user-generated content. Unicode arrows and geometric glyphs (←, ›, •) are acceptable inside text content but not as button icons.

---

Caveats & known substitutions

• SF Pro fonts are not shipped (Apple's license forbids redistribution). Web fallback stack uses -apple-system → Inter. On Apple devices the real SF Pro loads automatically.
• SF Symbols not shipped. Use Phosphor (CDN) or drop in .svg exports from the SF Symbols app.
• Liquid Glass is a native Metal effect on-device; the web approximation uses backdrop-filter. The curvature/refraction nuance won't reproduce exactly.
• Continuous corners aren't available in CSS; standard border-radius is used.

---

Index

• colors_and_type.css — tokens
• preview/*.html — design-system cards (colors, type, components, materials)
• ui_kits/ios/ — iOS UI kit + click-thru prototype
• ui_kits/ipados/ — iPadOS UI kit + click-thru prototype
• SKILL.md — skill entry point
• assets/ — images, icons