material-design

Material Design

Las superficies digitales se comportan como hojas de papel con grosor y sombra, de modo que la profundidad y el movimiento explican la jerarquía de la interfaz.

Un sistema de superficies de colores planos que se sitúan en elevaciones definidas y proyectan sombras desde una luz clave superior izquierda, con colores audaces, una cuadrícula de 8dp y movimiento intencionado. Google lo anunció en I/O en junio de 2014.

Período: 2014–presente · Era: Pantalla táctil · Dominio: Diseño gráfico y de UI · También llamado: Material, Google Material, Material 2

Cuándo cargar esta habilidad

Cárgala cuando el usuario solicite: "material design", "material ui", "google material", "elevation", "floating action button", "fab", "android style", "ripple effect", "app bar", "paper and ink", "md2".

Ideal para: aplicaciones Android, paneles de administración, aplicaciones web con muchos componentes, sistemas de diseño, herramientas de productividad.

No la uses cuando:

• La marca necesita una voz distintiva, porque el aspecto predeterminado es reconociblemente de Google.
• La página es editorial y tiene pocos componentes interactivos.
• El diseño necesita un aspecto puramente 2D sin sombras.

Directrices del sistema

Al generar diseños de UI o gráficos en Material Design, DEBES:

1. Tratar cada superficie como una hoja de papel de 1 dp de grosor que nunca se dobla, nunca cambia de tamaño al estirarse y nunca atraviesa otra superficie.
2. Expresar la jerarquía con elevación en dp: 0 para la página, 1 para tarjetas, 4 para la barra de aplicaciones, 6 para un botón flotante en reposo, 8 para un menú, 16 para un cajón de navegación y 24 para un diálogo.
3. Construir cada diseño sobre una cuadrícula de 8 dp, con 4 dp para alineación de iconos y texto pequeño, y objetivos táctiles de 48 dp.
4. Usar colores audaces de un tono primario y uno de acento, con la barra de estado en la tonalidad 700 del primario y la barra de aplicaciones en la tonalidad 500.
5. Usar texto grande con una escala definida de 12, 14, 16, 20, 34, 45 y 56 sp en Roboto.
6. Dar a cada toque una respuesta: una ondulación circular que crece desde el punto de contacto durante 300 ms.
7. Mover elementos a lo largo de trayectorias curvas con una aceleración que comienza rápida y termina lenta, y hacer que cada movimiento explique de dónde vino un elemento.

Barreras de protección

Cada línea siguiente rompe el estilo. Verifica tu resultado contra la lista antes de devolverlo.

• NUNCA: Degradados y texturas en superficies.
• NUNCA: Sombras sin un nivel de elevación consistente o con diferentes direcciones de luz.
• NUNCA: Superficies que se superponen a la misma elevación.
• NUNCA: Objetivos táctiles de menos de 48 dp.
• NUNCA: Texto de color sobre un fondo de color por debajo de 4.5:1.
• NUNCA: Cambios de estado instantáneos sin movimiento ni respuesta de ondulación.
• NUNCA: Más de un botón de acción flotante en una pantalla.

Perfil vectorial

Eje	Puntuación	1 significa	5 significa
Ornamentación	■■□□□ 2/5	puro minimalista	maximalista
Dimensionalidad	■■■□□ 3/5	estrictamente 2D	3D completo / espacial
Rigidez de cuadrícula	■■■■□ 4/5	caótico / orgánico	cuadrícula matemática estricta
Realismo esqueuomórfico	■■□□□ 2/5	digital abstracto	material fotorrealista
Expresividad tipográfica	■■□□□ 2/5	neutral / invisible	experimental / ilustrativa

Mantén estas puntuaciones. Si una solicitud mueve un eje en 2 puntos o más, has salido del estilo: ve a "Retrocesos de linaje".

Lógica espacial y de cuadrícula

