Superficies

Las superficies definen la jerarquia estructural de la interfaz. Usa surface-canvas, surface-base, surface-raised y surface-subtle para separar fondos, contenedores de contenido y capas elevadas sin depender de colores semanticos. Cada superficie tambien establece su contexto de contraste correspondiente para que texto e iconos se mantengan legibles en light y dark.

Abrir coloresAbrir overview de theming

Roles de superficie

Cada token de superficie representa un nivel distinto de enfasis estructural. Elige el token que coincida con el rol de la capa, no con la decoracion que quieras agregar.

surface-canvas

Usalo para el fondo de la aplicacion y la capa principal del viewport.

surface-base

Usalo para contenedores de contenido por defecto como cards, paneles y secciones principales.

surface-raised

Usalo para capas persistentes o elevadas que necesiten separarse con mayor claridad de la superficie base.

surface-subtle

Usalo para enfasis ligero y zonas de apoyo. Evita usarlo como fondo estructural dominante de una pagina.

Pareja de contraste

Las superficies no son tokens de fondo solamente. Cada una esta emparejada con un color de contraste correspondiente para que el contenido frontal siga siendo legible en cualquier tema.

Cuando un layout usa surface-canvas, surface-base, surface-raised o surface-subtle, el texto y los iconos dentro de esa capa deberian seguir el contexto de contraste correspondiente en lugar de asumir un foreground fijo. Por ejemplo, surface-base trabaja con contrast-surface-base y surface-raised con contrast-surface-raised.

Como apilar superficies

Construye layouts con una progresion visual estable.

Default layering path

Usa surface-canvas -> surface-base -> surface-raised -> surface-subtle como recorrido de apilado por defecto. Empieza por la capa mas estructural y sube solo cuando la interfaz necesite mayor separacion o enfasis. Evita saltar de surface-canvas directamente a surface-subtle para la jerarquia principal de una pantalla.