Mobile
base< 640px
Header56px · 1 barra
Grilla2 columnas
Nav modeloDrawer lateral
Contenedor100% − 32px
Gutter16px
Media Kit E-commerce · v2.0
Jean CartierE-commerceGuidelines
Arquitectura visual, reglas de conversión y sistema de componentes para la plataforma e-commerce multirubro Jean Cartier. Orientado a revendedores, compra mayorista y experiencia de compra digital premium.
Conversion-firstWCAG 2.1 AAMobile-firstFustat + InterTailwind v4
12
Secciones documentadas
5
Breakpoints Tailwind
3
Capas de header
WCAG AA
Contraste mínimo 4.5:1
Isologo Principal01
Arquitectura de navegación
Barra triple (Top Utility · Brand · Mega-nav) con mega-menú de 4 columnas y drawer móvil.
02
Responsive first
Diseñado desde 320px hasta 1920px con breakpoints sm/md/lg/xl/2xl de Tailwind v4.
03
Conversión transaccional
Verde Esmeralda exclusivo para CTAs. Azul Marino Digital para estructura. Oro JC para premium.
04
Catálogo multirubro
Grilla de 4 columnas desktop · 3 tablet · 2 móvil con fichas de producto 3:4.
01 — Viewports
Breakpoints Tailwind v4
El sistema se adapta a los 5 breakpoints de Tailwind. Cada punto de quiebre define la arquitectura del header, el modelo de navegación, la grilla de productos y el comportamiento de los menús.
320px
Base
640px
sm
768px
md
1024px
lg
1280px
xl
1536px
2xl
Mobile L
sm640px
Header56px
Grilla2 columnas
Nav modeloDrawer + bottom tab
Contenedor100% − 32px
Gutter16px
Tablet
md768px
Header120px · 2 barras
Grilla3 columnas
Nav modeloHíbrido + mega hover
Contenedor100% − 48px
Gutter24px
Desktop
lg1024px
Header152px · 3 barras
Grilla4 columnas
Nav modeloMega-menú full
Contenedor1024px centrado
Gutter48px
Desktop L
xl1280px
Header152px
Grilla4 columnas
Nav modeloMega + sidebar fijo
Contenedor1280px centrado
Gutter48px
Wide
2xl1536px
Header152px
Grilla4 columnas
Nav modeloMega-menú
Contenedor1440px max
Gutter48px
Regla
Mobile-first siempre
Todo estilo se escribe primero sin prefijo (base) y se sobreescribe con sm:, md:, lg:, xl:, 2xl:.
Regla
Contenedor máximo 1440px
max-w-[1440px] mx-auto. A partir de 1440px solo se amplían los márgenes laterales, no el contenido.
Regla
Gutter en múltiplos de 8px
px-4 (16px) mobile · px-6 (24px) tablet · px-8 (32px) desktop · px-12 (48px) desktop XL.
02 — Header
Arquitectura del Header
El header se compone de 3 capas en desktop. Cada capa tiene una función específica: utilidades de cuenta, identidad de marca con búsqueda, y navegación transaccional.
Anatomía · Desktop (≥ lg)
Top Utility Bar32px
Brand Bar72px
Main Nav Bar (Mega-menú)48px
Total desktop header152px
- Información de envíos · Links de cuenta · Badge de beneficios
- Logo · Buscador central (pill rounded-full, borde verde) · Iconos de acción
- Categorías en mayúsculas · Hover abre panel full-width · Active con subrayado
Mockup · Desktop
🚚 Envíos a todo el país · Retiro en 24hClub Jean Cartier — 15% OFF
Mi cuentaMis pedidosBeneficiosAyuda
Buscar productos, líneas o categorías...Buscar
Sucursal
Favoritos
Mi cuenta
3
CarritoMobile (≤ md)
- Barra única · 56px — Hamburger · Logo centrado · Search · Cart
- Search bar · 44px — Debajo de la barra, siempre visible
- Bottom tab · 56px — Inicio · Buscar · Cat. · Carrito · Cuenta
Buscar productos...Buscar
Variante en producción (/shop home)
En la home de tienda vigente, el header usa franja App negra, una sola fila con blur sobre el hero (hamburguesa + wordmark + buscador con lupa + íconos) y sin la tercera barra mega-nav fija. Ver implementación en components/site/shop-nav.tsx.
Top Utility
32px · Gray 900 (#1A1A1A)
Brand Bar
72px · logo + search
Mega-nav
48px · categorías
Search
rounded-full · borde verde
04 — Hero
Hero de Conversión
Bloques hero con jerarquía clara: titular institucional, beneficio comercial y CTA en Verde Esmeralda. Sin uso de negro puro en superficies comerciales.
Colección Primavera
Blancos premium
para tu hogar
Hasta 12 cuotas sin interés en seleccionados. Envío a todo el país.
15% OFF
revendedores
Acceso al portal mayorista con precios diferenciales y stock en tiempo real.
CTA primario
Verde #059669 · texto blanco
CTA secundario
Navy #0F172A · texto blanco
Badge premium
Gold #C9A961 · sin uso en compra
05 — Logos
Logos e Isologos
Logos y Marca
El sistema de identidad de Jean Cartier incluye múltiples versiones del logo para adaptarse a diferentes contextos.
Logos Principales
Logo Principal
Versión principal para fondos claros
Uso prioritario en todas las comunicaciones
Descargar SVGLogo Principal Negative
Versión negativa para fondos oscuros
Cabeceras oscuras, banners y piezas institucionales sobre color sólido
Descargar SVG
Isologos
Versiones que combinan el símbolo con el texto. Ideales para aplicaciones donde se necesita presencia de marca completa.
Isotipos
Solo el símbolo, para aplicaciones donde el espacio es limitado.
Espacio de Protección
El logo debe mantener un espacio mínimo alrededor, equivalente a la altura de la letra "J".
Espacio mínimo = altura "J"
Usos Correctos e Incorrectos
Correcto
Usar sobre fondo blanco o gris claro
Mantener proporciones originales
Incorrecto
No distorsionar las proporciones
No cambiar los colores de la marca
Variables de Color para Logos (E-commerce)
Opciones de aplicación cromática del logotipo sobre la nueva arquitectura digital: Azul estructural y Verde transaccional, manteniendo legibilidad y coherencia de marca.
Base
Base institucional
Aplicaciones editoriales y fondos claros del sistema.
Navegación
Azul Marino Digital
Barra principal, cabeceras de categoría y menús desplegables.
Transaccional
Verde Esmeralda de Conversión
Entradas de flujo de compra y acceso de revendedores.
06 — Colores
Paleta de Colores
Identidad JC + colores de rendimiento e-commerce (navy, verde CTA, rojo error). Reglas WCAG y uso transaccional.
Paleta de Colores
La paleta conserva la identidad Jean Cartier y suma reglas técnicas para conversión digital en e-commerce y portal mayorista.
Colores Principales
Negro
Color institucional exclusivo de marca. En la interfaz web (UI), su uso queda restringido estrictamente a logotipos y elementos de alta jerarquía institucional. Queda prohibido su uso en badges de novedades o promociones para no restar dinamismo comercial.
HEX
#000000
CSS Variable
var(--jc-black)
Blanco
Color base
HEX
#FFFFFF
CSS Variable
var(--jc-white)
Escala de Grises
Actúan como el lienzo neutral de la tienda para preservar la fidelidad visual del catálogo multirubro.
Los tonos Gray 900 y Gray 700 son los dominantes para textos informativos y fichas técnicas, asegurando legibilidad sin competir con las imágenes de productos de sábanas, indumentaria o electrodomésticos. Los tonos Gray 400 y Gray 500 se reservan específicamente para elementos e indicadores de productos fuera de stock.
Gray 900
HEX
#1A1A1A
CSS Variable
var(--jc-gray-900)
Gray 700
HEX
#4A4A4A
CSS Variable
var(--jc-gray-700)
Gray 500
HEX
#7A7A7A
CSS Variable
var(--jc-gray-500)
Gray 300
HEX
#B0B0B0
CSS Variable
var(--jc-gray-300)
Gray 100
HEX
#E5E5E5
CSS Variable
var(--jc-gray-100)
Gray 50
HEX
#F5F5F5
CSS Variable
var(--jc-gray-50)
Colores de Acento
Sello de herencia y distinción. Su uso en la web se aplica en etiquetas de estatus corporativo, badges de lanzamiento (NUEVO) y líneas exclusivas (Premium, Edición Limitada).
Gold
Sello de herencia y distinción. Su uso en la web queda limitado exclusivamente a etiquetas de estatus corporativo, badges de categorías especiales (Premium, Edición Limitada) y elementos iconográficos de respaldo. Queda prohibido su uso en botones principales de compra debido a limitaciones de contraste (normas WCAG).
HEX
#C9A961
CSS Variable
var(--jc-gold)
Gold Light
Sello de herencia y distinción. Su uso en la web queda limitado exclusivamente a etiquetas de estatus corporativo, badges de categorías especiales (Premium, Edición Limitada) y elementos iconográficos de respaldo. Queda prohibido su uso en botones principales de compra debido a limitaciones de contraste (normas WCAG).
HEX
#E8D5A8
CSS Variable
var(--jc-gold-light)
Regla de Conversión Digital (CTA)
Para los botones de compra y flujos transaccionales del e-commerce y portal mayorista, se implementa el Verde Esmeralda de Conversión como estándar transaccional (contraste mínimo 4.5:1) y estados interactivos de alto contraste para asegurar acción inmediata sin diluir la identidad visual.
Nuevos Colores de Rendimiento Web
Paleta funcional para performance digital: mayor claridad estructural y mejora de conversión en flujos transaccionales.
Azul Marino Digital
Se establece como el color estructurador y de confianza para la plataforma e-commerce. Se aplicará en la barra de navegación principal, cabeceras de categorías, menús desplegables y enlaces institucionales.
HEX
#0F172A
CSS Variable
var(--mkec-navy-digital)
Verde Esmeralda de Conversión
Se establece como el color de acción prioritario (CTA) exclusivo para el flujo transaccional activo. Se aplicará únicamente en botones de compra directa (Añadir al carrito, Finalizar pedido) y en los accesos de alta rentabilidad como el Portal de Revendedores.
HEX
#059669
CSS Variable
var(--mkec-conversion-green)
07 — Tipografía
Sistema Tipográfico
Tipografía
Fustat es nuestra familia tipográfica principal. Una fuente geométrica y versátil que equilibra modernidad con elegancia.
Familias Tipográficas
Fustat
Familia Principal
Títulos, encabezados, contenido editorial y elementos de marca principales
INTER
Familia Secundaria
Etiquetas, navegación, UI, textos cortos en mayúsculas con amplio espaciado
Fustat - Características
- • Geométrica y moderna
- • Excelente legibilidad en párrafos
- • Amplio rango de pesos (200-800)
- • Ideal para títulos y cuerpo de texto
Inter - Características
- • Diseñada para interfaces digitales
- • Perfecta para texto pequeño
- • Excelente en mayúsculas espaciadas
- • Ideal para navegación y labels
Escala Tipográfica
Sistema jerárquico de tamaños y pesos para crear composiciones claras.
Jean Cartier
Nombre: Display Large
Tamaño: 48px
Peso: 300
Uso: Títulos principales, héroes
Jean Cartier
Nombre: Display Medium
Tamaño: 36px
Peso: 300
Uso: Títulos de sección
Jean Cartier
Nombre: Heading Large
Tamaño: 28px
Peso: 400
Uso: Subtítulos importantes
Jean Cartier
Nombre: Heading Small
Tamaño: 20px
Peso: 500
Uso: Títulos de componentes
Jean Cartier
Nombre: Body Large
Tamaño: 18px
Peso: 400
Uso: Texto destacado
Jean Cartier
Nombre: Body
Tamaño: 16px
Peso: 400
Uso: Texto principal
Jean Cartier
Nombre: Caption
Tamaño: 14px
Peso: 400
Uso: Textos secundarios
Jean Cartier
Nombre: Label
Tamaño: 14px
Peso: 500
Uso: Etiquetas y botones
Pesos Disponibles
Fustat ofrece 7 pesos diferentes para crear la jerarquía perfecta.
Extra Light
200
Buenos Aires
Decorativo, uso limitado
Light
300
Buenos Aires
Títulos grandes
Regular
400
Buenos Aires
Cuerpo de texto
Medium
500
Buenos Aires
Énfasis sutil
Semi Bold
600
Buenos Aires
Subtítulos importantes
Bold
700
Buenos Aires
Llamadas a la acción
Extra Bold
800
Buenos Aires
Uso excepcional
Caracteres
Mayúsculas
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Minúsculas
abcdefghijklmnopqrstuvwxyz
Números
0123456789
Uso de Inter en Mayúsculas
Inter se utiliza principalmente en mayúsculas con amplio espaciado para etiquetas, navegación y elementos de interfaz.
NUEVA COLECCIÓN
Letter-spacing: 0.2em · Weight: 500
MUJER
HOMBRE
ACCESORIOS
SALE
Navegación principal
NUEVOAGOTADOPREMIUM
Badges y etiquetas
PRIMAVERA VERANO 2026
Colección Cápsula
DISPONIBLE AHORA
Layout editorial - Inter como complemento
Cuándo usar Inter
- • Navegación y menús
- • Etiquetas y badges
- • Botones de interfaz
- • Categorías y tags
- • Texto corto en mayúsculas
Reglas de espaciado
- • Letter-spacing: 0.15em - 0.3em
- • Peso recomendado: 500-600
- • Siempre en mayúsculas
- • Tamaño pequeño (10px-14px)
- • Amplio espacio alrededor
08 — Espaciado
Espaciado y Layout
Sistema de Espaciado
Un sistema de espaciado consistente basado en múltiplos de 8px crea ritmo visual y armonía.
Escala de Espaciado
Token
xs
Valor
4px
Espaciado mínimo, elementos muy cercanos
Token
sm
Valor
8px
Separación entre elementos relacionados
Token
md
Valor
16px
Espaciado estándar (base)
Token
lg
Valor
24px
Separación entre grupos de elementos
Token
xl
Valor
32px
Separación entre secciones pequeñas
Token
2xl
Valor
48px
Separación entre secciones medianas
Token
3xl
Valor
64px
Separación entre secciones grandes
Token
4xl
Valor
96px
Espaciado dramático, héroes
Anchos de Contenedor
Anchos máximos recomendados para diferentes tipos de contenido.
Contenedor Principal
Ancho máximo: 1280px
1280px
Contenido de Texto
Ancho máximo: 672px
672px
09 — Grilla de Productos
Grilla de Productos
Sistema estricto de 4 columnas en desktop (lg), 3 en tablet (md) y 2 en móvil. Fichas 3:4 sin borde; variantes desplegables debajo de la imagen al interactuar con «Añadir».
Nuevo
Sábanas
Sábana Oxford Queen
$ 24.900
Oferta
Acolchados
Acolchado Premium
$ 45.000$ 52.000
Premium
Toallas
Toalla Spa
$ 12.900
Colchones
Colchón Resortes
$ 189.000
Blancos
Funda Almohada
$ 8.500
Nuevo
Hogar
Edredón Twin
$ 38.000
Oferta
Outlet
Set Verano
$ 19.900
Sin stock
Indumentaria
Jean Classic
$ 32.000
Anatomía de la tarjeta
- 1. Badge (imagen)
- 2. Wishlist (imagen)
- 3. Imagen 3:4
- 4. Categoría (caps)
- 5. Nombre producto
- 6. Variantes (debajo)
- 7. Precio + tachado
- 8. CTA
| Propiedad | Valor |
|---|---|
| Imagen | aspect 3/4 · 100% ancho · sin borde |
| Badge | absolute top-3 left-3 |
| Wishlist | top-3 right-3 · bg white shadow-sm |
| Variantes | debajo de imagen, nunca overlay |
| CTA default | outline verde · «Añadir» |
| CTA active | fill verde · «Añadir al carrito» |
| Sin stock | overlay 70% + botón disabled |
| Grid gap | gap-3 móvil · gap-6 desktop |
10 — Componentes
Biblioteca de Componentes
Todos los componentes UI del e-commerce Jean Cartier. Sin border-radius (0px), sin sombras decorativas (solo funcionales), tipografía estricta según sistema.
Botones de acción (CTA)
Botones secundarios
Ghost / texto
Premium ★
Border-radius
0px
Excepción: buscador rounded-full
Sombras
Solo funcionales
Mega-menú shadow-2xl
Transiciones
150ms ease-out
Solo color/opacity
Focus
outline 2px verde
WCAG 2.1 en interactivos
11 — Footer
Arquitectura del Footer
Footer de 5 columnas (lg) sobre fondo Azul Marino Digital. Encabezados en Gold. Links en navy-text. Tres capas: main grid · trust bar · legal bar.
Col 1
Marca + Newsletter
Logo blanco · copy · email + CTA · social
Col 2
Productos
Links de categoría · Fustat 13px
Col 3
La empresa
Historia, premios, licencias, revendedores
Col 4
Atención al cliente
FAQ, club, teléfono, dirección
Desde 1956, textiles premium para el hogar. Legado argentino con presencia en todo el país.
Suscribite a novedades
IG
Productos
La empresa
Atención al cliente
Medios de pago:VISAMCAMEXMPCASH
© 2024 Jean Cartier Herencia SRL. Todos los derechos reservados.
Responsive: 1 columna (base) · 2×2 tablet · grid 2+1+1+1 en desktop (marca ocupa 2/5).