Las reglas con las que se construye cada plantilla de la tienda: portada, categoría, ficha de producto, carrito y páginas de servicio. Todo lo que aparece aquí vive en css/sistema.css y la portada lo usa tal cual.
Principios
Cada sección declara su fondo y nunca se repite el de la anterior. La página se lee por bloques, como los pisos de un edificio.
Sin fondo, sobre una escena de material (laca, agua, pizarra) que toma el color de su esfera, y fundido hacia la sombra arriba y abajo.
Doce columnas en escritorio y cuatro en móvil. Títulos, textos y fotografías empiezan y terminan en una columna.
Retícula
Ancho máximo
1440 px
Margen
20–64 px
Canal
24 · 16 px
Columnas
12 · 4
En la portada, la tecla G superpone la retícula sobre la página.
Color
Fondos de sección
#F3EEE6Fondo principal. Listas, servicios, visita.
#E7DED0Secciones de apoyo y pozo de producto.
#16120ETexto, aviso superior y pie.
#1B1E21Portada y El Círculo.
#4D1418Editorial Presage. Urushi japonés.
#0A2730Editorial de buceo, Prospex.
Tonos de escena (salen de la esfera) y acento
#3D2A1FVestir.
#4C5536Campo.
#26272AResistentes.
#D9E2E7Esferas blancas.
#A47C48Único acento: índices, hilos, estados.
#D4B27FEl acento sobre fondos oscuros.
Ritmo de la portada
Los fondos alternan para que cada sección se distinga sin necesidad de bordes. Las oscuras se reservan para las historias; las claras, para comprar.
Tipografía
A · Mecánico: Anybody, ancho y peso variables que se animan con el cursor, con Geologica. B · Esfera: Syncopate, versales anchas como la impresión de una esfera, con Familjen Grotesk. C · Grabado: Castoro Titling, versales de grabado, con Castoro cursiva. Se eligen en el selector de la portada.
Portada
Display · 50–100 px · 0.98
Doscientos metros de calma.
Título 1
Display · 38–66 px · 1.03
El oficio japonés, en cada esfera.
Título 2
Display · 28–40 px · 1.1
Cocktail Time «Clover Club»
Título 3
Display · 22 px
Sharp Edged GMT
Antetítulo
Texto 500 · 11 px · +0.28 em · mayúsculas
Seiko Presage · Edición limitada
Cuerpo
Texto 300 · 17 px · 1.75 · 46 caracteres
Presage lleva la artesanía japonesa a la esfera, con texturas que cambian con la luz.
Cifras
Texto con cifras tabulares
$2,000 · 42 mm · 200 m
Espacio
Entre secciones: 80–144 px según el ancho de pantalla.
Componentes
Ficha técnica
Cabecera de sección: índice, antetítulo, título en columnas 4–9 y acción
Selección de la casa
Ficha de pieza (pase el cursor)
Escena: material + tono de esfera + fundido
Presage
Buceo
Vestir