Base
Base institucional
Aplicaciones editoriales y fondos claros del sistema.
Media Kit E-commerceConversion-first · WCAG-ready
Media Kit E-commerce
Jean Cartier
E-commerce Guidelines
Arquitectura visual y reglas de conversión para una plataforma multirubro orientada a revendedores y compra mayorista eficiente.
Esta versión prioriza rendimiento comercial, contraste accesible y consistencia UX para navegación, catálogo y checkout móvil en 3 pasos.
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.
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.
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)
Arquitectura del Layout y Espaciado
Sistema de composición para catálogo multirubro con jerarquía limpia, navegación clara y foco transaccional en móvil y escritorio.
Buscador Superior
Buscar productos, líneas o categorías...
Barra centralizada en formato píldora (`rounded-full`) con acción en Verde Esmeralda de Conversión.
Menú y Navegación Lateral
Barra lateral estática con separador vertical sutil para fragmentar navegación y lienzo principal.
Grilla de Productos
Producto A
Producto B
Producto C
Producto D
En desktop: sistema estricto de 4 columnas (`grid-cols-4`) sin contenedores visibles. Separación basada en `gap` y espaciado interno en múltiplos de 8px.
Tarjeta de Producto y Compra Directa
Estado inicial
Edredón Premium
Elegí talle / medida
Con variantes (debajo de la imagen)
Variantes
TwinQueenKing
Edredón Premium
Twin · 160 x 200 cm
La imagen ocupa 100% del ancho con proporción vertical fija y sin bordes perimetrales. Al interactuar con “Añadir”, el bloque de variantes se despliega debajo de la foto (no sobre la imagen), con talles/camas en contenedor blanco accesible.
Estrategia de Reemplazo Cromático (Jean Cartier)
- • Botón “Añadir” y buscador pasan a Verde Esmeralda de Conversión para maximizar CTR.
- • Acentos estructurales e iconografía de navegación se adaptan a Azul Marino Digital.
- • Etiquetas dinámicas: Gold para NUEVO/PREMIUM; grises para datos técnicos y agotado.
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
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
Componentes UI
Componentes orientados a conversión para e-commerce y portal mayorista.
Botones
Botón Principal
CTA principal en Verde Esmeralda de Conversión, exclusivo para acciones transaccionales. Hover con mayor luminosidad para incentivar el clic (CTR) y texto en blanco puro para cumplir contraste de accesibilidad.
Botón Secundario
Botones secundarios y navegación usan Azul Marino Digital o Gray 900 para mantener jerarquía clara frente a los CTA transaccionales.
Campos de Entrada
Badges y Tags
Gold y Gold Light se usan exclusivamente en etiquetas flotantes de producto activo (NUEVO, PREMIUM), garantizando contraste sobre la imagen del producto.
NUEVOPREMIUM
Protocolo para Productos Agotados (Sin Stock)
Sábana 400 Hilos
SIN STOCKTratamiento de tarjeta al 60% de opacidad.
En productos agotados se reemplaza automáticamente el CTA verde por botón secundario outline Gray 400/700. El producto sigue visible y se habilita la reserva para el cliente con captura de datos para retener intención de compra.
Guías de Uso
Principios y mejores prácticas para aplicar la identidad de Jean Cartier de manera consistente en todos los canales y puntos de contacto.
Filosofía de Marca
Elegancia
Sofisticación sin ostentación. Cada elemento debe comunicar refinamiento natural.
Minimalismo
Menos es más. Privilegiar el espacio, la simplicidad y la claridad visual.
Atemporalidad
Diseño que trasciende tendencias. Clásico y moderno a la vez.
Hacer y No Hacer
Recomendaciones / Permitido
Mantener espacios en blanco generosos
Usar imágenes de alta calidad y bien editadas
Privilegiar la tipografía sobre los gráficos
Mantener jerarquías visuales claras
Usar el negro absoluto solo en logotipos y hitos institucionales
Aplicar los logos con espacio de protección adecuado
Mantener consistencia en todos los puntos de contacto
Usar el dorado con moderación y propósito
Utilizar el Azul Marino Digital para jerarquizar la navegación principal y separar visualmente los diferentes rubros de la tienda de manera limpia.
Implementar el sistema de opacidad reducida y badges en gris (Gray 500) para identificar de forma limpia y automatizada los productos fuera de stock.
Reemplazar el botón de compra por Reserva para cliente en productos agotados, manteniendo el producto visible y la captura de datos para sostener la demanda del interior del país.
Aplicar el Verde Esmeralda únicamente en elementos que impliquen una transacción o una acción directa hacia el checkout.
Mantener los fondos de los listados de productos en blanco puro o Gray 50 para preservar la fidelidad del color de los artículos.
Priorizar la escala de grises oscuros (Gray 900/700) sobre el negro absoluto para la legibilidad de descripciones largas de producto.
Garantizar que todos los elementos interactivos cumplan con el ratio de contraste WCAG para facilitar la compra ágil al revendedor del interior del país.
Evitar / Prohibido
Saturar con demasiados elementos visuales
Usar imágenes de baja calidad o pixeladas
Mezclar múltiples estilos tipográficos
Crear composiciones desordenadas
Abusar de colores brillantes o saturados
Distorsionar o modificar los logos
Cambiar arbitrariamente los colores de marca
Usar el dorado como color principal
Usar el color dorado en textos de tamaño inferior a 18px o en botones principales de compra.
Saturar la interfaz de catálogo con fondos oscuros que compitan con la visualización real de los productos multirubro.
Usar el color Oro o Negro absoluto en los botones de Comprar o Registrarse como Revendedor.
Usar colores oscuros (Negro absoluto o Gray 900) en el badge de NUEVO, ya que reduce el impacto promocional del artículo.
Ocultar o eliminar páginas de productos agotados; se debe mantener la URL activa para preservar el posicionamiento SEO, aplicando el protocolo visual de falta de stock.
Mostrar el botón Verde de conversión activo en ítems que no tengan disponibilidad inmediata para despacho.
Aplicar texto dorado sobre fondos claros en tamaños menores a 18px.
Mezclar el uso del Verde de Conversión con banners puramente decorativos.
Aplicaciones de Marca
La identidad de Jean Cartier debe aplicarse consistentemente en todos los canales.
Digital
- •E-commerce y sitio web
- •Portal mayorista
- •Redes sociales (Instagram, Facebook)
- •Email marketing
- •Publicidad digital
Impreso
- •Catálogos de productos
- •Lookbooks de temporada
- •Tarjetas de presentación
- •Packaging premium
- •Material POS
Espacios Físicos
- •Señalización interior
- •Vitrinas y displays
- •Etiquetas de precio
- •Bolsas y packaging
- •Uniformes del personal
Mejores Prácticas Digitales
Diseño Responsivo y UX
Optimización de Catálogo y Logística: La interfaz debe gestionar de manera inteligente la disponibilidad del stock multirubro. La visualización clara de productos agotados y la opción de reserva de stock para cliente en dispositivos móviles son obligatorias para que la red de revendedores pueda planificar sus pedidos y compras mayoristas sin generar fricción en el soporte técnico.
Microinteracciones
Usar transiciones suaves y animaciones sutiles. Los efectos deben ser elegantes, no distractivos. Duración recomendada: 200-300ms.
Rendimiento
E-commerce y Portal Mayorista: La arquitectura de información debe soportar la carga masiva de productos disímiles (desde blancos hasta electrodomésticos) mediante un diseño limpio, menús colapsables eficientes y procesos de checkout simplificados en un máximo de 3 pasos, optimizados específicamente para dispositivos móviles.