Makes iOS apps feel premium, polished, and unmistakably native — SF Symbols mastery, SwiftUI spring animations, haptic feedback choreography, blur/vibrancy materials, Dynamic Type, color system design, and the specific spacings and radii Apple uses. This is about TASTE, not syntax. Activate on 'iOS design polish', 'SwiftUI animation', 'SF Symbols', 'haptic feedback', 'premium iOS feel', 'Apple HIG', 'native iOS look', 'Liquid Glass', 'iOS visual design', 'app polish'.
Makes iOS apps feel premium, polished, and unmistakably native — SF Symbols mastery, SwiftUI spring animations, haptic feedback choreography, blur/vibrancy materials, Dynamic Type, color system design, and the specific spacings and radii Apple uses. This is about TASTE, not syntax. Activate on 'iOS design polish', 'SwiftUI animation', 'SF Symbols', 'haptic feedback', 'premium iOS feel', 'Apple HIG', 'native iOS look', 'Liquid Glass', 'iOS visual design', 'app polish'.
allowed-tools
Read,Write,Edit,Glob,Grep,WebSearch,WebFetch
metadata
{"category":"Design & UX","tags":["ios","swiftui","design","sf-symbols","haptics","animation","apple-hig","polish"],"pairs-with":[{"skill":"native-app-designer","reason":"Architecture and platform patterns complement visual polish"},{"skill":"sound-engineer","reason":"Audio feedback pairs with haptics for multi-sensory experience"},{"skill":"mobile-ux-optimizer","reason":"Performance optimization ensures animations stay smooth"},{"skill":"vaporwave-glassomorphic-ui-designer","reason":"Glass and blur effects share material design vocabulary"}]}
category
Mobile Development
tags
["ios","design","beauty","polish","apple-hig"]
iOS App Beauty
The difference between a functional iOS app and a beautiful one is not more features. It is the weight of a toolbar icon matching the weight of the nav title. It is a spring animation that overshoots by exactly 4% before settling. It is a haptic tap that arrives at the precise millisecond a toggle lands. This skill is about the thousand tiny decisions that make an iOS app feel like it belongs on the platform.
When to Use This Skill
Use for:
Polishing an existing iOS app to feel premium
Designing a new app's visual language and motion system
SF Symbol selection, weight matching, and rendering modes
Linear (macOS) — keyboard-first, animation choreography, information density done right
Arc — tab management reimagined, spatial UI, bold use of color
SF Symbols Mastery
Weight Matching
SF Symbols come in 9 weights (ultralight through black). The weight of your icons MUST match the weight of adjacent text.
// WRONG: Default (regular) icon next to semibold textLabel("Settings", systemImage: "gear")
.font(.headline) // headline is semibold// RIGHT: Match the icon weight to the text weightLabel {
Text("Settings").font(.headline)
} icon: {
Image(systemName: "gear")
.fontWeight(.semibold)
}
Text Style
Font Weight
SF Symbol Weight
.largeTitle
Regular
.regular
.headline
Semibold
.semibold
.body
Regular
.regular
.caption
Regular
.regular
.title3 + .bold()
Bold
.bold
Rendering Modes
SF Symbols support four rendering modes. Choosing the right one is a design decision, not a technical one.
// Monochrome — single color, most common, cleanestImage(systemName: "heart.fill")
.symbolRenderingMode(.monochrome)
// Hierarchical — primary/secondary opacity, adds depthImage(systemName: "square.and.arrow.up")
.symbolRenderingMode(.hierarchical)
.foregroundStyle(.blue)
// Palette — explicit colors per layer, bold statementsImage(systemName: "person.crop.circle.badge.plus")
.symbolRenderingMode(.palette)
.foregroundStyle(.white, .blue)
// Multicolor — Apple's predefined colors, use for system iconsImage(systemName: "externaldrive.badge.icloud")
.symbolRenderingMode(.multicolor)
When to use which:
Monochrome: Toolbars, tab bars, list accessories — anywhere icons should recede
Hierarchical: Navigation elements, empty states — when you want subtle depth
Palette: Highlights, badges, selected states — when the icon IS the content
Multicolor: System-like interfaces, settings — when matching Apple's own style
Symbol Effects (iOS 17+)
Animated symbols are the single biggest upgrade in recent iOS design. They replace manual animations for common interactions.
// Bounce on tap — satisfying micro-interactionImage(systemName: "heart.fill")
.symbolEffect(.bounce, value: isFavorited)
// Pulse while loading — alive without being distractingImage(systemName: "arrow.down.circle")
.symbolEffect(.pulse, isActive: isDownloading)
// Variable color for progress — elegant loading indicatorImage(systemName: "wifi")
.symbolEffect(.variableColor.iterative, isActive: isConnecting)
// Replace with transition — icon morphingImage(systemName: isMuted ?"speaker.slash" : "speaker.wave.2")
.contentTransition(.symbolEffect(.replace))
// Scale on appear — entrance animationImage(systemName: "checkmark.circle.fill")
.symbolEffect(.appear, isActive: showCheck)
Symbol Sizing
Never hardcode icon sizes. Use imageScale to match the text environment.
// Let the symbol scale with Dynamic TypeImage(systemName: "star.fill")
.imageScale(.medium) // .small, .medium, .large// For custom sizing that still respects accessibilityImage(systemName: "star.fill")
.font(.system(size: 24))
SwiftUI Animation & Spring Physics
The Spring System
Springs are the foundation of natural iOS motion. Every animation that moves an element should use a spring, not a linear or ease curve.
// Apple's built-in presets (use these first)
.animation(.spring, value: offset) // Default — good for most
.animation(.snappy, value: offset) // Quick settle — toggles, switches
.animation(.bouncy, value: offset) // Playful — celebrations, fun UI
.animation(.smooth, value: offset) // No bounce — serious/professional// Custom spring — when presets aren't right
.animation(.spring(
response: 0.35, // Duration feel (seconds) — lower = faster
dampingFraction: 0.7, // 0 = infinite bounce, 1 = no bounce
blendDuration: 0// Transition between animations
), value: offset)
Spring Tuning Reference
Context
Response
Damping
Feel
Toggle/switch
0.25
0.8
Snappy, decisive
Sheet presentation
0.35
0.75
Smooth, weighted
Card expand
0.4
0.7
Satisfying settle
Bounce celebration
0.5
0.5
Playful overshoot
Drag release
0.3
0.65
Elastic snap-back
Page transition
0.45
0.85
Cinematic, smooth
Pull-to-refresh
0.35
0.6
Springy, physical
Keyboard-driven nav
0.2
0.9
Instant, no play
Animation Choreography
The secret to premium animation is not one animation — it is multiple animations happening at slightly different times with slightly different springs.
Never use pure black (#000000) for text in light mode. Apple uses #1D1D1F — it is softer.
Never use pure white (#FFFFFF) for backgrounds in dark mode. Apple uses #000000 for OLED true black (saves battery) and #1C1C1E for elevated surfaces.
Semantic colors over hardcoded values. Use .primary, .secondary, .label, .systemBackground before creating custom colors.
Vibrancy > opacity for overlays. Use .ultraThinMaterial instead of Color.black.opacity(0.5).
// Apple's material system — automatically adapts to light/dark
.background(.ultraThinMaterial) // Barely there — navigation bars
.background(.thinMaterial) // Subtle — sidebars
.background(.regularMaterial) // Standard — sheets, popovers
.background(.thickMaterial) // Heavy — overlays on busy content
.background(.ultraThickMaterial) // Opaque — near-solid backgrounds
Spacing, Padding, and Corner Radii
Apple's Spacing Scale
Apple uses an 8-point grid. Every spacing value should be a multiple of 4, with 8 as the standard unit.
// The spacing scalelet spacingXS: CGFloat=4// Tight: between icon and labellet spacingS: CGFloat=8// Compact: between related elementslet spacingM: CGFloat=12// Standard: list row internal paddinglet spacingL: CGFloat=16// Comfortable: section padding, card insetslet spacingXL: CGFloat=20// Roomy: between sectionslet spacingXXL: CGFloat=24// Generous: screen-edge margins (iPhone)let spacingXXXL: CGFloat=32// Spacious: hero section spacing
Corner Radius Reference
// Apple's actual corner radii (measured from system apps)let radiusSmall: CGFloat=6// Small chips, tagslet radiusStandard: CGFloat=10// Buttons, text fieldslet radiusMedium: CGFloat=12// Cards, list rowslet radiusLarge: CGFloat=16// Sheets, larger cardslet radiusXLarge: CGFloat=20// Modals, group containerslet radiusScreen: CGFloat=38.5// iPhone 15 Pro screen radius (for continuous corners)// CRITICAL: Use continuous corner style, not circular
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
// NOT: .cornerRadius(16) — this uses circular corners which look off on iOS
The Continuous Corner Rule
Apple uses continuous (superellipse) corners everywhere, not circular corners. This is the single most common mistake in third-party iOS apps.
// WRONG — circular corners (looks like Android)
.clipShape(RoundedRectangle(cornerRadius: 12))
// RIGHT — continuous corners (looks like Apple)
.clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
Dynamic Type and Accessibility as Beauty
Great iOS apps look BETTER with large text, not worse. This is a design skill, not just an accessibility checkbox.
// Scale with Dynamic Type — text and spacing@ScaledMetricvar iconSize: CGFloat=24@ScaledMetricvar cardPadding: CGFloat=16// Test at ALL sizes: Settings > Accessibility > Larger Text// Your layout should be beautiful at AX5 (the largest), not just default
Rules:
Never hardcode font sizes. Use text styles (.body, .headline, .caption).
Test at the 5 largest accessibility sizes. If your layout breaks, fix the layout, not the text.
Images and icons should scale with @ScaledMetric.
Minimum tap target: 44x44 points (Apple HIG). Aim for 48x48.
Liquid Glass (iOS 26 / 2025)
Apple's newest visual language emphasizes translucency and depth:
// Liquid Glass material — the new standard
.background(.liquidGlass)
// Key characteristics:// - Translucent with refraction-like effects// - Content behind affects appearance (not flat tint)// - Rounded, fluid shapes (continuous corners everywhere)// - Depth-aware: modals float above, toolbars recede// Adapting to Liquid Glass:// - Reduce opacity of decorative elements// - Let content shine through navigation// - Use system materials instead of custom blurs// - Test with varied background content (photos, text, solid colors)
Anti-Patterns
Circular Corners on iOS
What it looks like: Standard CSS-style border-radius
Why it's wrong: Every Apple element uses continuous (superellipse) corners. Circular corners look foreign.
Fix: Always use RoundedRectangle(cornerRadius: r, style: .continuous)
Mismatched Icon Weights
What it looks like: Thin SF Symbols next to bold text, or vice versa
Why it's wrong: Creates visual tension; elements don't feel like they belong together
Fix: Match SF Symbol .fontWeight() to the text style weight
Linear Animations
What it looks like: Elements that move at constant speed, stop abruptly
Why it's wrong: Nothing in the physical world moves linearly. It feels robotic.
Fix: Use .spring or .snappy for movement, .easeOut only for opacity
Haptic Spam
What it looks like: Haptic feedback on every scroll, every tap, every state change
Why it's wrong: Overwhelms the sense; user becomes numb to meaningful haptics
Fix: Haptics only at decision points, state changes, and physical metaphors
Dark Mode as an Afterthought
What it looks like: White text on #1A1A1A with the same assets as light mode
Why it's wrong: Dark mode needs elevated surfaces, adjusted contrast ratios, and muted colors
Fix: Design dark mode FIRST, then adapt to light. Use Asset Catalog with appearance variants.
Over-Decorating Empty States
What it looks like: Massive illustrations, long paragraphs explaining what the empty state means
Why it's wrong: Empty states should invite action, not explain failure
Fix: One icon, one line, one button: "No messages yet. Start a conversation."
Quality Checklist
Before considering any iOS screen "finished":
SF Symbol weights match adjacent text weights
All corners use .continuous style
Every moving element uses spring animation (no linear, no ease-in-out)
Haptic feedback at key interaction moments (not every tap)
