Brand Manual — Dressing Mostras

DRESSING MOSTRAS

Brand Manual — Design System v3 · Para uso en desarrollo

01 · Logo

Contexto	Uso
Desktop (sidebar)	Max-width 200px, fondo claro, filter: contrast(1.1)
Mobile (header)	Height 60px, width auto, max-width 150px
Fondo oscuro	Sin filtro o invertido según imagen

02 · Paleta de colores

Rosa Mostra

#B85C75

Accent principal — CTAs, precios, highlights

Accent Dark

#5F2C3E

Hover de botones accent

Text

#1a1a1a

Texto principal, botón primario

Sidebar BG

#f8f8f8

Fondo sidebar, encabezados de tabla

White

#ffffff

Fondo principal, cards, menú móvil

Border

#e5e5e5

Divisores, bordes de inputs

Muted

#999999

Texto secundario, nav inactivo

Olive

#A0A060

Acento secundario (disponible)

CSS Custom Properties

Variable	Valor
–accent-color	#B85C75
–accent-dark	#5F2C3E
–text-color	#1a1a1a
–bg-color	#ffffff
–sidebar-bg	#f8f8f8
–border-color	#e5e5e5
–olive	#A0A060

03 · Tipografía

Fuente principal: Outfit (Google Fonts) — Pesos: 300 · 500 · 700 · 900

Hero H1
5rem / 900 / ls -3px / lh 0.9

MOSTRA
YOUR
STYLE.

Section H2
2.5rem / 400 / ls 1px

SELECTED ITEMS

Feature H2
2.5rem / 900

NEW DROPS: JACKETS

PDP Title
3rem / 700 / lh 1.1

Remera Mostra Star

Nav Links
1.5rem / 700 / uppercase

Home Shop New In

Nav Index
0.8rem / 300 / accent

01 02 03 04

Body / Descripción
1.1rem / 400 / lh 1.6

La nueva colección ya está acá. Encontrá lo que buscás.

Product Name
1rem / 500

Hoodie Urban Vibe

Price
— card: heredado muted
— PDP: 2rem / 700 / accent

$18.500 $18.500

Labels / Utility
0.9rem / 700 / uppercase

VER DETALLE · CATEGORÍAS · TALLE

Breadcrumb / Meta
0.9rem / 500 / uppercase / muted

Home / Shop / Remeras

04 · Espaciado

5px

Gap mínimo (nav item label)

10px

Gap socials, size-filter

15px

Gap nav links, padding card-action

20px

Gap hero bento, padding mobile header

25px

Margin entre nav items

30px

Gap duo-grid, gap shop product grid

40px

Padding sidebar, padding content, gap products-scroll

60px

Gap product grid (PDP), padding PDP details top

80px

section margin-bottom (hero, PDP grid)

05 · Componentes

Botones

Clase	BG	Color	Padding	Font
.btn-clean	#1a1a1a	#fff	15px 40px	600 / sin border-radius
.btn-clean:hover	var(–accent-color)	#fff	—	Transition 0.3s
.add-to-cart-btn	var(–accent-color)	#fff	20px	700 / 1.1rem / width 100%
.add-to-cart-btn:hover	var(–accent-dark)	—	—	Transition 0.3s

Selectores de talle

Navegación Sidebar

Estado	Color	Transform
Default	#999	—
Active / Hover	#1a1a1a	translateX(10px)
Index span	var(–accent-color)	—

Product Card

Remera Mostra Star

$18.500

Propiedad	Valor
Ancho (desktop)	flex: 0 0 320px
Ancho (mobile)	flex: 0 0 80vw
Img container height	420px desktop / 350px mobile
Img blend mode	mix-blend-mode: multiply
Img hover	scale(1.05) · transition 0.6s cubic-bezier(0.22,1,0.36,1)
.card-action (hover)	translateY(0) desde translateY(100%) · bg rgba(255,255,255,0.9) · color accent

06 · Layout & Grid

Estructura	Regla
Layout base	display: flex · sidebar fija 20% (max 300px) + content 80%
Hero Bento (desktop)	grid-template-columns: 2fr 1fr 1fr · height 400px · gap 20px
Hero Bento (mobile)	grid-template-columns: 1fr 1fr · gap 0 · hero-text span full
Products scroll	display: flex · overflow-x: auto · scrollbar-width: none
Shop grid	repeat(3, 1fr) desktop · 1fr 1fr mobile · gap 30px/15px
Shop layout	grid-template-columns: 250px 1fr · gap 40px
Duo/Camperas grid	1fr 1fr desktop · 1fr mobile · item height 500px/400px
PDP grid	1.2fr 1fr · gap 60px · single col mobile
Content padding	40px desktop · 0 mobile (con padding-top 80px para header fijo)

07 · Breakpoints

> 768px

Desktop — sidebar visible, layout full, hero 3 cols

≤ 768px

Mobile — sidebar oculta, mobile-header fijo (60px), bottom-nav fijo (60px), hero 2 cols

Clases exclusivas mobile: .mobile-header · .mobile-bottom-nav · .mobile-menu-overlay
Ocultas en desktop vía display: none a ≥ 769px.

08 · Motion & Transiciones

0.3s ease

Nav links hover, botones, card-action, filtros, colores

0.4s ease

Bento box general, duo-overlay

0.6s cubic-bezier(0.22,1,0.36,1)

Product card image zoom

0.6s cubic-bezier(0.25,0.46,0.45,0.94)

Duo/campera image zoom

0.3s ease (slide)

Mobile menu overlay (opacity + translateX)

09 · Iconografía

Librería: Font Awesome 6.0.0 (CDN)

Ícono	Clase FA	Uso
≡	fa-bars	Hamburger menu mobile
✕	fa-times	Cerrar menú mobile
🛍	fa-shopping-bag	Carrito (mobile header)
→	fa-arrow-right	CTA buttons
→	fa-long-arrow-alt-right	Scroll indicator
🏠	fa-home	Bottom nav — Inicio
🔍	fa-search	Bottom nav — Buscar
♥	fa-heart	Bottom nav — Favs
👤	fa-user	Bottom nav — Perfil
⚡	fa-filter	Shop mobile — filtros

10 · Tono de comunicación

Contexto	Ejemplos
Hero / Headlines	Mayúsculas · inglés · directo: MOSTRA YOUR STYLE
Subtítulos / Sección	Mayúsculas inglés: SELECTED ITEMS · NEW DROPS
Descripciones	Español casual: “La nueva colección ya está acá”
CTAs	Mayúsculas: VER DETALLE · AGREGAR · VER TODO
Overlays estilo/vibe	Una palabra en inglés: URBAN · CHIC · BOMBER JACKET