name: apple-ui-design
description: Apple-inspired clean, minimal, premium UI design. Use when building modern interfaces requiring exceptional UX, clean aesthetics, or Apple-like polish. Triggers on: clean UI, modern design, Apple style, minimal, premium, user-friendly, UX.
Apple UI Design
Core Principles
- Clarity - Content is king, UI disappears
- Deference - UI serves content, never competes
- Depth - Layering creates hierarchy
Typography
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
/* Hierarchy */
--text-hero: 600 48px/1.1; /* Bold statements */
--text-title: 600 32px/1.2; /* Section headers */
--text-body: 400 17px/1.5; /* Readable content */
--text-caption: 400 13px/1.4; /* Secondary info */
Color Philosophy
/* Light mode */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent: #0071e3;
/* Dark mode */
--bg-primary: #000000;
--bg-secondary: #1d1d1f;
--text-primary: #f5f5f7;
Spacing System
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px; /* Section gaps */
Key Patterns
Cards
.card {
background: rgba(255,255,255,0.8);
backdrop-filter: blur(20px);
border-radius: 18px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
Buttons
.btn-primary {
background: var(--accent);
color: white;
padding: 12px 24px;
border-radius: 980px; /* Pill shape */
font-weight: 500;
transition: all 0.2s ease;
}
.btn-primary:hover {
transform: scale(1.02);
filter: brightness(1.1);
}
Subtle Animations
/* Micro-interactions */
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
/* Page elements */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
UX Rules
| Do |
Don't |
| Generous whitespace |
Cramped layouts |
| One primary action |
Multiple competing CTAs |
| Progressive disclosure |
Everything visible |
| Subtle feedback |
Jarring animations |
| System fonts |
Decorative fonts |
Checklist
majiayu000