• Mecánica de cuadrícula: Una cuadrícula base de 8 dp, 4 dp para iconos y texto, una cuadrícula de 4 columnas para teléfono con márgenes de 16 dp, una cuadrícula de 8 columnas para tableta con márgenes de 24 dp y una cuadrícula de 12 columnas para escritorio; la barra de aplicaciones mide 56 dp en teléfono y 64 dp en escritorio.
• Proporción de espacio en blanco: El 25–40% de la superficie permanece vacía; la escala de espaciado es 4, 8, 16, 24, 32, 48, 56 dp, con 16 dp de relleno de tarjeta.
• Reglas de alineación: El contenido se alinea a una línea clave de 72 dp desde el borde izquierdo en listas con avatares y a una línea clave de 16 dp en caso contrario; el botón de acción flotante se sitúa a 16 dp de los bordes derecho e inferior.
• Geometría del contenedor: Las tarjetas y botones usan un radio de esquina de 2 dp; los botones de acción flotante son círculos de 56 dp y los botones mini de 40 dp; los diálogos tienen un ancho mínimo de 280 dp.

Tipografía

• Clasificaciones: sans serif neo-grotesca · sans serif humanista
• Tracking: Los tamaños de visualización de 34 sp y más grandes toman 0em a -0.01em; el cuerpo toma +0.01em; los botones están en mayúsculas a +0.09em.
• Interlineado: Títulos 1.2; cuerpo 1.4 a 1.5 a 14 sp sobre una línea de 20 dp; texto de lista 24 dp para 16 sp.
• Reglas de jerarquía:
  • Usa la escala 12, 14, 16, 20, 34, 45 y 56 sp y ningún tamaño entre esos valores.
  • Usa medium (500) para títulos y botones, regular (400) para el cuerpo y light (300) para tamaños de visualización de 45 sp y superiores.
  • Coloca el texto sobre una superficie al 87% de negro para primario, 54% de negro para secundario y 38% de negro para deshabilitado.
  • Coloca las etiquetas de los botones en mayúsculas a 14 sp y peso 500.

Combinaciones de fuentes

Visualización	Cuerpo	Nota
Roboto	Roboto	La tipografía del sistema de Material 1 y 2, utilizada en una sola familia de peso 300 a 900.
Roboto Condensed	Roboto	Una cara de visualización condensada para encabezados densos con la cara de texto estándar.
Noto Sans	Noto Sans	La familia de respaldo para escrituras no latinas en los mismos pesos y métricas.

Color e iluminación

• Estructura de paleta: Un tono primario con sus tonalidades 500 y 700, un tono de acento del rango A200 a A400, y grises neutros; el tono primario cubre la barra de aplicaciones y del 10 al 20% de la superficie.
• Reglas de contraste: El texto del cuerpo mantiene al menos 4.5:1 y el texto grande al menos 3:1; el texto blanco sobre índigo 500 alcanza 7.5:1 y sobre rosa A200 alcanza 3.4:1, que es suficiente solo para texto de 18 sp.
• Tratamiento de superficie: Rellenos planos opacos de color sólido sin degradado y sin textura; los fondos semitransparentes usan negro al 32% de opacidad detrás de los diálogos.
• Luz y sombra: Una luz clave desde arriba y una luz ambiental suave; cada sombra tiene una penumbra, una umbra y una capa ambiental, y su desenfoque y desplazamiento crecen con la elevación.

Paleta

Nombre	Hex	Rol
Superficie	#FFFFFF	superficie de tarjeta y hoja
Fondo	#FAFAFA	fondo de página
Índigo 500	#3F51B5	primario y barra de aplicaciones
Índigo 700	#303F9F	barra de estado
Rosa A200	#FF4081	acento y botón de acción flotante
Gris 900	#212121	texto al 87% de opacidad

Materialidad y textura

