Proyecto de muestra
Una prioridad, información clara y una siguiente acción.
MAKING ID / SISTEMA OSClaridad con
Claridad con
profundidad.
Contenido estable. Navegación y acciones con volumen. Un lenguaje compartido con la marca, diseñado para trabajar.
Biblioteca visual con ejemplos neutros. No contiene datos de clientes ni opera sobre el OS real.
PRODUCTO / MATERIALES / COMPORTAMIENTOTres capas.
Una jerarquía.
PROYECTOS / EJEMPLOTodo listo para avanzar.
Fondo.
#F2F2F7 sitúa el espacio de trabajo y separa el contenido.
Contenido.
Tarjetas blancas opacas. El texto mantiene contraste y estabilidad.
Interacción.
Navegación oscura y controles con cristal; el vinotinto prioriza una acción.
El cristal se comporta.
No solo se transparenta.
Desenfoque del fondo, luz direccional, borde fino y sombra de separación. El volumen responde a la posición del puntero y a la presión.
Controles de demostración. No crean ni modifican proyectos.
Usar en
Navegación, acciones, ventanas y controles donde la profundidad explica interacción.
Evitar en
Cuerpos de texto, tablas o tarjetas de información. Evitar anillos concéntricos en el cierre.
Cada acción
comunica su estado.
NORMAL
FOCO / TECLADO
PULSADO
Objetivos táctiles de al menos 48 × 48 px. Foco visible. Etiquetas claras. Los estados no dependen solo del color.
Movimiento corto.
Orientación constante.
240–280 ms
Controles: luz y color. Presión: 100 ms.
360 ms
Actualización de fragmentos. Entrada de secciones: 460 ms.
620 ms
Ventanas: una sola animación CSS de entrada y salida.
Ventanas: cubic-bezier(.25,.1,.25,1). El menú Más abre en 360 ms y cierra en 180 ms, desde la esquina superior derecha.
Inicio muestra la estructura de inmediato y completa resumen, tareas y agenda por respuestas independientes. No reanima la pantalla completa. En otros módulos, la estructura provisional no muestra cifras inventadas.
Móvil
Diseñar la vista para su espacio, respetar áreas seguras y teclado. Sin desbordamiento horizontal.
Accesibilidad
Con movimiento reducido, omitir desplazamientos. Con transparencia reducida, utilizar superficies opacas con el mismo contraste.
Misma marca.
Distinta tarea.
El OS organiza proyectos, fechas y acciones. El sitio presenta el trabajo y facilita el contacto. Comparten paleta, tipografía, detalle y comportamiento; la web no copia el panel administrativo.