riken-python/apple-style-design

Diseño de Estilo Apple

Un lenguaje de diseño completo, extraído de la etiqueta apple-style de Dribbble (64 capturas, octubre de 2026) y verificado con las convenciones HIG de Apple. Abarca tokens, componentes, materiales, animación, layout, copy y recetas por plataforma.

El aspecto en una frase: lienzo neutro y tranquilo, un acento seguro, el contenido como protagonista, profundidad suave en lugar de líneas, y movimiento que se siente físico.

Cómo usar este skill

1. Identifica el tipo de salida (página web, pantalla de app, widget, panel de plugin, icono, póster, animación). Elige la receta correspondiente en references/layouts.md.
2. Elige un modo: Claro (por defecto para marketing, productividad, salud), Oscuro (medios, herramientas pro, finanzas, juegos, VFX), o Vidrio-sobre-imagen (visionOS, secciones hero, reproductores). Consulta el 'Selector de modo' más abajo.
3. Carga los tokens. Para web, copia assets/apple-style.css en el proyecto (o inclúyelo en línea) y constrúyelo con sus variables y clases .as-*. Para otras plataformas, lee references/platforms.md (Qt/PySide QSS para Nuke, frontend de ComfyUI, Tailwind, SwiftUI, Figma, diapositivas, Remotion).
4. Compón con componentes de references/components.md. No inventes nuevos estilos para un botón o fila de lista; las recetas ya codifican los microdetalles.
5. Añade materiales y movimiento al final: references/materials.md (Vidrio Líquido, escarchado, degradados mesh, grano) y references/motion.md (muelles, revelaciones, estados de presión).
6. Ejecuta la lista de verificación de calidad al final antes de mostrar el resultado.

¿Necesitas evidencia de un patrón o una referencia visual? references/shot-catalog.md enumera cada captura analizada y lo que enseña. assets/demo.html es una galería funcional de cada componente creado con la hoja de estilo: ábrela para ver el nivel de calidad objetivo.

Las 12 leyes (por qué se ve 'Apple')

Estos son los patrones que aparecieron en casi todas las capturas sólidas. Cada uno tiene una razón; tenla en cuenta cuando un caso no esté cubierto.

1. Lienzo neutro, contenido coloreado. Los fondos son blanco roto #F5F5F7 / gris agrupado #F2F2F7 o casi negro #000/#1C1C1E. El color se reserva para datos, estado y una acción principal. Razón: el lienzo retrocede para que el contenido y el acento tengan todo el significado.
2. Un acento por pantalla. Azul sistema #007AFF por defecto; violeta #5E5CE6, rosa, naranja o verde cuando el producto tiene su propia identidad. Un segundo acento solo para series de datos (por ejemplo, barras alternas naranja/rosa). Razón: un solo acento hace obvia la acción principal sin etiquetas.
3. Profundidad por elevación, no por bordes. Las tarjetas flotan sobre sombras suaves, amplias y de baja opacidad; los separadores son líneas finas de 0.5px insertadas desde el borde izquierdo. Los bordes grises gruesos de 1px se leen como 'formulario web', no Apple.
4. Esquinas continuas en todas partes. Radios tipo squircle: 10 (controles), 14 (campos), 20 (grupos de lista, tarjetas), 28 (widgets, hojas), 38+ (dispositivo/ventana), 999 (píldoras). Radio anidado = radio exterior menos el padding.
5. La tipografía hace la jerarquía. SF Pro / Inter, tracking negativo ajustado en tamaños de visualización, títulos grandes y negrita, texto secundario gris en lugar de tamaños más pequeños. Los números son protagonistas: 12.203 grande y negrita con una pequeña unidad gris al lado en la misma línea base.
6. El gris es una escala, no un color. Opacidades de etiqueta: primaria 100%, secundaria 74% claro / 60% oscuro (Apple usa 60% en claro, que solo es 3.44:1 sobre blanco), terciaria 30%, cuaternaria 18%. Nunca inventes un #999 aleatorio.
7. Píldoras y círculos para acciones. Los botones primarios son píldoras completas; los iconos de acción son círculos de 44 px; los FAB son círculos de acento rellenos con un glifo blanco estilo SF y una sombra coloreada suave.
8. Materiales sobre rellenos planos. Las superposiciones, barras de herramientas, docks, barras laterales y reproductores utilizan material borroso translúcido (Vidrio Líquido) para que el contexto se vea a través.
9. Espacio en blanco generoso y rítmico. Cuadrícula de 4 px; padding interno de 16/20; las secciones respiran (96-160 px en escritorio). Si se siente un poco vacío, probablemente esté bien.
10. El movimiento es físico. Muelles, no interpolaciones lineales. Presión = escala 0.97, liberación = retroceso con muelle. Las revelaciones se desvanecen + elevan 8-24 px + desenfocan. Nada rebota más de una vez.
11. El copy es corto y seguro. Mayúscula inicial, puntos en los lemas ('Sound. Refined.', 'Coming Soon.'), titulares de dos tonos con una frase gris o de acento, títulos de widget en minúscula permitidos ('steps walked').
12. Artesanía en los microdetalles. Chevrones en gris terciario, números tabulares para datos, indicaciones de teclas (esc, return), puntos de estado, líneas finas de 0.5 px, reflejos superiores internos en vidrio, brillo coloreado debajo de los gráficos. Estos detalles marcan la diferencia entre 'limpio' y 'Apple'.

