Kit 01 · Claymorphism
Claymorphism minimal
Botones y tarjetas con volumen suave, sombras difusas y esquinas XXL. Ideal para proyectos amables, apps educativas y ejemplos de interfaces “blandas”.
Ver kit completoColección UI
UI Kits & Componentes
Estilos visuales completos y piezas sueltas de interfaz para usar en clase o en proyectos: botones, colores, tipografía, cards, formularios y más. Todo pensado para ser adaptado, comentado y reutilizado sin complicarte la vida.
UI Kits por estilo
Explora los estilos visuales
Cada kit recoge un lenguaje visual coherente: componentes, estados y patrones listos para prototipar interfaces o enseñar cómo se construye un sistema de diseño consistente.
Kit 02 · Corporate
Corporate UI
Un sistema sobrio, limpio y muy legible para productos serios: dashboards, webs corporativas, SaaS y documentación visual de proyectos más “de traje”.
Ver kit completoKit 03 · Pixel
Pixel UI
Interfaz en clave pixel-art: botones cuadrados, bordes duros y estética retro. Perfecto para proyectos gamificados, interfaces lúdicas o ejemplos de diseño nostálgico.
Ver kit completoKit 04 · Neobrutalist
Neobrutalist UI
Colores planos, bordes marcados y tipografía en grande. Un kit directo, sin florituras, para hablar de jerarquía visual, contraste y diseño valiente.
Ver kit completoKit 05 · Minimal
Clean minimalist
Mucho aire, pocos adornos. Un sistema pensado para landings, portfolios y productos donde el contenido tiene que respirar y la tipografía hace casi todo el trabajo.
Ver kit completoKit 06 · Glass
Glassmorphism
Paneles translúcidos, blur suave y degradados brillantes. Ideal para hablar de efectos, profundidad y cómo no pasarse con el brillo en interfaces reales.
Ver kit completoComponentes base
Colores, botones, tipos y más
Recursos transversales que puedes combinar con cualquier estilo: paletas, botones, escalas tipográficas, cards, formularios e iconos listos para copiar y pegar.
Paletas & combinaciones de color
Conjuntos de colores pensados para producto digital: minimal, vibrante, pastel, neon, dark mode y combinaciones con contraste AA/AAA listas para uso en UI.
Incluye ejemplos de 60/30/10, colores de feedback (success, error, warning) y recomendaciones para fondos oscuros.
➜ Ver paletas de colorBotones & estados
Botones primarios, secundarios y terciarios, variantes con icono, ghost, outline y estados de hover, pressed, focus y disabled listos para enseñar patrones de interacción.
Incluye ejemplos de tamaños mínimo recomendado, padding adecuado y qué errores evitar al diseñar CTAs.
➜ Ver sistema de botonesTipografía & escalas
Escalas tipográficas para UI con H1–H6, body, captions y labels, pensadas para productos digitales en escritorio y móvil.
Incluye combinaciones recomendadas (Inter, SF Pro, Poppins, Roboto) y pautas de line-height para mejorar legibilidad.
➜ Ver sistema tipográficoCards & patrones de layout
Tarjetas con y sin imagen, cards para stats, listados y bloques de contenido, junto con pequeños patrones de layout en 2–3 columnas.
Útil para explicar cómo se repite un patrón de interfaz manteniendo coherencia entre estilos.
➜ Ver colección de cardsInputs & formularios
Campos de texto, selects, checkboxes, radios, toggles y textareas con estados de focus, error y éxito, listos para usar en ejemplos de formularios accesibles.
Incluye patrones de errores, mensajes de ayuda y ejemplos de estructura de formularios simples y multi-paso.
➜ Ver kit de formulariosIconografía & componentes varios
Pack de iconos lineales y componentes como modales, toasts, tooltips, tabs, pills y badges para completar cualquier sistema de UI.
Ideal para mostrar cómo pequeños detalles de iconos y estados enriquecen una interfaz sin recargarla.
➜ Ver iconos y componentesUso docente y práctico
Cómo trabajar con estos recursos de UI
Esta página está pensada para que puedas abrir un kit en clase, enseñar cómo está construido y, a partir de ahí, pedir a tu grupo que lo modifique, combine o adapte a un proyecto concreto. Cuando pueda, daré también acceso al archivo de Figma para que puedas clonarlo y trabajar directamente sobre el sistema original.
• Para una sesión rápida, abre un estilo (por ejemplo, neobrutalist) y pide al alumnado que reproduzca el mismo layout en otro estilo, usando los componentes de esta página.
• Para trabajos más largos, combina un UI kit por estilo con los recursos de color, botones y tipografía para que creen su propio mini sistema de diseño.
• Y como siempre en KIT UX UI: entra, copia y adapta. Si te sirve para tus clases o proyectos, y puedes mencionarlo, mejor todavía.