Envío gratis en compras > S/ 100 30 días para cambios Compra 100% segura
0
Documentación

Guía de componentes

Colores

Paleta neutral tipo Athens. Los acentos se usan con moderación.

Palette 01 · Base
White--c-white
Cream--c-cream
Sand--c-sand
Ink--c-ink
Gray 700--c-gray-700
Gray 500--c-gray-500
Line--c-line
Accent--c-accent
Palette 02 · Estado
Success--c-success
Danger--c-danger
Sale--c-sale
Warning(alert)
Palette 03 · Azul de marca (CTA · logo · links)

#0c82f0 se usa como firma de marca (5-10% de la UI) — botones principales, precio, nombre de marca en logo, links activos. No domina el layout.

Blue 50#eaf3fe (bg tag)
Blue 200#b8d8fc
Brand 500 ★#0c82f0
Brand 600 (hover)#0a6dce
Brand 700 (pressed)#0859a7
Brand 900 (titulares)#053260
Palette 04 · Neutros cálidos editoriales (BASE · 70-80% de la UI)

Neutros cálidos (off-white, stone, greige) — los que ya usa Athens. Mantienen el look fashion y dejan que la ropa sea la protagonista. Conservamos cream y sand del tema actual, ligeramente ajustados.

White#ffffff (bg)
Off-white#fbfaf7
Cream#f5f3ee (bg alt)
Stone#ebe7de
Greige#d9d4c6
Line#e5e2da (bordes)
Gray mid#8a8680
Ink soft#4a4743 (cuerpo)
Ink#1a1a1a (títulos)
Ink deep#0f0f10 (bg dark)
Palette 05 · Acentos por colección (Mujer · Hombre · Niños)

Para pintar sutilmente cada colección sin romper la base neutra. Se usan en banners, pills de categoría, etiquetas.

Rose nude#c9a697 (mujer)
Blush#e8b8a8 (mujer soft)
Navy#2a3f5f (hombre)
Stone gray#8a8680 (hombre alt)
Coral#f4a4a4 (niñas)
Sky#8cc0e8 (niños)
Mustard#d4a841 (ratings)
Palette 06 · Estados (editorial, no chillones)
Success#3d8f4a
Danger#b84141
Sale#c83d3d (tipo Zara)
Warning#d4a841
Info#0c82f0 (= brand)
Palette 07 · Combos aprobados (preview en vivo)
Nueva temporada
Hero editorial claro

Fondo off-white, tipografía grande, CTA azul marca.

Colección premium
Hero oscuro editorial

Fondo casi negro, eyebrow azul marca, CTA blanco.

Mujer
Bg cream cálido

Secciones intermedias con warmth — newsletter, features, banners de colección.

-30% NUEVO
★★★★★ (24)

Blusa cuello halter

S/ 120S/ 89
Pills por colección
Mujer Hombre Niñas Niños Sale
Ink · titular serif
Ink soft · párrafo cuerpo
Gray · metadata / fecha
Link azul de marca

Link editorial (ink)
¿Aplicar?

Resumen de la filosofía: la ropa manda. Neutros cálidos tipo Athens/Zara ocupan 80% de la UI; el azul #0c82f0 aparece sólo en CTAs, precios y links — como "firma de marca" que guía el click. Cada colección (mujer · hombre · niñas · niños) tiene su propio tinte suave en pills y banners.

¿Aprobamos estas 5 paletas como tokens globales? Al aceptar, actualizo public/f/css/theme/base/_variables.css (ajuste leve de neutros cálidos + nuevos tokens --c-brand-* para el azul + --c-coll-mujer/hombre/ninas/ninos) y toda la tienda hereda el nuevo look sin tocar cada vista.

Tipografía

Playfair Display (serif) para títulos, Inter (sans) para cuerpo.

Type 01 · Escala completa
hero / h1

Título hero 60-80px

section-title / h2

Section title 46px

h3

Encabezado h3

eyebrowEyebrow — etiqueta
body

Párrafo cuerpo 15px. Usado para descripciones y contenido general.

small

Texto pequeño, metadata, ayudas.

link-underlineLink con subrayado
link-arrowLink con flecha

Topbars (anuncios)

Barras superiores con mensajes, contacto o idioma. Van arriba del header.

Topbar 01 · Anuncio centrado (scroll)
Envío gratis desde S/ 150 Devoluciones fáciles en 15 días Hasta 50% OFF · colección SS26
Topbar 02 · Tres zonas (tel · promo · social)
+51 999 999 999 ventas@vpm.pe
Envío gratis a Lima · Compras desde S/ 150
Topbar 03 · Claro (cream)
PEN S/ · ES
SS26 · Hasta 50% OFF · hoy termina
Seguir pedido · Ayuda