• Simulación de superficie: Papel digital: una hoja plana de 1 dp de grosor que proyecta una sombra pero no tiene grano, bisel ni textura.
• Reglas de borde: Las superficies no tienen contorno; los divisores son de 1 px negro al 12% de opacidad, insertados a 72 dp o 16 dp del borde; los campos de texto toman una línea inferior de 1 px que crece a 2 px al enfocarse.
• Desenfoque y elevación: Las sombras de elevación son 0 1px 3px al 20% más 0 1px 1px al 14% para 1 dp, 0 4px 5px al 14% y 0 1px 10px al 12% para 4 dp, y 0 9px 12px al 14% para 12 dp; el sistema tiene 25 niveles de 0 a 24 dp.

Ornamentación e iconografía

• Iconografía: Iconos del sistema de 24 dp en un área viva de 20 dp con un grosor de trazo de 2 dp, terminales cuadrados con esquinas redondeadas de 2 dp, relleno sólido y un color al 54% de negro.
• Ilustración: Formas vectoriales planas en la paleta y fotografía a sangre completa bajo un fondo semitransparente del 20 al 40%; sin contorno y sin perspectiva.
• Elementos decorativos: botón de acción flotante · ondulación · sombras de elevación · barra de aplicaciones de bloque de color · imagen hero a sangre completa · tarjeta

Movimiento e interactividad

• Nacido en pantalla: sí
• Física de transición: Las superficies se mueven a lo largo del eje Z y del plano de la pantalla con trayectorias curvas; los elementos aceleran rápido y desaceleran suavemente, y un elemento compartido viaja desde su origen hasta su destino.
• Aceleración: cubic-bezier(0.4, 0, 0.2, 1)
• Duración (ms): 300
• Hover y activo: El hover añade una superposición negra del 4%; la pulsación muestra una ondulación del 12% de negro que crece desde el punto de contacto durante 300 ms; un botón elevado se eleva de 2 dp a 8 dp al presionar.

Código y tokens iniciales

Establece data-style="material-design" en el elemento raíz y pega los tokens. El archivo tokens.css tiene los mismos tokens y un conjunto de reglas de referencia.

[data-style="material-design"] {
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-text: rgba(0, 0, 0, 0.87);
  --color-muted: rgba(0, 0, 0, 0.54);
  --color-primary: #3F51B5;
  --color-accent: #FF4081;
  --color-border: rgba(0, 0, 0, 0.12);
  --font-sans: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --border-radius: 2px;
  --border-width: 1px;
  --shadow-elevation: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 300ms;
  --color-primary-dark: #303F9F;
  --shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
  --shadow-24dp: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  --touch-target: 48px;
  --color-on-bg: #212121;
  --color-on-surface: #212121;
  --color-on-primary: #FAFAFA;
  --color-on-accent: #212121;
  --color-muted-on-bg: #737373;
  --color-muted-on-surface: #757575;
  --color-link: #3F51B5;
  --color-link-on-surface: #3F51B5;
  --display-weight: 300;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 500;
  --label-weight: 500;
  --display-tracking: 0em;
  --display-leading: 1.15;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 2;
}

Patrones Tailwind:

