tangmyy/apple-ui-design

Diseño UI Apple

Sistema de diseño UI limpio, minimalista y premium inspirado en Apple.

Cuándo Usarlo

• Construir interfaces modernas que requieran una UX excepcional
• Crear estética limpia y minimalista
• Implementar acabados y animaciones similares a Apple
• Diseñar experiencias de usuario premium
• Revisar UI/UX en busca de calidad de diseño

Flujo de Trabajo

Paso 1: Aplicar Sistema Tipográfico

Utilice SF Pro Display con una jerarquía adecuada (hero, título, cuerpo, pie).

Paso 2: Aplicar Filosofía de Color

Use variables de modo claro/oscuro con contraste adecuado.

Paso 3: Aplicar Sistema de Espaciado

Siga el ritmo de espaciado de 4/8/16/24/48/96px.

Paso 4: Verificar Lista de Verificación

Asegúrese de que los objetivos táctiles, el contraste y las animaciones cumplan con los estándares.

---

Principios Fundamentales

1. Claridad - El contenido es el rey, la UI desaparece
2. Deferencia - La UI sirve al contenido, nunca compite
3. Profundidad - Las capas crean jerarquía

Tipografía

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

/* Jerarquía */
--text-hero: 600 48px/1.1;      /* Declaraciones audaces */
--text-title: 600 32px/1.2;     /* Encabezados de sección */
--text-body: 400 17px/1.5;      /* Contenido legible */
--text-caption: 400 13px/1.4;   /* Información secundaria */

Filosofía de Color

/* Modo claro */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent: #0071e3;

/* Modo oscuro */
--bg-primary: #000000;
--bg-secondary: #1d1d1f;
--text-primary: #f5f5f7;

Sistema de Espaciado

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px;   /* Espaciados entre secciones */

Patrones Clave

Tarjetas

.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);
}

Botones

.btn-primary {
  background: var(--accent);
  color: white;
  padding: 12px 24px;
  border-radius: 980px;  /* Forma de píldora */
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

Animaciones Sútiles

/* Micro-interacciones */
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

/* Elementos de página */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

Reglas de UX

Hacer	No Hacer
Espacio en blanco generoso	Diseños apretados
Una acción principal	Varios CTA que compiten
Divulgación progresiva	Todo visible
Retroalimentación sutil	Animaciones bruscas
Fuentes del sistema	Fuentes decorativas

Lista de Verificación

• Objetivos táctiles ≥ 44px
• Relación de contraste ≥ 4.5:1
• Ancho máximo de contenido ~680px
• Ritmo de espaciado consistente
• Soporte de modo oscuro
• Animaciones suaves a 60fps