| name | ios-style-designer |
| description | 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.
|
iOS Frontend Design
Core Principles
- Clarity: Legible text at every size, precise icons, subtle adornments that enhance understanding.
- Deference: Fluid motion and beautiful interface that supports content without competing with it.
- Depth: Visual layers, translucency (glassmorphism), and realistic shadows to convey hierarchy.
Layout & Composition
- Safe Areas: Respect device-specific safe areas. Use
env(safe-area-inset-*) for CSS positioning.
- 8pt Grid: Align all elements to an 8pt grid. Spacing: 8, 16, 24, or 32pt increments.
- Margins: Standard horizontal gutter of 16pt or 20pt for content alignment.
Visual Language
Typography
- System font stack:
-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display".
- Dynamic Type scale: Large Title 34pt, Title 1 28pt, Title 2 22pt, Title 3 20pt, Headline 17pt bold, Body 17pt, Callout 16pt, Subhead 15pt, Footnote 13pt, Caption 12pt.
Corner Radius (Squircles)
- Use continuous corner curves (Squircle), not standard geometric circles.
- Containers: 10pt to 20pt. Nested radius:
Inner Radius = Outer Radius - Padding.
Color & Adaptivity
- iOS System Palette:
systemBlue (#007AFF), systemGreen (#34C759), systemRed (#FF3B30), systemOrange (#FF9500), systemYellow (#FFCC00), systemGray (#8E8E93).
- Support seamless Light/Dark mode transitions.
- Translucency:
backdrop-filter: blur(20px) + semi-transparent backgrounds for the iOS glass effect.
Component Standards
- Navigation Bar: "Large Title to Inline Title" collapse transition on scroll.
- Bottom Sheets: Prioritize for mobile modals. Include visible grabber handle at top.
- Buttons:
- Filled: High emphasis, subtle drop shadow, rounded corners.
- Plain: System blue text, no background.
- Inset Grouped Lists: Rounded-corner cards with distinct section headers.
- Minimum tap target: 44x44pt.
Animation & Interaction
- Easing:
cubic-bezier(0.25, 0.1, 0.25, 1.0) or spring physics. Never linear.
- Haptic Simulation: Subtle
scale(0.96) on press for interactive elements.
- Transitions: 200-300ms duration for most UI transitions.
Tailwind CSS Example
<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>
Checklist
Evaluation Criteria
- Native Fidelity: Does the UI feel like a native App Store app?
- Consistency: Uniform corner radii, spacing, and typography weights throughout?
- Elegance: Sufficient whitespace to prevent clutter?
