INO
Una vitrina de museo en silencio: cada pieza flota en un espacio blanco, como un solo objeto tras un cristal, enmarcado por una tipografía casi negra, apenas audible.
INO funciona como una galería de joyería casi monocromática: un lienzo blanco nítido, una tinta cálida, casi negra, y una ausencia casi total de color. El sistema visual trata cada anillo como una pieza de museo: fotografías de productos con un enfoque clínico que flotan en un amplio espacio negativo, con una jerarquía construida a través de la posición, el espaciado entre letras y el volumen de blanco, en lugar de la escala o el color de la fuente. La navegación se ubica en la parte inferior de la página y consta de cuatro puntos con etiquetas (llenas o vacías), una inversión deliberada de la tradicional barra superior del comercio electrónico. El propio logotipo es un conjunto de contornos de anillos concéntricos que imitan la forma del producto y funcionan como una escultura tipográfica en lugar de un logotipo.
Un lienzo de ancho completo sin límite máximo de ancho de contenido. La pantalla principal ocupa todo el ancho de la página, con fotografías y gráficos divididos equitativamente (50/50). Las cuadrículas de productos se muestran como filas de tres columnas con un amplio margen horizontal desde el borde de la ventana gráfica. La navegación inferior está centrada y anclada al pie de página, en lugar de fijada. Los saltos de sección utilizan fotografías editoriales a pantalla completa o espacio en blanco puro; nunca una barra de color, una línea divisoria o un degradado. El ritmo vertical es libre: 80/1/1 entre las secciones principales, lo que permite que la página respire en lugar de estar saturada de contenido. No hay barra lateral, ni megamenú, ni barra de encabezado superior; el logotipo "INO" se encuentra únicamente en la esquina superior izquierda de la pantalla principal.
Coexisten dos modos de visualización de imágenes distintos: fotografía clínica de producto sobre un fondo plano, gris claro y uniforme (cada anillo se fotografía centrado, sin manos, accesorios estilizados ni sombras superficiales; el objeto es el protagonista) e imágenes editoriales narrativas (un anillo en una caja forrada de césped, una mano sosteniendo una cadena), presentadas como fragmentos editoriales desaturados a pantalla completa. Las imágenes de producto sirven como fichas de producto; las imágenes editoriales transmiten la esencia de la marca. Ambas son monocromáticas o casi monocromáticas; el césped en la imagen principal es el único toque de verde, e incluso este se atenúa a un tono boscoso. No se utilizan iconos en la interfaz; un símbolo de anillos concéntricos reemplaza toda la iconografía.
Paleta
Neutral
- Obsidian Ink
#212123— Estados de formulario neutros, texto de iconos y retroalimentación de interfaz de usuario discreta donde las combinaciones de colores deben permanecer imperceptibles. - Bone
#ffffff— Páginas de lienzo, superficies de cartón, texto invertido sobre fondo oscuro. La superficie dominante; casi todo el sitio web se encuentra aquí. - Carbon
#000000— Relleno de iconos, contornos gráficos decorativos y relleno del estado activo para el indicador del punto de navegación. Se utiliza con moderación para lograr el máximo contraste tonal con el color "hueso". - Ash
#999999— Bordes de contraste medio, contornos de control y divisores estructurales. - Pebble
#a6a6a7— Texto de apoyo discreto, separadores finos para el texto principal y metadatos secundarios. Se utiliza el gris funcional más claro para las etiquetas de precio y el texto que las acompaña, que debe pasar desapercibido.
Tipografía
de 11 a 18 píxeles · 4 pasos
- Sequel100Wide — reemplazo: Jost (400 · esquemas 400 · La única tipografía corporativa utilizada exclusivamente en el grosor 400 en todos los contextos: navegación, texto principal, encabezados, títulos, precios y leyendas. El símbolo geométrico de amplio espaciado entre letras refleja la estética corporativa. La ausencia de una versión en negrita es intencional: la jerarquía se logra mediante el uso de mayúsculas, el espaciado entre letras y la posición, en lugar de mediante la variación del grosor de la fuente.
- Arial — reemplazo: system-ui · esquemas 400 · Un mecanismo de reserva a nivel de sistema para mostrar botones en contextos heredados. No forma parte de la imagen de marca; solo aparece si Sequel100Wide no se carga correctamente.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 23px |
| Radio del botón | 50px |
| Radio de la tarjeta | 8px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 80-120px |
La IA construirá tu sitio web al estilo de INO y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Airbnb — Una tranquila pared blanca de la galería con un único marcapáginas de color rojo coral.
- Peak Design — Pared de la galería, parcialmente iluminada
- 099 SUPPLY — Una pared de galería llena de objetos en blanco y negro.
- Apple (España) — Vitrina blanca para galería
- Apple (España) — Una ventana de galería en la niebla matutina
- Custo — Una galería color gris plomo con una tipografía monolítica. Una sala de exposiciones en tonos gris verdosos apagados, donde un único objeto oscuro y una tipografía de 57 píxeles hablan por sí solos.
- Silencio — Una habitación blanca con objetos suspendidos en el aire. Una exposición de arte hecha de papel cálido, donde cada elemento ocupa su lugar sobre un fondo de volumen negativo, y el silencio es una decisión de diseño intencionada.
- Oakâme — Un taller provenzal bañado por el sol, tallado en piedra cálida.
- Nike — Una galería monocromática de logros deportivos: paredes blancas, el producto como obra de arte, el cromo disuelto en el fondo.
- Sociotype — Un ejemplar típico de museo sobre papel blanco.
- Arc — Galería industrial blanca sobre agua a medianoche
- Rivian — Un monolito eléctrico sobre la pared de hormigón de la galería. Rivian presenta cada vehículo como una escultura sobre un vasto espacio blanco, con una tipografía tan grande que se convierte en un elemento arquitectónico, y un único amarillo cálido que rompe la atmósfera monocromática, como la luz del sol sobre una superficie mate.