Producto

Espaciado · Radio · Sombra

Variantes y estados

Campos y formularios

Tarjeta de producto

Patrón de navegación e-commerce

Reglas mínimas

Mensajes y notificaciones

Patrones de toast para confirmar acciones, reportar errores, mostrar progreso y notificar eventos. Usa colores de marca: azul profundo para éxito, naranja para advertencias, rojo para errores. Nunca uses verde.

Patrones de formulario asistido por IA

Demuestra los buenos patrones cuando un agente acompaña al usuario: stepper visible para reducir carga cognitiva, autocomplete con predicción inline (ghost text + Tab para aceptar), sugerencias contextuales del agente, validación con propuesta de corrección, y resumen final tipeado por el agente. El usuario siempre puede sobrescribir cualquier valor sugerido.

Variante con múltiples campos por pantalla

Misma promesa que el formulario por pasos, pero optimizado para usuarios expertos que quieren ver y editar todo de una. La IA aporta un CTA de auto-completado global, asistencia campo por campo (autocomplete con ghost text, sugerencias inline, presets) y un panel lateral con resumen en vivo. La validación es local: nunca bloquea otros campos.

Cuando un campo no está bien

El feedback útil es contextual: aparece donde el ojo ya está, dice qué está mal y, cuando es posible, ofrece la corrección en un solo click. Severidad jerarquizada (info → warn → error), validación blanda mientras escribe y firme al salir, nunca un muro de errores rojos para el usuario.

Vista de empleados en lista

Lista jerárquica expandible para visualizar la estructura del equipo: tags por rol y ubicación, y métricas clave (tamaño de equipo, OKR con tendencia, antigüedad y performance) leíbles en una sola línea. La indentación + línea vertical comunican profundidad sin saturar.

Tabla editable tipo Excel

Grid navegable por teclado: flechas para moverte, Enter o doble-click para editar, Tab para saltar a la siguiente columna, Esc para cancelar. Cabeceras tipo A, B, C y barra de fórmula con la celda activa — el patrón mental que cualquier usuario de Excel ya conoce.

Kanban con filtros

Primera vista de la suite de gestión de proyectos: tablero kanban con columnas de flujo (Backlog → En curso → Revisión → Listo), tarjetas con proyecto, prioridad, responsables, due-date y progreso de subtareas. Los filtros combinables (proyecto, prioridad, responsable) y la búsqueda libre permiten cortar el tablero sin perder el contexto visual. Vencimientos vencidos en rojo, prioridad y proyecto codificados en azules de la marca.

Kanban de contratación

Segundo ejemplo de la suite: pipeline de hiring con etapas (Aplicaciones → Screening → Entrevistas → Oferta → Contratado). Tarjetas con foto-iniciales, posición, seniority, ubicación, rango salarial, calificación y próximo paso. Filtros por posición, seniority y fuente; los candidatos que llevan más de 10 días en una etapa se marcan en rojo para evitar que se enfríen.

Timeline · Gantt con dependencias

Barras por proyecto con relleno proporcional al progreso, línea vertical de “hoy” y agrupación por proyecto con color propio. El filtro superior recorta a un solo proyecto para hacer foco. Pensado para horizontes de 4 semanas; escala bien para roadmaps tácticos sin volverse Microsoft Project.

Calendario · mensual y semanal

Misma data, dos densidades: una vista de mes para ver volumen y ritmo, y una de semana con franjas horarias para coordinar reuniones y bloques de trabajo. Cada evento hereda el color de su proyecto para reconocerse de un vistazo.

Roadmap por trimestres

Swimlanes por equipo, columnas por trimestre y barras que abarcan uno o varios Q. Los hitos se marcan con un diamante bajo la barra. La columna actual tiene un tinte azul muy sutil para anclar el presente sin robar protagonismo a lo que viene.

Sprint · capacity planner

Carga por persona en story points con barra de ocupación: si alguien se pasa de su capacidad, la barra cambia a naranja y aparece un aviso. La tabla de historias permite reasignar en vivo para balancear el sprint antes de empezar.

Guía agent-friendly