Headers

Previews estáticos para elegir qué versión aplicar en cada plantilla. El header en vivo está en layout/header.php.

Header 01 · Search centrado + trending tags (Athens)
Buscar productos, categorías…
Trending: VestidosBlusasJeansAccesorios
Header 02 · Con quick-nav (links secundarios)
Nuevo Vestidos Blusas Jeans Zapatos Outlet
Header 03 · Transparente sobre hero

Mega Menu

Vista estática del desplegable con 3 columnas + banner promocional. En vivo se despliega al hover desde el nav.

Mega 01 · 3 columnas + promo banner

Ropa

Accesorios

Zapatos

SS26 Collection
Hasta 50% OFF
Descubrir →
Mega 02 · Sólo listado (2 columnas)

Categorías

Ayuda

Quick nav

Fila secundaria con accesos rápidos (debajo del menú principal o arriba del footer).

QuickNav 01 · Categorías rápidas (cream)
Novedades Accesorios Vestidos Zapatos Abrigos Jeans Outlet

Botones

Variantes de llamada a la acción. Usa primary para la acción principal y outline / ghost para secundarias.

Buttons 01 · Variantes
Buttons 02 · Sobre fondo oscuro

Badges & Chips

Etiquetas para destacar estado, ofertas, filtros activos.

Badges 01 · Estado producto
Default Oferta Nuevo Últimas 3 Agotado Seleccionado Border Pill
Chips 01 · Filtros
Todos Mujer Hombre Accesorios Oferta ×

Formularios

Inputs, selects, textarea, checkbox, radio, inline.

Forms 01 · Campos base
Forms 02 · Inline (rastrear pedido)

Alertas

Mensajes contextuales.

Alerts 01 · 4 niveles
Éxito. Tu pedido fue registrado correctamente.
Atención. Stock limitado — solo quedan 3 unidades.
Error. No pudimos procesar el pago.
Información. Envío gratis en compras mayores a S/ 200.

Paginación

Pagination 01

Tabs

Tabs 01 · Horizontales (product detail)

Descripción del producto. Materiales, dimensiones, características destacadas.

Material: algodón. Tamaños disponibles: S, M, L, XL.

Envío en 24-48h a Lima, 3-5 días al resto del Perú.

★★★★★ 4.8 / 5 — 24 reseñas verificadas.

Heros

Cabeceras grandes de bienvenida. El hero full-bleed ya está en home.

Hero 01 · Full-bleed (home)
Nueva colección

Moda que define tu estilo

Piezas atemporales cuidadosamente seleccionadas.

Comprar Catálogo
Hero 02 · Minimal centered (landing page)
Landing

Historia, calidad, estilo.

Creamos piezas que duran generaciones. Conoce nuestra filosofía.

Ver colección Conocer más

Section heads

Encabezados para las secciones del home y listados.

Head 01 · Centrado (home)
Explora por categoría

Colecciones destacadas

Piezas cuidadosamente curadas para cada ocasión.

Head 02 · Alineado a la izquierda
Lo más nuevo

Productos destacados

Ver todos

Features / USP strip

Features 01 · 4 USPs en fila
Envío rápido

A todo el Perú

Cambios gratis

30 días

Pago seguro

100% protegido

Soporte 24/7

WhatsApp

Stats / números

Stats 01 · 4 números
12K+
Clientes felices
1,500
Productos
98%
Entregas a tiempo
4.9
Rating promedio

CTA banners

CTA 01 · Oscuro centrado
Newsletter

Únete a VPM

Recibe ofertas exclusivas y adelanto de nuevas colecciones.

Registrarme
CTA 02 · Imagen con overlay
Edición limitada

La colección invierno

Ver ahora
CTA 03 · Split (texto + imagen)
Sobre nosotros

Moda con esencia, hecha para ti

Somos una marca peruana dedicada a ofrecerte lo mejor en moda. Cada pieza es seleccionada con cuidado.

CTA 04 · Split reverse
Rastrea tu pedido

Sigue tu compra en tiempo real

Ingresa tu código y conoce el estado exacto.

Showcase / Banner split

Showcase 01 · Con scroll indicator
Sobre nosotros

Moda con esencia

Descripción media para la marca, filosofía o proceso.

Leer más

Product cards

Carta estándar con hover-swap de imágenes.

Product card 01 · Grid 4 columnas
OfertaAgotado
Sudadera
Hombre

Sudadera

S/ 80.00 S/ 70.00
Product card 02 · Hover swap (segunda imagen)

Blusa cuello halter

S/ 120S/ 89

