PORTFOLIO · SISTEMA VIVO / 01
Una base.
Todas las experiencias.
Color, tipografía y componentes que mantienen unido el portfolio. Prueba los controles: estos ejemplos responden a tus interacciones.
01 / Fundamentos
Paleta adaptable
background
foreground
secondary
border
Light: #EEF1F4 / #263238 / #546E7A / #CFD8DC
Dark: #151C22 / #E4EDF1 / #A5BAC5 / #34434E
Acento de énfasis
accent-emphasis · #335341
Verde para destacar cifras, logros y palabras clave sobre superficies claras. Se conserva en las tarjetas claras de About en ambos temas. Para interacciones sobre fondos oscuros, accent-interactive usa #9FC4AD; en claro reutiliza #335341.
Tipografía & contraste
Host Grotesk para lectura y controles. Párrafos: 400 en light, 300 en dark. Títulos: 700. Labels: 500.
Retícula: 1 px light / 0.5 px dark. Envolventes: 1 px; iconos: 1.5 px.
02 / Categorías que permanecen
Todas las áreas activas al inicio; al menos un área seleccionada. Relleno = seleccionado. Outline = deseleccionado. Cualquier coincidencia muestra el proyecto completo; los filtros nunca cambian sus categorías.
AREAS 4
Identidad y experiencia
Un producto conectado
Sistema visual
Host Grotesk Medium 10 / 500 · MAYÚSCULAS · padding 2 px vertical × 8 px horizontal · borde 1 px · radio 99 px · negro de chips #212121.
03 / Selección, hover y glass
Áreas de diseño
Componente real. Abre el menú, selecciona y prueba el teclado. Separación: 8 px; blur: 4 px; hover: 7%; selección: 13%.
Ambient light
400 base / 500 seleccionado. El check conserva su espacio. Hover más transparente que selección.
Campos del editor: labels visibles, ayuda secundaria y foco accesible. El placeholder desaparece al escribir y no forma parte del contenido.
04 / Movimiento con intención
Typewriting y caret extendido. Home conserva el morph al navegar. Entrada Work: 160 ms; transición de tema: 700 ms. Las preferencias de movimiento reducido desactivan animaciones.
Morph & zoom
Base 0%, rango −100% a 100%. Scroll en desktop; pellizco en celular; arrastra sobre el morph para girarlo en ambas direcciones; desliza fuera del morph para desplazar la página. Bordes difuminados y reset de orientación/zoom.
Una estructura compartida
Home, Work y artículos comparten menú, tema y retícula. Mobile apila el hero y la información. La barra de scroll reserva espacio para evitar saltos.
05 / Contenido que puede crecer
Portadas horizontales · hover
1600 × 900 px recomendado. Proporción constante y ancho fluido. Hover solo con puntero: portada activa +5%; las demás ceden ancho y se desplazan según su posición, manteniendo los extremos de la fila. Transición de 550 ms sin rebote. Títulos en hover y foco: accent-interactive, basado en el acento #335341 en light y su variante clara #9FC4AD en dark. Los chips siempre quedan debajo del título. Work se ordena por año, del más reciente al más antiguo. Galería: 3, 2 o 1 columnas según el dispositivo; 56 px hasta el footer.
Plantilla editorial flexible
Encabezado, empresa, sector, año, áreas, rol, responsabilidades y contexto. Los datos de contexto son opcionales. Después: títulos, párrafos, frases destacadas, enlaces, imágenes, GIF, video y contenedores de una a tres columnas, en cualquier orden. Cada columna admite varios elementos en lista o filas, proporciones desiguales y cards con color, radio, padding y sombra configurables. Las columnas se apilan en móvil.
Placeholders 16:9 (1600×900 px); imágenes reales conservan su proporción original. Padding editorial: 32 px desktop / 24 px móvil. Volver arriba aparece al dejar atrás el contexto y respeta movimiento reducido.
Ver proyecto Conekta ↗06 / Estudio editorial
Bibliotecas de Proyectos y Categorías, con navegación lateral compacta y nombres al pasar el cursor o enfocar. La edición se abre al elegir una card.
Proyectos 6
Estados y conteos
Archivado usa contorno y fondo transparente. Conteos rectangulares con radio de 4 px. Cards separadas por 12 px; títulos con altura natural. Nombre del proyecto y acciones sobre las tabs, con 24 px de separación y fondo blanco continuo.
Controles segmentados
Una sola selección por grupo. Fondo compartido, selección clara y foco visible.
Acciones secundarias
Archivar: azul #1D286C sobre #EEF0FC. Eliminar secundario: #9B343D sobre #FFF1F0, borde #B95B63. Ambas acciones requieren confirmación en el editor. Eliminar proyecto conserva su variante sólida.
Galerías y ventanas
Fun admite Masonry, Grid y Rows. Orden manual mediante asa de arrastre o flechas accesibles; vista previa inmediata y publicación explícita. Tarjetas en lectura hasta pulsar Editar.
Agregar archivos abre una ventana de una columna: título, zona de arrastre, formatos, selección y estado. Cierre con icono de 20 × 20 px sin envolvente. Confirmaciones con fondo opaco y blur; Escape cierra.
Edición de contenido
Formato aplicado a la selección: tamaño, peso, subrayado y color. Deshacer y rehacer por teclado. Responsabilidades con Enter. Cards tipo banner con icono de ancho natural y separación configurable.
Celebración experimental
Aplauso Lottie amarillo, confetti variable, aceleración con clics y pistas progresivas. Nueve clics rápidos activan el easter egg. El sonido solo responde a clics. Movimiento reducido conserva una experiencia accesible.