Architect web interfaces that adhere to Apple's Human Interface Guidelines (HIG), translating native iOS/iPadOS design patterns into high-performance web environments. Use when: (1) building web UIs with iOS-native look and feel, (2) implementing glassmorphism, translucency, or vibrancy effects, (3) designing mobile-first interfaces with Apple-style components (bottom sheets, navigation bars, inset grouped lists), (4) applying SF Pro typography, 8pt grid systems, or squircle corner radii, (5) creating Light/Dark mode adaptive designs following Apple's system color palette, (6) the user mentions "iOS style", "Apple HIG", "iOS design", or wants a native-feeling mobile web app.
env(safe-area-inset-*) for CSS positioning.-apple-system, BlinkMacSystemFont, , ."SF Pro Text""SF Pro Display"Inner Radius = Outer Radius - Padding.systemBlue (#007AFF), systemGreen (#34C759), systemRed (#FF3B30), systemOrange (#FF9500), systemYellow (#FFCC00), systemGray (#8E8E93).backdrop-filter: blur(20px) + semi-transparent backgrounds for the iOS glass effect.cubic-bezier(0.25, 0.1, 0.25, 1.0) or spring physics. Never linear.scale(0.96) on press for interactive elements.<div class="bg-white/80 dark:bg-black/80 backdrop-blur-xl rounded-[20px] p-5 shadow-sm border border-black/[0.05] dark:border-white/[0.1] active:scale-[0.98] transition-all duration-200">
<h1 class="text-[34px] font-bold tracking-tight text-black dark:text-white">
Activity
</h1>
<p class="text-[17px] text-gray-500 dark:text-gray-400 mt-1">
Daily Summary
</p>
<button class="mt-6 w-full bg-[#007AFF] hover:bg-[#0071E3] text-white font-semibold py-3 rounded-xl transition-colors">
View Details
</button>
</div>
backdrop-blur and vibrancy on overlays?