Un espacio de trabajo tangible
Veetcuna reúne trabajo comercial, financiero y operativo en un mismo lugar. Buscamos que ese espacio tenga una identidad reconocible y una jerarquía tranquila: cada superficie agrupa, cada control comunica su función y cada acento tiene un propósito.
La materialidad suave aporta una sensación de cuidado y continuidad. Un botón parece accionable; un campo parece recibir información; una tarjeta parece contener un conjunto relacionado. La legibilidad y la facilidad de uso guían cada decisión.
Neoesqueuomorfismo
En este sistema usamos neoesqueuomorfismo para describir una interpretación contenida de las cualidades de objetos físicos: volumen, relieve, tactilidad y luz. El neumorfismo de las referencias inspira especialmente las superficies que parecen emerger del fondo o hundirse en él.
La sensación de profundidad nace de luces suaves, sombras cercanas, bordes discretos y geometrías redondeadas. En Veetcuna se expresa mediante superficies raised, inset y floating, controles compactos y acciones en forma de píldora. Reutilizamos las primitivas que ya resuelven esos estados.
Principios
- Un material continuo: fondos y contenedores comparten una familia cromática; el cambio de superficie organiza la información.
- Profundidad con función:
raisedagrupa contenido;insetaloja controles;floatingestablece una capa superpuesta. La sombra acompaña esa función. - Acentos contenidos: el celeste de la acción principal y los colores semánticos destacan decisiones o estados concretos.
- Claro y oscuro con la misma lógica: adaptamos superficies, luz, bordes y contraste sin cambiar la identidad ni la función de los controles.
- Una interfaz para trabajar: mantenemos texto legible, foco visible, estados explícitos y una densidad apropiada para formularios y tablas.
Inspiración
Relieve suave y un acento protagonista
El fondo y los controles comparten tonos azulados. Las luces y sombras separan los volúmenes, mientras el violeta concentra la atención en la reproducción.
Un acento principal orienta la atención; texto, foco y estados conservan su contraste sobre el fondo.
Ampliar imagen
Controles integrados en la superficie
La esfera sobresale y los interruptores se alojan en pequeñas cavidades. El relieve distingue piezas dentro de una misma superficie.
Los campos inset siguen esta relación. Las etiquetas y el estado seleccionado completan la señal de profundidad.
Ampliar imagen
La misma materialidad en oscuro
Los volúmenes se construyen con bordes y variaciones próximas de grafito. El naranja permite localizar la acción y la pista activas.
Al cambiar de tema, ajustamos los tokens y el contraste de cada superficie y conservamos el celeste de la acción principal.
Ampliar imagen
Profundidad que organiza información
Tarjeta, balance, gráfico y controles forman niveles de lectura. Los acentos de color están concentrados en algunos segmentos y acciones.
La profundidad agrupa datos relacionados. En gráficos, debe permitir comparar valores con precisión.
Ampliar imagen
Tres formas de expresar materialidad
El vidrio deja ver el fondo; el neumorfismo construye volumen con relieve; el vidrio líquido añade reflejos y refracción.
Veetcuna utiliza el relieve suave como base y reserva las transparencias para cabeceras y paneles superpuestos.
Ampliar imagen
Evolución de los estilos visuales
De la imitación de objetos físicos a la interpretación de luz y volumen: el esqueuomorfismo reproduce texturas, brillos y bordes; el neumorfismo simplifica esa materialidad en relieves suaves que emergen de una misma superficie.
El glassmorphism introduce capas translúcidas; Frosted UI enfatiza el vidrio esmerilado y el desenfoque; Liquid Glass explora refracción, reflejos y formas fluidas. Son lenguajes que pueden convivir y combinarse.
Ampliar imagen
Superficies suaves y capas translúcidas
La composición combina una superficie amplia, transparencias, bordes luminosos y objetos de aspecto pulido. La tipografía organiza el espacio central.
La amplitud funciona en presentaciones y portadas. En pantallas operativas, ajustamos el espacio a la cantidad de información y las acciones disponibles.
Ampliar imagenTransparencias
La transparencia permite mantener contexto en cabeceras y paneles superpuestos. En tablas y formularios, conserva suficiente opacidad y contraste para leer el contenido.
Aplicación
La función se reconoce también sin la sombra. Etiquetas, iconos, bordes y estados explican la interacción. Verifica el foco con teclado y evita que una acción deshabilitada se confunda con una activa.
La suavidad no borra el contenido. Conserva contraste suficiente en textos y controles sobre cada superficie.
La profundidad mantiene una jerarquía. Evita elevar todos los elementos con la misma intensidad. En móvil, el espacio y las acciones alcanzables tienen prioridad frente a una composición decorativa.
La implementación permanece compartida. Usa superficies, acciones, modales y los tokens. No copies sombras ni colores desde las imágenes a cada pantalla.