Elemento	Clases
página	min-h-screen bg-[#FAFAFA] font-sans text-black/[0.87] antialiased
barra de aplicaciones	flex h-14 md:h-16 items-center bg-[#3F51B5] px-4 text-xl font-medium text-white shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)]
tarjeta	rounded-sm bg-white p-4 shadow-[0_1px_3px_0_rgba(0,0,0,0.2),0_1px_1px_0_rgba(0,0,0,0.14),0_2px_1px_-1px_rgba(0,0,0,0.12)]
botón	h-9 min-w-[64px] rounded-sm bg-[#3F51B5] px-4 text-sm font-medium uppercase tracking-[0.09em] text-white shadow-md transition-shadow duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-lg active:shadow-xl
fab	h-14 w-14 rounded-full bg-[#FF4081] text-white shadow-[0_3px_5px_-1px_rgba(0,0,0,0.2),0_6px_10px_0_rgba(0,0,0,0.14),0_1px_18px_0_rgba(0,0,0,0.12)]

Paquete visual

Las imágenes e iconos de este estilo son archivos. Úsalos tal como son, o léelos como una especificación y dibuja los tuyos en el mismo lenguaje.

Archivo	Contenido
pack/hero.svg	Placa hero, 800 por 600. Una imagen abstracta en el lenguaje visual del estilo.
pack/pattern.svg	Mosaico de patrón, 80 por 80. Se repite en ambas direcciones.
pack/icons.svg	Sprite de iconos: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders.

• Iconos: sólido, trazo 2 en un campo de 24px, extremos rectos, uniones redondeadas, contenedor: ninguno. Uso: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Un icono toma currentColor.
• Familia de iconos: el sprite está extraído de Material Symbols (Baseline, relleno) de Google, licencia Apache 2.0. Razón: El conjunto relleno del sistema del propio estilo, en su cuadrícula de 24dp. Es un sustituto de código abierto para una demostración. Para un producto, usa la biblioteca de iconos de la marca y elige la familia según las reglas a continuación.
• Tipo de visualización: peso 300, tracking 0em, interlineado 1.15, mayúsculas: ninguna.
• Pesos: visualización 300, subtítulo 500, cuerpo 400, negrita en texto 500, etiquetas y botones 500. El estilo usa 3 pesos (300, 400, 500) y ningún otro. La visualización es 100 más ligera que el cuerpo, por lo que el tamaño lleva la jerarquía. El acento es el peso: una palabra más pesada es el acento, por lo que los pasos entre los pesos son claros.
• Tipo de cuerpo: 16px, interlineado 1.5.
• Página: hero dividido, alineado a la izquierda, densidad regular, inclinación de acento 0°.
• Color de texto: --color-text es solo para el campo de lectura principal. En cada campo, usa su token: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

Cómo elegir un paquete de iconos

Un paquete de iconos es una tipografía para imágenes. Elígelo con el mismo cuidado que la cara de texto. Estas reglas se aplican tanto para un conjunto de código abierto como para una biblioteca con licencia.

1. El trazo coincide con el asta. Coloca un icono junto al texto del cuerpo al tamaño del texto. La línea del icono y el asta de una letra tienen el mismo peso.
2. Los terminales y las esquinas siguen el token de radio. Los extremos rectos y las uniones en inglete van con un radio de cero. Los extremos redondeados y las uniones redondeadas van con un radio suave.
3. El modo de relleno sigue la tecnología de la época. Las épocas de impresión cortan formas sólidas. Las épocas de pantalla con profundidad rellenan y sombrean la forma. Las interfaces de productos actuales dibujan un contorno.
4. Las metáforas no son más jóvenes que el estilo. Cada imagen es un objeto que la época conocía. Un icono con una metáfora posterior rompe el período.
5. Una familia, una cuadrícula. Todos los iconos provienen de una familia y una variante, dibujados en un campo. No mezcles familias en una superficie.
6. La familia cubre el producto. Enumera cada concepto que el producto necesita antes de comprometerte. Una familia que no tiene un icono para uno de ellos es la familia incorrecta.
7. El color es un token. Un icono toma currentColor. Un segundo tono proviene de un token, no del archivo.
8. La licencia permite el uso. Lee la licencia del conjunto. Da crédito donde la licencia lo solicita. Un producto con una marca usa su biblioteca con licencia y aplica las mismas reglas para elegir la familia.

Retrocesos de linaje

Cuando el usuario solicite una variación, no improvises. Mezcla hacia el vecino nombrado aquí y carga su habilidad.

• Si el usuario solicita más plano: muévete hacia flat-design (Diseño Plano). Elimina todas las sombras de elevación, separa las superficies solo por color y mantén la paleta de colores y la cuadrícula de 8dp.
• Si el usuario solicita más táctil: muévete hacia skeuomorphism (Esqueumorfismo). Añade un degradado del 5 al 10%, un resalte interior de 1px y una textura de superficie al 5% de opacidad; mantén la elevación y el diseño.
• Si el usuario solicita más oscuro: muévete hacia dark-mode (Modo Oscuro). Aplica fondos oscuros, reduce la opacidad del texto y mantén las directrices de Material.