Pantalón wide leg

S/ 129

Vestido midi floral

S/ 199S/ 159

Abrigo oversized

S/ 249
Product card 03 · Con badges (sale % · nuevo · sold)
-26%

Blusa cuello halter

S/ 120S/ 89
Nuevo

Pantalón wide leg

S/ 129
Hot

Vestido midi floral

S/ 199S/ 159
Agotado

Abrigo oversized

S/ 249
Product card 04 · Con color swatches

Blusa cuello halter

S/ 120S/ 89

Pantalón wide leg

S/ 129

Vestido midi floral

S/ 199S/ 159

Abrigo oversized

S/ 249
Product card 05 · Quick-actions + add-to-cart slide-up
Agregar al carrito

Blusa cuello halter

S/ 89
Agregar al carrito

Pantalón wide leg

S/ 129
Agregar al carrito

Vestido midi floral

S/ 159
Agregar al carrito

Abrigo oversized

S/ 249
Product card 06 · Con rating + countdown
-30%
★★★★★ (24)

Blusa cuello halter

S/ 159S/ 89
02d 14h 37m 09s
-30%
★★★★★ (24)

Pantalón wide leg

S/ 159S/ 129
02d 14h 37m 09s
-30%
★★★★★ (24)

Vestido midi floral

S/ 159S/ 159
02d 14h 37m 09s
-30%
★★★★★ (24)

Abrigo oversized

S/ 159S/ 249
02d 14h 37m 09s
Product card 07 · List view (horizontal)
★★★★☆ (12)

Blusa cuello halter

Descripción corta del producto. Detalle resumido visible desde el listado en vista lista.

S/ 120S/ 89
★★★★☆ (12)

Pantalón wide leg

Descripción corta del producto. Detalle resumido visible desde el listado en vista lista.

S/ 129
★★★★☆ (12)

Vestido midi floral

Descripción corta del producto. Detalle resumido visible desde el listado en vista lista.

S/ 199S/ 159
Rating 01 · Variantes de estrellas
★★★★★ (124 reseñas) ★★★★☆ (4.2 · 87) ★★★☆☆ (3.0) ★★★★★

Shop UI / Filtros

Elementos de la página de catálogo y ficha de producto.

Toolbar 01 · Contador + sort + vista (grid/lista)
Mostrando 1-24 de 148 resultados
Filters 01 · Sidebar (precio · color · talla · categoría)
[ contenido del grid de productos aquí ]
Filters 02 · Chips de filtros activos
Vestidos Color: Negro Talla: S S/ 50 - S/ 200 Limpiar todo
Swatches inline · Color + talla + cantidad (ficha producto)
Color: Negro
Talla: M
Guía de tallas
XS S M L XL
Cantidad

Category cards

Category 01 · Grid 3 con overlay

Abrigos (Hombre)

Ver colección Explorar

Abrigos (Mujeres)

Ver colección Explorar

Accesorios

Ver colección Explorar

Blog cards

Blog 01 · Grid 3 columnas

Team cards

Team 01 · 4 miembros con social hover

Persona 1

Fundadora

Persona 2

Directora creativa

Persona 3

Jefe de producto

Persona 4

Customer success

Testimonials

Testimonial 01 · Grid 3
★★★★★

Excelente calidad y envío muy rápido. Definitivamente volveré a comprar.

Cliente 1
Lima, Perú
★★★★★

Excelente calidad y envío muy rápido. Definitivamente volveré a comprar.

Cliente 2
Lima, Perú
★★★★★

Excelente calidad y envío muy rápido. Definitivamente volveré a comprar.

Cliente 3
Lima, Perú

Sliders

Slider 01 · Productos (4 por vista)
OfertaAgotado
Sudadera
Hombre

Sudadera

S/ 80.00 S/ 70.00
Slider 02 · Hero full-width con captions
Colección 1

Piezas que cuentan historias

Ver ahora
Colección 2

Piezas que cuentan historias

Ver ahora
Colección 3

Piezas que cuentan historias

Ver ahora

Galerías

Gallery 01 · Grid uniforme 4 cols
Gallery 02 · Masonry (tamaños mixtos)
Gallery 03 · Collage (hero asimétrico)
Gallery 04 · Product gallery (detalle de producto)

Instagram feed

IG 01 · 6 columnas fullwidth

Síguenos en Instagram

@vpm_tienda

Promo banners

Banners promocionales con imagen + overlay. Se usan entre secciones para dirigir tráfico.

Promo 01 · Side-by-side (2 categorías)
Mujer

Colección SS26

Comprar mujer →
Hombre

Nuevos esenciales

