Apple-inspired clean, minimal, premium UI design. Use when building modern interfaces requiring exceptional UX, clean aesthetics, or Apple-like polish...
Apple-inspired clean, minimal, premium UI design system.
Use SF Pro Display with proper hierarchy (hero, title, body, caption).
Use light/dark mode variables with proper contrast.
Follow 4/8/16/24/48/96px spacing rhythm.
Ensure touch targets, contrast, and animations meet standards.
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 */
/* 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;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px; /* Section gaps */
.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);
}
.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);
}
/* 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); }
}
| 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 |
