Un sistema para pensar, no un manual para obedecer
Cada decisión visual de Hiroki nace de una idea: que el lujo japonés no necesita gritar. Este design system traduce esa filosofía en componentes que funcionan, escalan y respiran.
Tres pilares, cero ruido
Diseñar para Hiroki no era un problema de estética. Era un problema de intención. La marca vende minipiscinas y saunas de diseño japonés. Productos que pesan, que duran, que ocupan espacio físico en la vida de alguien. El sitio no podía sentirse como un template genérico de wellness. Tenía que transmitir la misma pausa, la misma atención al detalle, la misma calma deliberada que tiene un ofurô de madera Kiri.
Simplicidad
No es minimalismo por moda. Es reducción con propósito. Cada elemento que entra al layout tiene que justificar su existencia. Si no aporta, sale. La regla 60-30-10 no es decorativa: es una jerarquía que guía al ojo sin que el usuario piense en ella.
Atemporalidad
Los productos de Hiroki duran décadas. La interfaz no puede sentirse del 2023 o del 2018. Por eso el sistema evita trends pasajeros. No hay glassmorphism, no hay gradients forzados, no hay sombras dramáticas. Colores sólidos, tipografía clara, espacios generosos. Diseño que envejece bien.
Artesanía
Detrás de cada producto hay un artesano. La interfaz tiene que respetar eso. Los componentes no son bloques anónimos. Tienen bordes cuidadosos, transiciones suaves, microinteracciones que se sienten hechas a mano. Como la madera, el sistema tiene textura.
Menos color, más significado
La paleta de Hiroki es restrictiva por diseño. Cuatro colores, cada uno con un trabajo específico. No hay lugar para improvisar. El negro absorbe, el blanco respira, el oro marca la diferencia. Y los grises conectan todo sin competir.
WCAG AA
Todos los contrastes entre texto y fondo superan el ratio 4.5:1. El oro sobre blanco no pasa? No se usa. Punto.
Foco dorado
El estado focus usa Artisan Gold. No el outline azul del navegador. Visible, hermoso y funcional.
Montserrat habla en cuatro tonos
Elegí Montserrat porque tiene la estructura de una grotesque moderna pero con detalles geométricos que le dan personalidad. Se lee bien en todos los tamaños. No compite con los productos. Y, clave para un ecommerce, no pesa en performance. Una sola familia, infinitas jerarquías.
Hiroki — diseño que respira
Montserrat Light · 300Cada botón tiene un motivo
Los componentes no son piezas sueltas. Son decisiones de diseño encapsuladas. Si no entendés por qué existe un botón, no entendés el sistema. Cada variante responde a una intención del usuario: commit, exploración, navegación auxiliar.
Input de formulario
El movimiento tiene ritmo, no ruido
En muchos sitios, las animaciones son maquillaje. En Hiroki, el movimiento es narrativo. Cada transición guía al usuario, le indica qué pasó, qué va a pasar, o dónde debería prestar atención. Si sacás la animación y la interfaz sigue funcionando perfectamente, la animación era decorativa.
Fade In Up
Entrada suave desde abajo. Uso: elementos de contenido, cards, textos. Simula descubrimiento, como abrir cajones de una vitrina.
Slide In
Entrada desde el lateral. Uso: imágenes, navegación, elementos de descubrimiento. Indica dirección y progreso.
Smooth Scroll
Navegación fluida que respeta el ritmo del usuario. Transforma el scroll en un gesto de descubrimiento, no en una operación mecánica.
Pensar antes de diseñar
Cada decisión en el Hiroki Design System responde a una pregunta: ¿Esto reduce la distancia entre la intención del usuario y la acción que puede tomar, o la aumenta? Si la distancia se reduce, la decisión queda. Si no, se descarta.
El oro como recurso escaso
El Artisan Gold aparece en menos del 5% de la superficie visual. No es un tercer estilo opcional: es una señal de alta conversión. Cuando el usuario ve dorado, sabe que algo es importante sin necesidad de leer.
Principio de escasezUna sola familia tipográfica
Montserrat en pesos 300-700. Sin serif de apoyo, sin combinaciones complejas. La jerarquía se crea con peso y tamaño, no con familias. Eso reduce carga cognitiva y acelera la toma de decisiones del usuario.
Pureza visualInputs sin caja
Los campos de formulario usan borde inferior de 1px, sin caja completa. Eso reduce la carga visual y mantiene la línea del sistema. El focus se señala con Artisan Gold, nunca con el outline azul del navegador.
Claridad funcionalMovimiento mínimo viable
Si quitar la animación no empeora la experiencia, la animación sobra. Las transiciones duran entre 200ms y 400ms. Más lento se siente roto, más rápido se siente agresivo.
Restricción intencionalUn buen diseño no excluye
Hiroki vende productos premium. Eso no significa que el sitio sea solo para gente que ve perfecto, que usa mouse, que navega a 100 Mbps. El sistema cumple criterios WCAG 2.1 AA por decisión, no por obligación.
Contraste como requisito, no opción
Los contrastes entre texto y fondo siempre superan el ratio 4.5:1. El oro sobre blanco no pasa? No se usa. Punto. No hay excepciones, no hay "pero se ve lindo". Si no es legible, no es diseño.
Navegación por teclado invisible
Todos los componentes son navegables por teclado. El estado focus siempre es visible y usa Artisan Gold. El usuario que usa Tab siempre sabe dónde está, y el anillo dorado se siente como una característica de diseño, no como una concesión técnica.
El sistema es solo la mitad
Este design system es la base de un ecommerce completo: catálogo interactivo, panel de administración, cotizaciones, checkout. Si querés ver cómo se aplica en el producto final, el case study tiene todo el recorrido.