Comprar hombre →
Promo 02 · Grid 3 columnas (categorías promo)
Categoría 01

Accesorios

Explorar →
Categoría 02

Zapatos

Explorar →
Categoría 03

Abrigos

Explorar →
Promo 03 · Asimétrico (1 grande + 1 pequeño)
Hero

Esta temporada, tiñete de color

Descubrir colección →
Oferta

-50%

Ver ofertas →

Listas editoriales

Listas de colecciones estilo editorial Athens: sólo tipografía, muy aireadas.

Editorial 01 · Top collections (links tipográficos)

Shirts

Mujer · 46 productos →

Stay at home

Comfy · 32 productos →

Summer neutrals

SS26 · 28 productos →

Back in stock

Bestsellers · 19 productos →

Summer dresses

Mujer · 54 productos →
Editorial 02 · Mixed layout (imagen + links)
Listos para el verano

Muchos y tan coloridos como sea posible

Camisas → Shorts → Vestidos → Accesorios →

Countdown

Banner con cuenta regresiva para ofertas limitadas.

Countdown 01 · Banner oscuro (4 unidades)
Oferta relámpago

Hasta 50% OFF termina pronto

02
días
14
horas
37
min
09
seg
Comprar ahora

Marcas

Tira horizontal con logotipos de marca (tipográficos como Athens).

Brands 01 · 6 logos en fila (tipográficos)

Mixed layouts

Bloques 50/50 con imagen + texto (lifestyle, editorial).

Mixed 01 · 2 columnas lifestyle (Athens "pants & swimwear")
Pants & leggings

Piezas cómodas para quedarte en casa

Comprar →
Swimwear

Tu confianza dentro

Shop swimwear →

Divisores

Separadores decorativos entre secciones.

Divider 01 · Ornamental (línea + icono)
Divider 02 · Línea simple
Divider 03 · Con texto centrado
— O bien —

Drawers & overlays

Popups interactivos. Los disparadores funcionan ahora mismo — haz click para probarlos.

Trigger 01 · Cart drawer (derecha)
data-open-cart
Trigger 02 · Account drawer (derecha)
data-open-account
Trigger 03 · Search overlay (top-down)
data-open-search
Trigger 04 · Mobile menu (izquierda)
data-drawer-open="#drawerMenu"

Modales

Modal 01 · Básico
data-modal-open="#id"
Modal 02 · Grande (quick view producto)
clase .lg o .xl

FAQ accordion

FAQ 01 · Lista expandible
En Lima 24-48 horas. Provincia 3 a 5 días hábiles según destino.
Sí, tienes 30 días para cambios sin costo siempre que el producto esté en condiciones originales.
Yape, Plin, transferencia, depósito y tarjeta vía Izipay.
Sí, a partir de 6 unidades aplican precios por mayor automáticamente.

Utility

Elementos flotantes y de estado: loaders, toasts, cookie bar, back-to-top.

Loader 01 · Dots bouncing
Cargando productos…
Loader 02 · Skeleton (placeholder de carga)
Toast 01 · Confirmación agregado al carrito
Agregado al carrito
Error al procesar
Cookie 01 · Barra de consentimiento

Usamos cookies para mejorar tu experiencia. Al continuar aceptas nuestra política de privacidad.

Back-to-top 01 · Botón flotante circular
Aparece después de hacer scroll (position:fixed; bottom:24px; right:24px).

Empty states

Estados vacíos con mensaje + acción sugerida.

Empty 01 · Carrito vacío

Tu carrito está vacío

Aún no has agregado productos. Explora nuestras colecciones.

Ir a tienda
Empty 02 · Búsqueda sin resultados

Sin resultados

No encontramos productos que coincidan. Prueba con otros términos.

Limpiar filtros
Empty 03 · Wishlist vacía

Tu lista de deseos está vacía

Guarda tus productos favoritos para comprarlos más tarde.

Explorar productos

Trust strip

Tira de beneficios compacta (sin íconos grandes, sólo texto). Alternativa a Features 01.

Trust 01 · 3 beneficios inline (texto + subray.)
Envíos gratis y fáciles. Todos los días. Detalles
Revisa tu paquete al momento de la entrega.
Devoluciones extendidas en toda la tienda.

Footers

Variantes de pie de página.

Footer 01 · Minimal una línea
Footer 02 · Oscuro (4 columnas)
Footer 03 · Centrado (SF style)

Newsletter

Newsletter 01 · Pre-footer (actual)
Suscríbete
Envío rápido
Lima 24h · Provincias 2-4d
Cambios fáciles
30 días para cambiar
Pago seguro
Encriptación SSL
Soporte humano
WhatsApp en 15 min