Lenguaje de diseño

Lienzo

Los iconos se dibujan en un lienzo de 31×29 unidades, con la ilustración centrada en (15.5, 12.5). Cuatro líneas guía, que son formas de referencia que mantienen el mismo tamaño visual en todos los iconos, fijan los límites exteriores: un círculo de 23 unidades de diámetro, un cuadrado de 20.6 unidades, un rectángulo horizontal de 23×18.4 y un rectángulo vertical de 18.4×23. Los iconos están centrados, no alineados abajo.

Capas

Un icono tiene una pieza trasera de tono medio con sombra proyectada y, por lo general, una pieza delantera más clara con un brillo suave en el borde superior. El contenido blanco, como un símbolo o unas líneas, puede quedar entre las dos. Un icono sin pieza delantera tiene contenido blanco lo bastante grande como para formar una segunda capa. Las esquinas superiores de la pieza delantera se redondean por separado, lo que deja a la vista la pieza trasera en las esquinas.

Contornos y esquinas

Los contornos miden 1 unidad de ancho y quedan fuera del relleno. El radio de las esquinas es 2.2 para el cuerpo de un icono (3.2 con el contorno) y 1.2 para el contenido. Una banda de color dentro de un contorno mide al menos 2 unidades de ancho o se omite.

Color

Cada tono se diseña a partir de un azul de referencia y luego se desplaza hacia el color de acento conservando su luminosidad relativa a ese acento. Las marcas son blancas sobre las piezas de tono medio y oscuras sobre las piezas claras.

Marcas

Las marcas son las líneas y los símbolos dibujados sobre un icono. Las líneas de contenido usan un trazo de 1.6, las marcas direccionales como las flechas usan 2.2 y los contornos usan 1. Las partes con forma de puntero son una excepción y usan 2.6 o 2.0. El elemento más pequeño mide 2.4 unidades. Las puntas de flecha son triángulos sólidos.

Movimiento

El movimiento tiene dos fotogramas clave, la pose de reposo y la pose al pasar el cursor, y dura 460 ms. Un icono representa solo lo que hace el objeto real: una carpeta se abre, un sobre se desprecinta, un calendario pasa una página. El movimiento no sustituye a una idea abstracta.

Las reglas completas están en PROMPT.md, que está escrito en chino simplificado.