Encabezado 1
Encabezado 2
Encabezado 3
Encabezado 4
Encabezado 5
Encabezado 6
Artículo usando estilos de tarjeta para mantener la consistencia visual.
Sistema de diseño
Un sistema de interfaz escalable pensado para rendimiento, accesibilidad y flujos de producto reales.
Resumen del sistema
Tokens y tipografía completos → Guía de estiloCómo se comporta la interfaz: los tokens limitan color, tipografía, superficies y espaciado para que la UI compuesta sea coherente.Tokens y tipografía completos → Guía de estilo
En la práctica
Los mismos tokens se componen en UI predecible: superficie, etiqueta, campo y acción.
Sistema de color
Primaria (rampa de marca)
Secundaria (rampa violeta)
Semántica
Tipografía
Heading 1Heading 2Heading 3
El cuerpo usa el tamaño por defecto y la interlinea para lectura prolongada y copy de UI.
Texto pequeño para leyendas, pistas y metadatos secundarios.
const primary = 'var(--brand-700)';Superficies y elevación
Las superficies van de la página (--surface-0) a tarjetas elevadas; la elevación usa tokens de sombra compartidos. Cambia claro/oscuro en la cabecera para comprobar contraste.
--shadow-sm
--shadow-md
--shadow-lg
Espaciado y radio
El sistema en la práctica
Ejemplo de flujo de producto
Un flujo real de UI que muestra coherencia del sistema entre patrones de interacción.
Stepper y progreso
Componente de flujo multi-paso con navegacion siguiente/anterior, mas indicadores visuales de progreso lineal y circular que se actualizan al avanzar en cada paso.
Steppers
- 1Investigación UX y descubrimiento
- 2Flujos UX y diseño UI
- 3Contenido y recopilación de datos
- 4Desarrollo e integración
- 5Pruebas y QA
- 6Despliegue y lanzamiento
- 7Mantenimiento e iteración
- Investigación UX y descubrimiento
- Flujos UX y diseño UI
- Contenido y recopilación de datos
- Desarrollo e integración
- Pruebas y QA
- Despliegue y lanzamiento
- Mantenimiento e iteración
Lineal: 14%
14%
CircularLayout y composición
Primitivas de layout reutilizables para composición responsive—grids, asides y tarjetas. Los tokens visuales están en el resumen del sistema.
Cuadrícula
Tres patrones cubren la mayoría de layouts de producto: una cuadrícula equilibrada de cuatro columnas, una de tres columnas más amigable para contenido y una región principal con aside.
Por debajo de 768px, los ejemplos de cuadrícula se ocultan para mantener tarjetas legibles; el patrón principal + aside demuestra el comportamiento responsive.
Layout equilibrado (4 columnas)
Tarjeta con estilo por defecto.
Tarjeta con color de superficie 2.
Tarjeta con color de superficie 3.
Tarjeta con color de superficie 4.
Layout amigable para contenido (3 columnas)
Tarjeta con estilo por defecto.
Tarjeta con color de superficie 2.
Tarjeta con color de superficie 3.
Cuadrícula con Aside
Cuadrícula con Aside Artículo
Botón de encabezadoArtículo usando estilos de tarjeta para mantener la consistencia visual.
Acciones
Elementos interactivos para disparar la intención del usuario.
Cargadores
El componente Loader es un pequeño spinner personalizable que se usa para mostrar estados de carga. Acepta las propiedades width, height y border (cadenas o números) y establece variables CSS coincidentes (--loader-width, --loader-height, --loader-border) para que el spinner del pseudoelemento se pueda estilizar de forma consistente. Coloca el loader dentro de un contenedor centrado o usa un padre con posición (por ejemplo position: relative) cuando muestres un overlay.
Franja de CTA
Una franja destacada de llamada a la acción para demos, descargas o contacto.
¿Listo para alinear a tu equipo de estudio?
Obtén una demo adaptada a tu protocolo y tus cronogramas.
Formularios y validación (núcleo)
Lo primero que usas en producto: controles, validación, búsqueda y un fragmento de contacto compuesto—ordenado por relevancia.
Formularios e Inputs
Sistema flexible de formularios e inputs con soporte para texto, selects, checkboxes, radios, sliders, carga de archivos y validacion. Todos los controles son accesibles, personalizables y permiten mensajes de ayuda y estado mediante props.
Ejemplo: revision en linea
Etiqueta, texto de ayuda, validacion y acciones como en un panel real.
Galeria de controles
Validación de Formularios en Línea
Reglas del lado del cliente con mensajes en línea, un resumen de errores y estados accesibles.
Validación Asíncrona en Línea
Verificación “¿el correo ya está en uso?” con debounce, estado de carga y mensajes accesibles.
Chips con autocompletado
La lista se filtra al escribir (por ejemplo, acces deja en la lista opciones como Normas de accesibilidad). Elige con el raton, o flechas y Enter o coma. Si no hay coincidencias, Enter o coma agrega una etiqueta libre. Con el campo vacio, Retroceso quita el ultimo chip. Al enfocar con el campo vacio se muestran recientes (si hay) o todas las sugerencias.
Patron: contacto y validacion
Un fragmento compuesto—entrada, accion principal, resultado en linea y confirmacion—muestra como tokens y componentes encajan mas alla de controles aislados.
Formularios y validación
Entradas avanzadas
Selectores especializados, subidas y campos compuestos—útiles en herramientas densas; detrás del núcleo al contar la historia del sistema.
ComboBox / Autocompletar
Selección simple y múltiple con chips. Flechas + Enter, o haz clic para elegir.
Selección simple
- Proyectos
- Equipos
- Informes
- Documentos
- Facturación
- Ajustes
Selección múltiple
- Desarrollo front-end
- Accesibilidad
- Sistemas de diseno
- TypeScript
- Investigacion UX
- Rendimiento
Subidor de archivos
Arrastra archivos aquí o busca. Muestra validacion basica y progreso simulado.
Subidor de archivos (Imágenes)
Arrastra y suelta o busca. Muestra miniaturas en vivo con opciones de quitar y validaciones de tamaño.
Drop images here
or click to — up to 10 files, max 10 MB each
Medidor / Puntuacion
Puntuacion lineal con umbrales + estilos nativos de <meter>. Arrastra para previsualizar valores.
72 • Fair
0–49: Poor • 50–74: Fair • 75–89: Good • 90–100: Excellent
Selector de rango de fechas
Selecciona las fechas de inicio y fin usando el calendario o los presets rapidos. Haz clic en un dia para establecer la fecha de inicio; luego haz clic en otro dia para establecer la fecha de fin (si eliges un dia anterior se intercambian inicio y fin). Usa los presets para rangos comunes y el boton Limpiar para restablecer.
Usa las flechas para moverte entre dias, Av Pag/Re Pag para moverte entre meses, Inicio/Fin para ir al inicio/fin de la semana, y Enter o Espacio para seleccionar la fecha enfocada.
May 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
Selector de fecha
Elige una fecha con “Hoy” y “Limpiar”.
May 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
Entrada de fecha (Popover)
El calendario se abre al escribir o enfocar; ESC o fuera para cerrar.
Datos y feedback
Tablas, filtros y superficies de feedback—vacío, error y éxito—para que las UIs densas sigan siendo claras.
Notificaciones
Los toasts se usan para mostrar notificaciones breves que se cierran automaticamente.
Notificaciones
Alertas en linea
Exito: Tu configuracion se ha guardado.
Info: Hay nueva guia de plantilla disponible.
Advertencia: Un sitio tiene tareas vencidas.
Error: No se pudo sincronizar con el EDC. Intenta de nuevo.
Tooltips y Popovers
Pistas breves (hover/foco) y popovers mas completos, no modales (clic/ESC/afuera).
Tooltips
Enlace con tooltipChip hover o foco
Popovers
Ejemplos de Popovers
Modales y Overlays
Modal centrado y panel lateral. Teclado: ESC para cerrar. El foco queda atrapado dentro.
Vacios, error y confirmacion
Reserva estas superficies para contexto recuperable—explica en breve y ofrece un siguiente paso claro, incluida la confirmacion positiva tras el exito.
Lista vacia
Ningun proyecto coincide con estos filtros.
Quita filtros o crea un proyecto para empezar.
Error
No se pudieron cargar los resultados.
Comprueba la conexion e intentalo de nuevo.
Exito
Cambios guardados.
Tu equipo ya puede ver la actualizacion.
Patron: panel de datos
Filtros, densidad y datos tabulares se componen mas abajo—este bloque anticipa como encajan en una barra de herramientas.
Ver Tabla de datos y Filtros para implementaciones completas y accesibilidad.
Tarjetas
Diseños de tarjetas modulares con soporte de encabezado, estilos de variantes y estados interactivos de hover/focus para agrupar el contenido de forma clara y mantener una jerarquía visual.
Hoja de ruta trimestral
Temas priorizados para el siguiente ciclo, con responsables y fechas objetivo.
Actualizado hace 2 h · Estrategia · 4 responsables
Con Encabezado
Esta tarjeta tiene un encabezado con un icono y texto.
Esta tarjeta no tiene encabezado. Solo contenido.
Tarjeta 0: estilo alternativo.
Tarjeta 1: estilo alternativo.
Tarjeta 2: estilo alternativo.
Tarjeta con estilo inverso.
Tabla de datos
Columnas ordenables, encabezado fijo y paginación en el cliente.
Sort by:
| ID | Fase | Versión | Estado | Tarea |
|---|---|---|---|---|
| 1000 | UI Design | I | Sprint Planning | 12 |
| 1001 | UI Development | II | In Review | 19 |
| 1002 | Accessibility Fixes | III | Deployed | 26 |
| 1003 | Bugs & Issues | I | Sprint Planning | 33 |
| 1004 | UI Design | II | In Review | 40 |
| 1005 | UI Development | III | Deployed | 47 |
| 1006 | Accessibility Fixes | I | Sprint Planning | 54 |
| 1007 | Bugs & Issues | II | In Review | 61 |
Page 1 / 4
Tarjetas de métricas
Tarjetas pequeñas de métricas para paneles y resmenes.
...…
—
...…
—
...…
—
Ejemplo de línea de tiempo
Una línea de tiempo vertical usando las clases .timeline y .step para layouts secuenciales.
1
Paso 1
Inicia tu proyecto y configura lo básico.
2
Paso 2
Desarrolla funciones e itera rápidamente.
3
Paso 3
Prueba, implementa y monitorea tu aplicación.
Filtros
Alterna chips con conteo, “Borrar todo” y resultados en vivo.
0 selected
Result 1
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Píldoras de lógica (Filtros seleccionados)
Chips de filtro removibles con lógica AND/OR y “borrar todo” rápido.
No filters selected
18 results
Resultado 1
Resultado 2
Resultado 3
Resultado 4
Resultado 5
Resultado 6
Resultado 7
Resultado 8
Resultado 9
Resultado 10
Resultado 11
Resultado 12
Resultado 13
Resultado 14
Resultado 15
Resultado 16
Resultado 17
Resultado 18
Add:
Medios e interacción
Patrones de contenido visual e interactivo.
Demo del Rotador de Logos
Demo del componente LogoRotator, rotando 20 tarjetas con iconos.
Tecnologías utilizadas
Tecnologías usadas en este sitio (no son logos de clientes).
Carrusel horizontal
Tarjetas como marcadores de imagen. Usa las flechas o arrastra/desplaza. Se ajusta por tarjeta.
Tarjeta de ejemplo 1
Imágenes de relleno / texto de ejemplo.
Tarjeta de ejemplo 2
Imágenes de relleno / texto de ejemplo.
Tarjeta de ejemplo 3
Imágenes de relleno / texto de ejemplo.
Tarjeta de ejemplo 4
Imágenes de relleno / texto de ejemplo.
Tarjeta de ejemplo 5
Imágenes de relleno / texto de ejemplo.
Tarjeta de ejemplo 6
Imágenes de relleno / texto de ejemplo.
Tarjeta de ejemplo 7
Imágenes de relleno / texto de ejemplo.
Tarjeta de ejemplo 8
Imágenes de relleno / texto de ejemplo.
Carrusel de imágenes
Carrusel interactivo de imágenes con:
- Área principal grande con transiciones de deslizamiento suaves
- Botones de flecha Anterior/Siguiente
- Navegacion por miniaturas clickeables
- Indicador de imagen activa
- Navegacion con teclado (flechas izquierda/derecha)
- Soporte para toque, arrastrar y deslizar
- Diseño responsive
- Etiqueta y clase de encabezado personalizables para el panel de información
Rotador de imágenes
ImageRotator recorre una lista de imágenes en un intervalo configurable. Props clave:
images— lista de {src, alt}interval— periodo de rotación en milisegundostransition— estilo de animacion (fade, slide, zoom, flip, kenburns, dissolve, crossfade, none)transitionDuration— duracion de la animacion en ms (controla CSS y el tiempo)width/height— tamaño; acepta numeros o cadenas de CSS
El componente renderiza diapositivas por capas para animaciones de entrada y salida suaves y respeta prefers-reduced-motion. En desarrollo, las imagenes remotas quedan sin optimizar para evitar errores del optimizador de Next.js.
Principios del sistema
Pautas que definen cómo se aplica el sistema en las interfaces.
Una acción principal por región
Las acciones primarias se usan con moderación para mantener claridad y foco.
Los colores semánticos están reservados para feedback
Advertencia y error comunican estado del sistema, no jerarquía visual.
Los patrones núcleo van antes que las entradas avanzadas
Las interacciones habituales tienen prioridad antes de añadir complejidad.
La coherencia la impulsan los tokens
Los design tokens alinean componentes, temas y estados.
La accesibilidad es la base, no un añadido
Los componentes se diseñan para contraste, foco y usabilidad.
Hecho para productos reales
Este sistema está pensado para escalar en entornos de producción, equilibrando rendimiento, accesibilidad y usabilidad.
Pestañas y acordeón
Patrones de disclosure al final para que el ejemplo de flujo siga siendo la narrativa principal.
Pestañas
Interfaz de pestañas accesible con roles ARIA, navegación de teclado (←/→, Inicio/Fin), gestión del foco y desplazamiento horizontal para el exceso. Solo se muestra un panel de pestaña a la vez, y todos los controles son compatibles con lectores de pantalla.
Overview
Pestañas con estilo de píldoras.
Overview
Acordeón
Componente de acordeón accesible con roles ARIA, navegación de teclado (↑/↓, Inicio/Fin) y animaciones suaves de abrir/cerrar. Solo se muestra un panel abierto a la vez y todos los controles son compatibles con lectores de pantalla.
En el inicio de sesión elige «Olvidé mi contraseña» y sigue el enlace del correo. Los enlaces caducan pronto por seguridad.