Selector de modo

El producto se siente como	Modo	Lienzo	Superficie	Idea de acento
Salud, productividad, comercio, docs, marketing SaaS	Claro	#F5F5F7 / #F2F2F7	#FFFFFF	Azul #007AFF
Reproductor multimedia, música, tickers financieros, herramientas pro/VFX, juegos	Oscuro	#000000	#1C1C1E / #2C2C2E	Rosa #FF375F, verde #30D158, violeta #5E5CE6
Hero sobre foto/vídeo, visionOS, reproductores, interruptores	Vidrio	imagen o degradado mesh	Vidrio Líquido	Blanco primario, acento secundario
Marca/póster/lanzamiento	Degradado	degradado mesh + grano	vidrio o ninguno	Color del producto

Tokens principales (resumen)

Tablas completas con valores oscuros y justificación: references/tokens.md. Implementado en assets/apple-style.css.

• Pila de fuentes: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif. Carga Inter (400/500/600/700) desde Google Fonts como sustituto multiplataforma. Mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace.
• Escala tipográfica (app): Título grande 34/41 700 (-0.022em) · Título1 28/34 700 · Título2 22/28 700 · Título3 20/25 600 · Titular 17/22 600 · Cuerpo 17/22 400 · Comentario 16/21 · Subtítulo 15/20 · Nota al pie 13/18 · Leyenda 12/16 · Leyenda2 11/13.
• Escala tipográfica (marketing): Hero 64-96 px 700, interlineado 1.04, tracking -0.035em · Sección 40-56 px 600 -0.028em · Lead 21-24 px 400 color secundario · Ceja 14-17 px 600 en acento.
• Espaciado: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160.
• Radio: 6 (etiquetas), 10 (botones/controles), 14 (campos), 20 (tarjetas/listas), 28 (widgets/hojas), 38 (ventanas/dispositivos), 999 (píldoras).
• Sombra (claro): 0 1px 2px rgb(0 0 0/.04), 0 4px 12px rgb(0 0 0/.05), 0 16px 40px rgb(0 0 0/.08). Flotante: añade 0 32px 80px rgb(0 0 0/.12).
• Atenuación: estándar cubic-bezier(.25,.1,.25,1), salida enfatizada cubic-bezier(.32,.72,0,1), curva linear() de muelle en motion.md. Duraciones 150 (presión), 250 (estado), 400 (entrada), 600-900 (revelaciones hero).

Antipatrones (vistos en el scrapping, no los copies)

La etiqueta también contenía capturas fuera de estilo. Enseñan lo que hay que evitar:

• Brillo esqueuomórfico de 2012: inputs resaltados, botones de 'Iniciar sesión' biselados, texturas de lino (captura de la tienda de aplicaciones OTAir).
• Mascotas de dibujos animados, contornos de pegatinas y contornos gruesos (Taco, Buzz Addiction).
• Páginas 'brutalistas tecnológicas' en mayúsculas y monoespacio (MEMBRAN): un estilo válido, pero no Apple.
• Botones con degradado neón en cada elemento, y más de un degradado por tarjeta.
• Sombras negras duras desplazadas a un lado (los marcos de dispositivo 'Astro' usan una sombra desplazada brutalista: incorrecta para el estilo Apple).
• Bordes #ddd predeterminados de 1px en cada tarjeta, texto #999, azul Bootstrap #0d6efd.
• Animaciones de rebote con exceso, cargadores giratorios en todo, paralaje que lucha contra el desplazamiento.
• Usar el logotipo o las marcas comerciales de Apple en el producto del usuario. Usa el estilo, nunca la marca.

Contrato de salida

Cuando este skill produce un diseño:

• Entrega código funcional, no una descripción. Web: HTML semántico + el CSS de tokens (en línea o enlazado) + JS mínimo para movimiento. Otros destinos: la receta de la plataforma.
• Siempre soporta modo claro y oscuro a menos que el selector de modo indique solo oscuro, y respeta prefers-reduced-motion.
• La accesibilidad es parte del aspecto: contraste de texto 4.5:1 (label-2 está ajustado para pasar en blanco, lienzo y gris agrupado; label-3 es solo para marcadores de posición, chevrones y estados deshabilitados, nunca para texto que deba leerse), objetivos táctiles de 44x44, anillo de foco visible (contorno de 3px accent-text, desplazamiento de 2px: un contorno, nunca una sombra de caja, para que las sombras de los componentes no puedan ocultarlo), etiquetas en botones de icono.
• Los acentos del sistema sin procesar fallan en contraste como rellenos de botón y como texto pequeño (blanco sobre #007AFF = 4.02:1, sobre #0A84FF = 3.65:1). Botones de relleno con accent-fill, texto de color con accent-text, mantén el accent sin procesar para brillos, interruptores, iconos y formas grandes. Tonos seguros por tono: references/tokens.md 3a.
• Indica el modo, el acento y los 2-3 detalles distintivos utilizados en una línea corta después de entregar, para que el usuario pueda dirigir.

Lista de verificación de calidad (ejecutar antes de mostrar)

• El lienzo es neutro; solo un color de acento dirige las acciones.
• El acento pasa el contraste: los rellenos de botón usan accent-fill, el texto de acento usa accent-text (tokens.md 3a); un tono personalizado tuvo sus relaciones calculadas.
• Sin bordes duros en tarjetas; los separadores son líneas finas, insertadas y más claras a 1x DPR.
• Los grupos de radio con etiquetas largas o sugerencias son listas de opción única con una marca de verificación, no controles segmentados apretados.
• Los controles compactos de escritorio crecen a 44 px bajo pointer: coarse.
• Los radios siguen la escala y los radios anidados son concéntricos.
• El texto de visualización tiene tracking negativo; el texto secundario usa la escala de grises, no el tamaño.
• Los números/títulos hero son grandes; las unidades/etiquetas pequeñas y grises en la misma línea base.
• La acción principal es una píldora (o FAB de acento); los botones de icono son círculos de 44 px.
• Las superposiciones/barras de herramientas usan desenfoque de material con resalte interno, no gris plano.
• Las sombras son suaves y en capas; nada parece pegado.
• Existen estados de presión, hover y foco; el movimiento usa muelles/salida suave; se respeta el movimiento reducido.
• El modo oscuro usa grises en capas (#1C1C1E / #2C2C2E / #3A3A3C), no superficies negras puras sobre negro.
• El copy es corto, con mayúscula inicial, seguro; nada de lorem ipsum en el trabajo entregado.
• El ancho móvil funciona con márgenes de 16-20 px y sin desplazamiento horizontal.