feat: Design System completo + propuestas branding + social media
- tokens.css: CSS custom properties para Tema A (Industrial) y Tema B (Moderno) - design-system/index.html: 20 componentes con theme switcher - social-media/: 3 propuestas de look & feel para redes sociales - branding/: opciones de branding y look & feel aprobadas - Brief del proyecto incluido
This commit is contained in:
Hugo
1253
branding/look-and-feel.html
Normal file
1253
branding/look-and-feel.html
Normal file
File diff suppressed because it is too large
Load Diff
515
branding/opciones-branding.html
Normal file
515
branding/opciones-branding.html
Normal file
@@ -0,0 +1,515 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nexus Autoparts - Opciones de Branding</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800&family=Barlow:wght@400;700&family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;700&family=Bebas+Neue&family=Oswald:wght@400;600;700&family=Archivo+Black&family=Work+Sans:wght@300;400;600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Inter', sans-serif; background: #111; color: #fff; }
|
||||
.header { text-align: center; padding: 60px 20px 40px; }
|
||||
.header h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 0.1em; }
|
||||
.header p { color: #888; margin-top: 10px; font-size: 1.1rem; }
|
||||
.options { max-width: 1400px; margin: 0 auto; padding: 0 20px 60px; }
|
||||
|
||||
/* ===== OPTION CARD ===== */
|
||||
.option { margin-bottom: 80px; border-radius: 20px; overflow: hidden; }
|
||||
.option-label { padding: 12px 24px; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; }
|
||||
|
||||
/* ===== OPTION A: INDUSTRIAL ROBUSTO ===== */
|
||||
.option-a { background: #1a1a1a; border: 1px solid #333; }
|
||||
.option-a .option-label { background: #F5A623; color: #000; }
|
||||
.option-a .hero {
|
||||
background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #252525 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-a .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50px; right: -50px;
|
||||
width: 300px; height: 300px;
|
||||
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(245,166,35,0.05) 10px, rgba(245,166,35,0.05) 20px);
|
||||
}
|
||||
.option-a .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
|
||||
.option-a .logo-icon {
|
||||
width: 80px; height: 80px;
|
||||
background: #F5A623;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 800; font-size: 2.5rem; color: #000;
|
||||
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
|
||||
}
|
||||
.option-a .logo-text h2 {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 800; font-size: 3rem;
|
||||
letter-spacing: 0.05em; color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-a .logo-text span {
|
||||
font-family: 'Barlow', sans-serif;
|
||||
font-weight: 400; font-size: 1rem;
|
||||
letter-spacing: 0.3em; color: #F5A623;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-a .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #151515; }
|
||||
.option-a .color-row { display: flex; gap: 12px; }
|
||||
.option-a .swatch { width: 60px; height: 60px; border-radius: 8px; position: relative; }
|
||||
.option-a .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-a .typo-sample h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.8rem; color: #F5A623; }
|
||||
.option-a .typo-sample p { font-family: 'Barlow', sans-serif; color: #ccc; margin-top: 8px; line-height: 1.6; }
|
||||
.option-a .elements { display: flex; gap: 20px; flex-wrap: wrap; }
|
||||
.option-a .element-tag {
|
||||
padding: 10px 20px; border: 2px solid #F5A623; color: #F5A623;
|
||||
font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem;
|
||||
clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
|
||||
}
|
||||
.option-a .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-a .btn-primary { padding: 14px 32px; background: #F5A623; color: #000; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; }
|
||||
.option-a .btn-secondary { padding: 14px 32px; background: transparent; color: #F5A623; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: 2px solid #F5A623; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION B: TECNICO MODERNO ===== */
|
||||
.option-b { background: #ffffff; color: #1a1a2e; border: 1px solid #e0e0e0; }
|
||||
.option-b .option-label { background: #FF6B35; color: #fff; }
|
||||
.option-b .hero {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-b .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
background-image: radial-gradient(circle at 2px 2px, rgba(26,26,46,0.04) 1px, transparent 0);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
.option-b .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 1; }
|
||||
.option-b .logo-icon {
|
||||
width: 70px; height: 70px;
|
||||
position: relative;
|
||||
}
|
||||
.option-b .logo-icon svg { width: 100%; height: 100%; }
|
||||
.option-b .nexus-node { fill: #FF6B35; }
|
||||
.option-b .nexus-line { stroke: #1a1a2e; stroke-width: 2; }
|
||||
.option-b .logo-text h2 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700; font-size: 2.8rem;
|
||||
color: #1a1a2e; letter-spacing: -0.02em;
|
||||
}
|
||||
.option-b .logo-text h2 em {
|
||||
font-style: normal; color: #FF6B35;
|
||||
}
|
||||
.option-b .logo-text span {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 300; font-size: 0.95rem;
|
||||
letter-spacing: 0.25em; color: #666;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-b .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #f4f5f7; color: #1a1a2e; }
|
||||
.option-b .swatch { width: 60px; height: 60px; border-radius: 12px; }
|
||||
.option-b .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-b .color-row { display: flex; gap: 12px; }
|
||||
.option-b .typo-sample h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; color: #1a1a2e; }
|
||||
.option-b .typo-sample p { font-family: 'Montserrat', sans-serif; color: #555; margin-top: 8px; line-height: 1.6; }
|
||||
.option-b .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-b .element-tag {
|
||||
padding: 10px 20px; border-radius: 50px;
|
||||
background: #1a1a2e; color: #fff;
|
||||
font-family: 'Poppins', sans-serif; font-weight: 600;
|
||||
font-size: 0.8rem; letter-spacing: 0.05em;
|
||||
}
|
||||
.option-b .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-b .btn-primary { padding: 14px 32px; background: #FF6B35; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: none; border-radius: 8px; cursor: pointer; }
|
||||
.option-b .btn-secondary { padding: 14px 32px; background: transparent; color: #1a1a2e; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: 2px solid #1a1a2e; border-radius: 8px; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION C: PREMIUM AUTOMOTRIZ ===== */
|
||||
.option-c { background: #0a0a0a; border: 1px solid #222; }
|
||||
.option-c .option-label { background: #E63946; color: #fff; }
|
||||
.option-c .hero {
|
||||
background: linear-gradient(160deg, #0a0a0a 0%, #151515 40%, #0a0a0a 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-c .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; right: 0;
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(230,57,70,0.08) 0%, transparent 70%);
|
||||
}
|
||||
.option-c .hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px; right: 60px;
|
||||
width: 200px; height: 3px;
|
||||
background: linear-gradient(90deg, transparent, #E63946, transparent);
|
||||
}
|
||||
.option-c .logo-area { text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }
|
||||
.option-c .logo-text h2 {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 5rem; letter-spacing: 0.15em;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 60px rgba(230,57,70,0.2);
|
||||
}
|
||||
.option-c .logo-text .red { color: #E63946; }
|
||||
.option-c .logo-divider {
|
||||
width: 80px; height: 3px; background: #E63946;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.option-c .logo-text span {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 400; font-size: 1.1rem;
|
||||
letter-spacing: 0.5em; color: #888;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-c .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #0f0f0f; }
|
||||
.option-c .color-row { display: flex; gap: 12px; }
|
||||
.option-c .swatch { width: 60px; height: 60px; border-radius: 4px; border: 1px solid #333; }
|
||||
.option-c .swatch-label { font-size: 0.7rem; color: #666; margin-top: 6px; text-align: center; }
|
||||
.option-c .typo-sample h3 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #E63946; letter-spacing: 0.1em; }
|
||||
.option-c .typo-sample p { font-family: 'Oswald', sans-serif; font-weight: 400; color: #aaa; margin-top: 8px; line-height: 1.6; }
|
||||
.option-c .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-c .element-tag {
|
||||
padding: 10px 24px;
|
||||
border: 1px solid #E63946; color: #E63946;
|
||||
font-family: 'Oswald', sans-serif; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem;
|
||||
}
|
||||
.option-c .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-c .btn-primary { padding: 14px 36px; background: #E63946; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; border: none; cursor: pointer; }
|
||||
.option-c .btn-secondary { padding: 14px 36px; background: transparent; color: #ccc; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.1em; border: 1px solid #555; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION E: RETRO MODERNO ===== */
|
||||
.option-e { background: #F5F0E8; color: #2C3E50; border: 1px solid #d4c9b8; }
|
||||
.option-e .option-label { background: #1B4965; color: #F5F0E8; }
|
||||
.option-e .hero {
|
||||
background: #F5F0E8;
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.option-e .badge {
|
||||
width: 220px; height: 220px; margin: 0 auto 30px;
|
||||
border: 4px solid #1B4965;
|
||||
border-radius: 50%;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.option-e .badge::before {
|
||||
content: '★ EST. 2026 ★';
|
||||
position: absolute; top: -14px;
|
||||
background: #F5F0E8; padding: 0 15px;
|
||||
font-family: 'Work Sans', sans-serif; font-weight: 600;
|
||||
font-size: 0.7rem; letter-spacing: 0.2em; color: #C45D3E;
|
||||
}
|
||||
.option-e .badge h2 {
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
font-size: 2rem; color: #1B4965;
|
||||
text-transform: uppercase; line-height: 1;
|
||||
}
|
||||
.option-e .badge span {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300; font-size: 0.85rem;
|
||||
letter-spacing: 0.3em; color: #C45D3E;
|
||||
text-transform: uppercase; margin-top: 5px;
|
||||
}
|
||||
.option-e .tagline {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300; font-size: 1.2rem;
|
||||
color: #666; letter-spacing: 0.1em;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.option-e .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #EDE8DD; color: #2C3E50; }
|
||||
.option-e .color-row { display: flex; gap: 12px; }
|
||||
.option-e .swatch { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #d4c9b8; }
|
||||
.option-e .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-e .typo-sample h3 { font-family: 'Archivo Black', sans-serif; font-size: 1.8rem; color: #1B4965; }
|
||||
.option-e .typo-sample p { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #555; margin-top: 8px; line-height: 1.6; }
|
||||
.option-e .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-e .element-tag {
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #1B4965; color: #1B4965;
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.option-e .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-e .btn-primary { padding: 14px 32px; background: #1B4965; color: #F5F0E8; font-family: 'Archivo Black', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; border-radius: 50px; cursor: pointer; }
|
||||
.option-e .btn-secondary { padding: 14px 32px; background: transparent; color: #C45D3E; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 0.9rem; border: 2px solid #C45D3E; border-radius: 50px; cursor: pointer; }
|
||||
|
||||
/* ===== SHARED ===== */
|
||||
.section-title { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; opacity: 0.5; }
|
||||
.mini-landing { padding: 40px 60px; }
|
||||
.mini-landing h3 { margin-bottom: 15px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.option-a .hero, .option-b .hero, .option-c .hero, .option-e .hero,
|
||||
.option-a .brand-board, .option-b .brand-board, .option-c .brand-board, .option-e .brand-board { padding: 40px 20px; }
|
||||
.option-c .logo-text h2 { font-size: 3rem; }
|
||||
.option-a .logo-text h2 { font-size: 2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<h1>NEXUS AUTOPARTS</h1>
|
||||
<p>Opciones de Branding — Selecciona tu estilo</p>
|
||||
</div>
|
||||
|
||||
<div class="options">
|
||||
|
||||
<!-- ===== OPCION A: INDUSTRIAL ROBUSTO ===== -->
|
||||
<div class="option option-a">
|
||||
<div class="option-label">Opción A — Industrial Robusto</div>
|
||||
<div class="hero">
|
||||
<div class="logo-area">
|
||||
<div class="logo-icon">N</div>
|
||||
<div class="logo-text">
|
||||
<h2>NEXUS</h2>
|
||||
<span>AUTOPARTS</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color:#888; font-family:'Barlow',sans-serif; font-size:1.1rem; max-width:500px; line-height:1.6; position:relative; z-index:1;">
|
||||
Piezas que conectan. Calidad que resiste.<br>
|
||||
<small style="color:#F5A623">Tu proveedor de refacciones de confianza.</small>
|
||||
</p>
|
||||
<div class="mock-buttons">
|
||||
<button class="btn-primary">BUSCAR REFACCIONES</button>
|
||||
<button class="btn-secondary">VER CATÁLOGO</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-board">
|
||||
<div>
|
||||
<div class="section-title">Paleta de Colores</div>
|
||||
<div class="color-row">
|
||||
<div>
|
||||
<div class="swatch" style="background:#F5A623;"></div>
|
||||
<div class="swatch-label">Ámbar<br>#F5A623</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#1a1a1a; border:1px solid #333;"></div>
|
||||
<div class="swatch-label">Negro<br>#1A1A1A</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#6B7B8D;"></div>
|
||||
<div class="swatch-label">Acero<br>#6B7B8D</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#E8E8E8;"></div>
|
||||
<div class="swatch-label">Plata<br>#E8E8E8</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo-sample">
|
||||
<div class="section-title">Tipografía</div>
|
||||
<h3>Barlow Condensed Bold</h3>
|
||||
<p>Barlow Regular para cuerpo de texto. Fuerte, legible, industrial.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-title">Elementos Visuales</div>
|
||||
<div class="elements">
|
||||
<div class="element-tag">Metal Cepillado</div>
|
||||
<div class="element-tag">Líneas Diagonales</div>
|
||||
<div class="element-tag">Iconos Técnicos</div>
|
||||
<div class="element-tag">Bordes Angulares</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== OPCION B: TECNICO MODERNO ===== -->
|
||||
<div class="option option-b">
|
||||
<div class="option-label">Opción B — Técnico Moderno</div>
|
||||
<div class="hero">
|
||||
<div class="logo-area">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 70 70">
|
||||
<circle cx="35" cy="20" r="6" class="nexus-node"/>
|
||||
<circle cx="15" cy="50" r="5" class="nexus-node"/>
|
||||
<circle cx="55" cy="50" r="5" class="nexus-node"/>
|
||||
<circle cx="35" cy="55" r="4" class="nexus-node"/>
|
||||
<line x1="35" y1="20" x2="15" y2="50" class="nexus-line"/>
|
||||
<line x1="35" y1="20" x2="55" y2="50" class="nexus-line"/>
|
||||
<line x1="15" y1="50" x2="55" y2="50" class="nexus-line"/>
|
||||
<line x1="35" y1="20" x2="35" y2="55" class="nexus-line"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="logo-text">
|
||||
<h2><em>Nexus</em> Autoparts</h2>
|
||||
<span>Conectando piezas, moviendo industrias</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color:#555; font-family:'Montserrat',sans-serif; font-size:1.05rem; max-width:520px; line-height:1.7; position:relative; z-index:1;">
|
||||
La plataforma inteligente para encontrar la refacción exacta. Más de 1.4 millones de partes a tu alcance.
|
||||
</p>
|
||||
<div class="mock-buttons">
|
||||
<button class="btn-primary">Buscar Refacciones</button>
|
||||
<button class="btn-secondary">Explorar Catálogo</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-board">
|
||||
<div>
|
||||
<div class="section-title" style="color:#999;">Paleta de Colores</div>
|
||||
<div class="color-row">
|
||||
<div>
|
||||
<div class="swatch" style="background:#1a1a2e;"></div>
|
||||
<div class="swatch-label">Azul Noche<br>#1A1A2E</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#FF6B35;"></div>
|
||||
<div class="swatch-label">Naranja<br>#FF6B35</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#f4f5f7; border:1px solid #ddd;"></div>
|
||||
<div class="swatch-label">Gris Claro<br>#F4F5F7</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#ffffff; border:1px solid #ddd;"></div>
|
||||
<div class="swatch-label">Blanco<br>#FFFFFF</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo-sample">
|
||||
<div class="section-title" style="color:#999;">Tipografía</div>
|
||||
<h3>Poppins Bold</h3>
|
||||
<p>Montserrat para cuerpo. Moderna, geométrica, tech-friendly.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-title" style="color:#999;">Elementos Visuales</div>
|
||||
<div class="elements">
|
||||
<div class="element-tag">Nodos de Red</div>
|
||||
<div class="element-tag">Grid Punteado</div>
|
||||
<div class="element-tag">Bordes Redondeados</div>
|
||||
<div class="element-tag">Gradientes Sutiles</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== OPCION C: PREMIUM AUTOMOTRIZ ===== -->
|
||||
<div class="option option-c">
|
||||
<div class="option-label">Opción C — Premium Automotriz</div>
|
||||
<div class="hero">
|
||||
<div class="logo-area">
|
||||
<div class="logo-text">
|
||||
<h2>NEXUS <span class="red">AUTO</span>PARTS</h2>
|
||||
<div class="logo-divider"></div>
|
||||
<span>Performance • Calidad • Precisión</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color:#666; font-family:'Oswald',sans-serif; font-weight:400; font-size:1rem; max-width:500px; margin:0 auto; line-height:1.7; text-align:center;">
|
||||
Refacciones de alto rendimiento para profesionales que exigen lo mejor.
|
||||
</p>
|
||||
<div class="mock-buttons" style="justify-content:center;">
|
||||
<button class="btn-primary">BUSCAR PIEZAS</button>
|
||||
<button class="btn-secondary">CATÁLOGO COMPLETO</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-board">
|
||||
<div>
|
||||
<div class="section-title">Paleta de Colores</div>
|
||||
<div class="color-row">
|
||||
<div>
|
||||
<div class="swatch" style="background:#0a0a0a;"></div>
|
||||
<div class="swatch-label">Negro Mate<br>#0A0A0A</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#E63946;"></div>
|
||||
<div class="swatch-label">Rojo Racing<br>#E63946</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:linear-gradient(135deg,#888,#ccc);"></div>
|
||||
<div class="swatch-label">Plata<br>#B8B8B8</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#1a1a1a; border:1px solid #333;"></div>
|
||||
<div class="swatch-label">Grafito<br>#1A1A1A</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo-sample">
|
||||
<div class="section-title">Tipografía</div>
|
||||
<h3>BEBAS NEUE</h3>
|
||||
<p>Oswald para cuerpo. Elegante, racing, premium.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-title">Elementos Visuales</div>
|
||||
<div class="elements">
|
||||
<div class="element-tag">Líneas Speed</div>
|
||||
<div class="element-tag">Acentos Rojos</div>
|
||||
<div class="element-tag">Degradados Oscuros</div>
|
||||
<div class="element-tag">Bandera Racing</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== OPCION E: RETRO MODERNO ===== -->
|
||||
<div class="option option-e">
|
||||
<div class="option-label">Opción E — Mecánico Retro-Moderno</div>
|
||||
<div class="hero">
|
||||
<div class="badge">
|
||||
<h2>NEXUS</h2>
|
||||
<span>AUTOPARTS</span>
|
||||
</div>
|
||||
<p class="tagline">“Refacciones con garantía, servicio con experiencia”</p>
|
||||
<div class="mock-buttons" style="justify-content:center; margin-top:30px;">
|
||||
<button class="btn-primary">Buscar Refacciones</button>
|
||||
<button class="btn-secondary">Ver Catálogo</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-board">
|
||||
<div>
|
||||
<div class="section-title" style="color:#999;">Paleta de Colores</div>
|
||||
<div class="color-row">
|
||||
<div>
|
||||
<div class="swatch" style="background:#1B4965;"></div>
|
||||
<div class="swatch-label">Petróleo<br>#1B4965</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#C45D3E;"></div>
|
||||
<div class="swatch-label">Óxido<br>#C45D3E</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#F5F0E8;"></div>
|
||||
<div class="swatch-label">Crema<br>#F5F0E8</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#2C3E50;"></div>
|
||||
<div class="swatch-label">Carbón<br>#2C3E50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo-sample">
|
||||
<div class="section-title" style="color:#999;">Tipografía</div>
|
||||
<h3>Archivo Black</h3>
|
||||
<p>Work Sans Light para cuerpo. Clásica pero fresca, con personalidad.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-title" style="color:#999;">Elementos Visuales</div>
|
||||
<div class="elements">
|
||||
<div class="element-tag">Badges Circulares</div>
|
||||
<div class="element-tag">Sellos de Calidad</div>
|
||||
<div class="element-tag">Bordes Redondeados</div>
|
||||
<div class="element-tag">Texturas Vintage</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="text-align:center; padding:40px; color:#555; font-size:0.9rem;">
|
||||
Nexus Autoparts — Propuestas de Branding © 2026<br>
|
||||
<small>Generado por Hugo, Project Manager</small>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
319
branding/option-a.html
Normal file
319
branding/option-a.html
Normal file
@@ -0,0 +1,319 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nexus Autoparts - Opciones de Branding</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800&family=Barlow:wght@400;700&family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;700&family=Bebas+Neue&family=Oswald:wght@400;600;700&family=Archivo+Black&family=Work+Sans:wght@300;400;600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Inter', sans-serif; background: #111; color: #fff; }
|
||||
.header { text-align: center; padding: 60px 20px 40px; }
|
||||
.header h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 0.1em; }
|
||||
.header p { color: #888; margin-top: 10px; font-size: 1.1rem; }
|
||||
.options { max-width: 1400px; margin: 0 auto; padding: 0 20px 60px; }
|
||||
|
||||
/* ===== OPTION CARD ===== */
|
||||
.option { margin-bottom: 80px; border-radius: 20px; overflow: hidden; }
|
||||
.option-label { padding: 12px 24px; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; }
|
||||
|
||||
/* ===== OPTION A: INDUSTRIAL ROBUSTO ===== */
|
||||
.option-a { background: #1a1a1a; border: 1px solid #333; }
|
||||
.option-a .option-label { background: #F5A623; color: #000; }
|
||||
.option-a .hero {
|
||||
background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #252525 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-a .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50px; right: -50px;
|
||||
width: 300px; height: 300px;
|
||||
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(245,166,35,0.05) 10px, rgba(245,166,35,0.05) 20px);
|
||||
}
|
||||
.option-a .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
|
||||
.option-a .logo-icon {
|
||||
width: 80px; height: 80px;
|
||||
background: #F5A623;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 800; font-size: 2.5rem; color: #000;
|
||||
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
|
||||
}
|
||||
.option-a .logo-text h2 {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 800; font-size: 3rem;
|
||||
letter-spacing: 0.05em; color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-a .logo-text span {
|
||||
font-family: 'Barlow', sans-serif;
|
||||
font-weight: 400; font-size: 1rem;
|
||||
letter-spacing: 0.3em; color: #F5A623;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-a .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #151515; }
|
||||
.option-a .color-row { display: flex; gap: 12px; }
|
||||
.option-a .swatch { width: 60px; height: 60px; border-radius: 8px; position: relative; }
|
||||
.option-a .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-a .typo-sample h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.8rem; color: #F5A623; }
|
||||
.option-a .typo-sample p { font-family: 'Barlow', sans-serif; color: #ccc; margin-top: 8px; line-height: 1.6; }
|
||||
.option-a .elements { display: flex; gap: 20px; flex-wrap: wrap; }
|
||||
.option-a .element-tag {
|
||||
padding: 10px 20px; border: 2px solid #F5A623; color: #F5A623;
|
||||
font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem;
|
||||
clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
|
||||
}
|
||||
.option-a .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-a .btn-primary { padding: 14px 32px; background: #F5A623; color: #000; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; }
|
||||
.option-a .btn-secondary { padding: 14px 32px; background: transparent; color: #F5A623; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: 2px solid #F5A623; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION B: TECNICO MODERNO ===== */
|
||||
.option-b { background: #ffffff; color: #1a1a2e; border: 1px solid #e0e0e0; }
|
||||
.option-b .option-label { background: #FF6B35; color: #fff; }
|
||||
.option-b .hero {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-b .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
background-image: radial-gradient(circle at 2px 2px, rgba(26,26,46,0.04) 1px, transparent 0);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
.option-b .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 1; }
|
||||
.option-b .logo-icon {
|
||||
width: 70px; height: 70px;
|
||||
position: relative;
|
||||
}
|
||||
.option-b .logo-icon svg { width: 100%; height: 100%; }
|
||||
.option-b .nexus-node { fill: #FF6B35; }
|
||||
.option-b .nexus-line { stroke: #1a1a2e; stroke-width: 2; }
|
||||
.option-b .logo-text h2 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700; font-size: 2.8rem;
|
||||
color: #1a1a2e; letter-spacing: -0.02em;
|
||||
}
|
||||
.option-b .logo-text h2 em {
|
||||
font-style: normal; color: #FF6B35;
|
||||
}
|
||||
.option-b .logo-text span {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 300; font-size: 0.95rem;
|
||||
letter-spacing: 0.25em; color: #666;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-b .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #f4f5f7; color: #1a1a2e; }
|
||||
.option-b .swatch { width: 60px; height: 60px; border-radius: 12px; }
|
||||
.option-b .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-b .color-row { display: flex; gap: 12px; }
|
||||
.option-b .typo-sample h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; color: #1a1a2e; }
|
||||
.option-b .typo-sample p { font-family: 'Montserrat', sans-serif; color: #555; margin-top: 8px; line-height: 1.6; }
|
||||
.option-b .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-b .element-tag {
|
||||
padding: 10px 20px; border-radius: 50px;
|
||||
background: #1a1a2e; color: #fff;
|
||||
font-family: 'Poppins', sans-serif; font-weight: 600;
|
||||
font-size: 0.8rem; letter-spacing: 0.05em;
|
||||
}
|
||||
.option-b .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-b .btn-primary { padding: 14px 32px; background: #FF6B35; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: none; border-radius: 8px; cursor: pointer; }
|
||||
.option-b .btn-secondary { padding: 14px 32px; background: transparent; color: #1a1a2e; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: 2px solid #1a1a2e; border-radius: 8px; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION C: PREMIUM AUTOMOTRIZ ===== */
|
||||
.option-c { background: #0a0a0a; border: 1px solid #222; }
|
||||
.option-c .option-label { background: #E63946; color: #fff; }
|
||||
.option-c .hero {
|
||||
background: linear-gradient(160deg, #0a0a0a 0%, #151515 40%, #0a0a0a 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-c .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; right: 0;
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(230,57,70,0.08) 0%, transparent 70%);
|
||||
}
|
||||
.option-c .hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px; right: 60px;
|
||||
width: 200px; height: 3px;
|
||||
background: linear-gradient(90deg, transparent, #E63946, transparent);
|
||||
}
|
||||
.option-c .logo-area { text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }
|
||||
.option-c .logo-text h2 {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 5rem; letter-spacing: 0.15em;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 60px rgba(230,57,70,0.2);
|
||||
}
|
||||
.option-c .logo-text .red { color: #E63946; }
|
||||
.option-c .logo-divider {
|
||||
width: 80px; height: 3px; background: #E63946;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.option-c .logo-text span {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 400; font-size: 1.1rem;
|
||||
letter-spacing: 0.5em; color: #888;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-c .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #0f0f0f; }
|
||||
.option-c .color-row { display: flex; gap: 12px; }
|
||||
.option-c .swatch { width: 60px; height: 60px; border-radius: 4px; border: 1px solid #333; }
|
||||
.option-c .swatch-label { font-size: 0.7rem; color: #666; margin-top: 6px; text-align: center; }
|
||||
.option-c .typo-sample h3 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #E63946; letter-spacing: 0.1em; }
|
||||
.option-c .typo-sample p { font-family: 'Oswald', sans-serif; font-weight: 400; color: #aaa; margin-top: 8px; line-height: 1.6; }
|
||||
.option-c .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-c .element-tag {
|
||||
padding: 10px 24px;
|
||||
border: 1px solid #E63946; color: #E63946;
|
||||
font-family: 'Oswald', sans-serif; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem;
|
||||
}
|
||||
.option-c .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-c .btn-primary { padding: 14px 36px; background: #E63946; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; border: none; cursor: pointer; }
|
||||
.option-c .btn-secondary { padding: 14px 36px; background: transparent; color: #ccc; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.1em; border: 1px solid #555; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION E: RETRO MODERNO ===== */
|
||||
.option-e { background: #F5F0E8; color: #2C3E50; border: 1px solid #d4c9b8; }
|
||||
.option-e .option-label { background: #1B4965; color: #F5F0E8; }
|
||||
.option-e .hero {
|
||||
background: #F5F0E8;
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.option-e .badge {
|
||||
width: 220px; height: 220px; margin: 0 auto 30px;
|
||||
border: 4px solid #1B4965;
|
||||
border-radius: 50%;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.option-e .badge::before {
|
||||
content: '★ EST. 2026 ★';
|
||||
position: absolute; top: -14px;
|
||||
background: #F5F0E8; padding: 0 15px;
|
||||
font-family: 'Work Sans', sans-serif; font-weight: 600;
|
||||
font-size: 0.7rem; letter-spacing: 0.2em; color: #C45D3E;
|
||||
}
|
||||
.option-e .badge h2 {
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
font-size: 2rem; color: #1B4965;
|
||||
text-transform: uppercase; line-height: 1;
|
||||
}
|
||||
.option-e .badge span {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300; font-size: 0.85rem;
|
||||
letter-spacing: 0.3em; color: #C45D3E;
|
||||
text-transform: uppercase; margin-top: 5px;
|
||||
}
|
||||
.option-e .tagline {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300; font-size: 1.2rem;
|
||||
color: #666; letter-spacing: 0.1em;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.option-e .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #EDE8DD; color: #2C3E50; }
|
||||
.option-e .color-row { display: flex; gap: 12px; }
|
||||
.option-e .swatch { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #d4c9b8; }
|
||||
.option-e .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-e .typo-sample h3 { font-family: 'Archivo Black', sans-serif; font-size: 1.8rem; color: #1B4965; }
|
||||
.option-e .typo-sample p { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #555; margin-top: 8px; line-height: 1.6; }
|
||||
.option-e .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-e .element-tag {
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #1B4965; color: #1B4965;
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.option-e .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-e .btn-primary { padding: 14px 32px; background: #1B4965; color: #F5F0E8; font-family: 'Archivo Black', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; border-radius: 50px; cursor: pointer; }
|
||||
.option-e .btn-secondary { padding: 14px 32px; background: transparent; color: #C45D3E; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 0.9rem; border: 2px solid #C45D3E; border-radius: 50px; cursor: pointer; }
|
||||
|
||||
/* ===== SHARED ===== */
|
||||
.section-title { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; opacity: 0.5; }
|
||||
.mini-landing { padding: 40px 60px; }
|
||||
.mini-landing h3 { margin-bottom: 15px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.option-a .hero, .option-b .hero, .option-c .hero, .option-e .hero,
|
||||
.option-a .brand-board, .option-b .brand-board, .option-c .brand-board, .option-e .brand-board { padding: 40px 20px; }
|
||||
.option-c .logo-text h2 { font-size: 3rem; }
|
||||
.option-a .logo-text h2 { font-size: 2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin:0; padding:20px; background:#111;">
|
||||
<div class="option option-a">
|
||||
<div class="option-label">Opción A — Industrial Robusto</div>
|
||||
<div class="hero">
|
||||
<div class="logo-area">
|
||||
<div class="logo-icon">N</div>
|
||||
<div class="logo-text">
|
||||
<h2>NEXUS</h2>
|
||||
<span>AUTOPARTS</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color:#888; font-family:'Barlow',sans-serif; font-size:1.1rem; max-width:500px; line-height:1.6; position:relative; z-index:1;">
|
||||
Piezas que conectan. Calidad que resiste.<br>
|
||||
<small style="color:#F5A623">Tu proveedor de refacciones de confianza.</small>
|
||||
</p>
|
||||
<div class="mock-buttons">
|
||||
<button class="btn-primary">BUSCAR REFACCIONES</button>
|
||||
<button class="btn-secondary">VER CATÁLOGO</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-board">
|
||||
<div>
|
||||
<div class="section-title">Paleta de Colores</div>
|
||||
<div class="color-row">
|
||||
<div>
|
||||
<div class="swatch" style="background:#F5A623;"></div>
|
||||
<div class="swatch-label">Ámbar<br>#F5A623</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#1a1a1a; border:1px solid #333;"></div>
|
||||
<div class="swatch-label">Negro<br>#1A1A1A</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#6B7B8D;"></div>
|
||||
<div class="swatch-label">Acero<br>#6B7B8D</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#E8E8E8;"></div>
|
||||
<div class="swatch-label">Plata<br>#E8E8E8</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo-sample">
|
||||
<div class="section-title">Tipografía</div>
|
||||
<h3>Barlow Condensed Bold</h3>
|
||||
<p>Barlow Regular para cuerpo de texto. Fuerte, legible, industrial.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-title">Elementos Visuales</div>
|
||||
<div class="elements">
|
||||
<div class="element-tag">Metal Cepillado</div>
|
||||
<div class="element-tag">Líneas Diagonales</div>
|
||||
<div class="element-tag">Iconos Técnicos</div>
|
||||
<div class="element-tag">Bordes Angulares</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== OPCION B: TECNICO MODERNO ===== -->
|
||||
</body></html>
|
||||
329
branding/option-b.html
Normal file
329
branding/option-b.html
Normal file
@@ -0,0 +1,329 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nexus Autoparts - Opciones de Branding</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800&family=Barlow:wght@400;700&family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;700&family=Bebas+Neue&family=Oswald:wght@400;600;700&family=Archivo+Black&family=Work+Sans:wght@300;400;600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Inter', sans-serif; background: #111; color: #fff; }
|
||||
.header { text-align: center; padding: 60px 20px 40px; }
|
||||
.header h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 0.1em; }
|
||||
.header p { color: #888; margin-top: 10px; font-size: 1.1rem; }
|
||||
.options { max-width: 1400px; margin: 0 auto; padding: 0 20px 60px; }
|
||||
|
||||
/* ===== OPTION CARD ===== */
|
||||
.option { margin-bottom: 80px; border-radius: 20px; overflow: hidden; }
|
||||
.option-label { padding: 12px 24px; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; }
|
||||
|
||||
/* ===== OPTION A: INDUSTRIAL ROBUSTO ===== */
|
||||
.option-a { background: #1a1a1a; border: 1px solid #333; }
|
||||
.option-a .option-label { background: #F5A623; color: #000; }
|
||||
.option-a .hero {
|
||||
background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #252525 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-a .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50px; right: -50px;
|
||||
width: 300px; height: 300px;
|
||||
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(245,166,35,0.05) 10px, rgba(245,166,35,0.05) 20px);
|
||||
}
|
||||
.option-a .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
|
||||
.option-a .logo-icon {
|
||||
width: 80px; height: 80px;
|
||||
background: #F5A623;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 800; font-size: 2.5rem; color: #000;
|
||||
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
|
||||
}
|
||||
.option-a .logo-text h2 {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 800; font-size: 3rem;
|
||||
letter-spacing: 0.05em; color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-a .logo-text span {
|
||||
font-family: 'Barlow', sans-serif;
|
||||
font-weight: 400; font-size: 1rem;
|
||||
letter-spacing: 0.3em; color: #F5A623;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-a .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #151515; }
|
||||
.option-a .color-row { display: flex; gap: 12px; }
|
||||
.option-a .swatch { width: 60px; height: 60px; border-radius: 8px; position: relative; }
|
||||
.option-a .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-a .typo-sample h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.8rem; color: #F5A623; }
|
||||
.option-a .typo-sample p { font-family: 'Barlow', sans-serif; color: #ccc; margin-top: 8px; line-height: 1.6; }
|
||||
.option-a .elements { display: flex; gap: 20px; flex-wrap: wrap; }
|
||||
.option-a .element-tag {
|
||||
padding: 10px 20px; border: 2px solid #F5A623; color: #F5A623;
|
||||
font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem;
|
||||
clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
|
||||
}
|
||||
.option-a .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-a .btn-primary { padding: 14px 32px; background: #F5A623; color: #000; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; }
|
||||
.option-a .btn-secondary { padding: 14px 32px; background: transparent; color: #F5A623; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: 2px solid #F5A623; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION B: TECNICO MODERNO ===== */
|
||||
.option-b { background: #ffffff; color: #1a1a2e; border: 1px solid #e0e0e0; }
|
||||
.option-b .option-label { background: #FF6B35; color: #fff; }
|
||||
.option-b .hero {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-b .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
background-image: radial-gradient(circle at 2px 2px, rgba(26,26,46,0.04) 1px, transparent 0);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
.option-b .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 1; }
|
||||
.option-b .logo-icon {
|
||||
width: 70px; height: 70px;
|
||||
position: relative;
|
||||
}
|
||||
.option-b .logo-icon svg { width: 100%; height: 100%; }
|
||||
.option-b .nexus-node { fill: #FF6B35; }
|
||||
.option-b .nexus-line { stroke: #1a1a2e; stroke-width: 2; }
|
||||
.option-b .logo-text h2 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700; font-size: 2.8rem;
|
||||
color: #1a1a2e; letter-spacing: -0.02em;
|
||||
}
|
||||
.option-b .logo-text h2 em {
|
||||
font-style: normal; color: #FF6B35;
|
||||
}
|
||||
.option-b .logo-text span {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 300; font-size: 0.95rem;
|
||||
letter-spacing: 0.25em; color: #666;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-b .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #f4f5f7; color: #1a1a2e; }
|
||||
.option-b .swatch { width: 60px; height: 60px; border-radius: 12px; }
|
||||
.option-b .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-b .color-row { display: flex; gap: 12px; }
|
||||
.option-b .typo-sample h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; color: #1a1a2e; }
|
||||
.option-b .typo-sample p { font-family: 'Montserrat', sans-serif; color: #555; margin-top: 8px; line-height: 1.6; }
|
||||
.option-b .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-b .element-tag {
|
||||
padding: 10px 20px; border-radius: 50px;
|
||||
background: #1a1a2e; color: #fff;
|
||||
font-family: 'Poppins', sans-serif; font-weight: 600;
|
||||
font-size: 0.8rem; letter-spacing: 0.05em;
|
||||
}
|
||||
.option-b .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-b .btn-primary { padding: 14px 32px; background: #FF6B35; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: none; border-radius: 8px; cursor: pointer; }
|
||||
.option-b .btn-secondary { padding: 14px 32px; background: transparent; color: #1a1a2e; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: 2px solid #1a1a2e; border-radius: 8px; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION C: PREMIUM AUTOMOTRIZ ===== */
|
||||
.option-c { background: #0a0a0a; border: 1px solid #222; }
|
||||
.option-c .option-label { background: #E63946; color: #fff; }
|
||||
.option-c .hero {
|
||||
background: linear-gradient(160deg, #0a0a0a 0%, #151515 40%, #0a0a0a 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-c .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; right: 0;
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(230,57,70,0.08) 0%, transparent 70%);
|
||||
}
|
||||
.option-c .hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px; right: 60px;
|
||||
width: 200px; height: 3px;
|
||||
background: linear-gradient(90deg, transparent, #E63946, transparent);
|
||||
}
|
||||
.option-c .logo-area { text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }
|
||||
.option-c .logo-text h2 {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 5rem; letter-spacing: 0.15em;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 60px rgba(230,57,70,0.2);
|
||||
}
|
||||
.option-c .logo-text .red { color: #E63946; }
|
||||
.option-c .logo-divider {
|
||||
width: 80px; height: 3px; background: #E63946;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.option-c .logo-text span {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 400; font-size: 1.1rem;
|
||||
letter-spacing: 0.5em; color: #888;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-c .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #0f0f0f; }
|
||||
.option-c .color-row { display: flex; gap: 12px; }
|
||||
.option-c .swatch { width: 60px; height: 60px; border-radius: 4px; border: 1px solid #333; }
|
||||
.option-c .swatch-label { font-size: 0.7rem; color: #666; margin-top: 6px; text-align: center; }
|
||||
.option-c .typo-sample h3 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #E63946; letter-spacing: 0.1em; }
|
||||
.option-c .typo-sample p { font-family: 'Oswald', sans-serif; font-weight: 400; color: #aaa; margin-top: 8px; line-height: 1.6; }
|
||||
.option-c .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-c .element-tag {
|
||||
padding: 10px 24px;
|
||||
border: 1px solid #E63946; color: #E63946;
|
||||
font-family: 'Oswald', sans-serif; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem;
|
||||
}
|
||||
.option-c .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-c .btn-primary { padding: 14px 36px; background: #E63946; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; border: none; cursor: pointer; }
|
||||
.option-c .btn-secondary { padding: 14px 36px; background: transparent; color: #ccc; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.1em; border: 1px solid #555; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION E: RETRO MODERNO ===== */
|
||||
.option-e { background: #F5F0E8; color: #2C3E50; border: 1px solid #d4c9b8; }
|
||||
.option-e .option-label { background: #1B4965; color: #F5F0E8; }
|
||||
.option-e .hero {
|
||||
background: #F5F0E8;
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.option-e .badge {
|
||||
width: 220px; height: 220px; margin: 0 auto 30px;
|
||||
border: 4px solid #1B4965;
|
||||
border-radius: 50%;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.option-e .badge::before {
|
||||
content: '★ EST. 2026 ★';
|
||||
position: absolute; top: -14px;
|
||||
background: #F5F0E8; padding: 0 15px;
|
||||
font-family: 'Work Sans', sans-serif; font-weight: 600;
|
||||
font-size: 0.7rem; letter-spacing: 0.2em; color: #C45D3E;
|
||||
}
|
||||
.option-e .badge h2 {
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
font-size: 2rem; color: #1B4965;
|
||||
text-transform: uppercase; line-height: 1;
|
||||
}
|
||||
.option-e .badge span {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300; font-size: 0.85rem;
|
||||
letter-spacing: 0.3em; color: #C45D3E;
|
||||
text-transform: uppercase; margin-top: 5px;
|
||||
}
|
||||
.option-e .tagline {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300; font-size: 1.2rem;
|
||||
color: #666; letter-spacing: 0.1em;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.option-e .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #EDE8DD; color: #2C3E50; }
|
||||
.option-e .color-row { display: flex; gap: 12px; }
|
||||
.option-e .swatch { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #d4c9b8; }
|
||||
.option-e .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-e .typo-sample h3 { font-family: 'Archivo Black', sans-serif; font-size: 1.8rem; color: #1B4965; }
|
||||
.option-e .typo-sample p { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #555; margin-top: 8px; line-height: 1.6; }
|
||||
.option-e .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-e .element-tag {
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #1B4965; color: #1B4965;
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.option-e .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-e .btn-primary { padding: 14px 32px; background: #1B4965; color: #F5F0E8; font-family: 'Archivo Black', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; border-radius: 50px; cursor: pointer; }
|
||||
.option-e .btn-secondary { padding: 14px 32px; background: transparent; color: #C45D3E; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 0.9rem; border: 2px solid #C45D3E; border-radius: 50px; cursor: pointer; }
|
||||
|
||||
/* ===== SHARED ===== */
|
||||
.section-title { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; opacity: 0.5; }
|
||||
.mini-landing { padding: 40px 60px; }
|
||||
.mini-landing h3 { margin-bottom: 15px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.option-a .hero, .option-b .hero, .option-c .hero, .option-e .hero,
|
||||
.option-a .brand-board, .option-b .brand-board, .option-c .brand-board, .option-e .brand-board { padding: 40px 20px; }
|
||||
.option-c .logo-text h2 { font-size: 3rem; }
|
||||
.option-a .logo-text h2 { font-size: 2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin:0; padding:20px; background:#111;">
|
||||
<div class="option option-b">
|
||||
<div class="option-label">Opción B — Técnico Moderno</div>
|
||||
<div class="hero">
|
||||
<div class="logo-area">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 70 70">
|
||||
<circle cx="35" cy="20" r="6" class="nexus-node"/>
|
||||
<circle cx="15" cy="50" r="5" class="nexus-node"/>
|
||||
<circle cx="55" cy="50" r="5" class="nexus-node"/>
|
||||
<circle cx="35" cy="55" r="4" class="nexus-node"/>
|
||||
<line x1="35" y1="20" x2="15" y2="50" class="nexus-line"/>
|
||||
<line x1="35" y1="20" x2="55" y2="50" class="nexus-line"/>
|
||||
<line x1="15" y1="50" x2="55" y2="50" class="nexus-line"/>
|
||||
<line x1="35" y1="20" x2="35" y2="55" class="nexus-line"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="logo-text">
|
||||
<h2><em>Nexus</em> Autoparts</h2>
|
||||
<span>Conectando piezas, moviendo industrias</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color:#555; font-family:'Montserrat',sans-serif; font-size:1.05rem; max-width:520px; line-height:1.7; position:relative; z-index:1;">
|
||||
La plataforma inteligente para encontrar la refacción exacta. Más de 1.4 millones de partes a tu alcance.
|
||||
</p>
|
||||
<div class="mock-buttons">
|
||||
<button class="btn-primary">Buscar Refacciones</button>
|
||||
<button class="btn-secondary">Explorar Catálogo</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-board">
|
||||
<div>
|
||||
<div class="section-title" style="color:#999;">Paleta de Colores</div>
|
||||
<div class="color-row">
|
||||
<div>
|
||||
<div class="swatch" style="background:#1a1a2e;"></div>
|
||||
<div class="swatch-label">Azul Noche<br>#1A1A2E</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#FF6B35;"></div>
|
||||
<div class="swatch-label">Naranja<br>#FF6B35</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#f4f5f7; border:1px solid #ddd;"></div>
|
||||
<div class="swatch-label">Gris Claro<br>#F4F5F7</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#ffffff; border:1px solid #ddd;"></div>
|
||||
<div class="swatch-label">Blanco<br>#FFFFFF</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo-sample">
|
||||
<div class="section-title" style="color:#999;">Tipografía</div>
|
||||
<h3>Poppins Bold</h3>
|
||||
<p>Montserrat para cuerpo. Moderna, geométrica, tech-friendly.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-title" style="color:#999;">Elementos Visuales</div>
|
||||
<div class="elements">
|
||||
<div class="element-tag">Nodos de Red</div>
|
||||
<div class="element-tag">Grid Punteado</div>
|
||||
<div class="element-tag">Bordes Redondeados</div>
|
||||
<div class="element-tag">Gradientes Sutiles</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== OPCION C: PREMIUM AUTOMOTRIZ ===== -->
|
||||
</body></html>
|
||||
318
branding/option-c.html
Normal file
318
branding/option-c.html
Normal file
@@ -0,0 +1,318 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nexus Autoparts - Opciones de Branding</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800&family=Barlow:wght@400;700&family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;700&family=Bebas+Neue&family=Oswald:wght@400;600;700&family=Archivo+Black&family=Work+Sans:wght@300;400;600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Inter', sans-serif; background: #111; color: #fff; }
|
||||
.header { text-align: center; padding: 60px 20px 40px; }
|
||||
.header h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 0.1em; }
|
||||
.header p { color: #888; margin-top: 10px; font-size: 1.1rem; }
|
||||
.options { max-width: 1400px; margin: 0 auto; padding: 0 20px 60px; }
|
||||
|
||||
/* ===== OPTION CARD ===== */
|
||||
.option { margin-bottom: 80px; border-radius: 20px; overflow: hidden; }
|
||||
.option-label { padding: 12px 24px; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; }
|
||||
|
||||
/* ===== OPTION A: INDUSTRIAL ROBUSTO ===== */
|
||||
.option-a { background: #1a1a1a; border: 1px solid #333; }
|
||||
.option-a .option-label { background: #F5A623; color: #000; }
|
||||
.option-a .hero {
|
||||
background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #252525 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-a .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50px; right: -50px;
|
||||
width: 300px; height: 300px;
|
||||
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(245,166,35,0.05) 10px, rgba(245,166,35,0.05) 20px);
|
||||
}
|
||||
.option-a .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
|
||||
.option-a .logo-icon {
|
||||
width: 80px; height: 80px;
|
||||
background: #F5A623;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 800; font-size: 2.5rem; color: #000;
|
||||
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
|
||||
}
|
||||
.option-a .logo-text h2 {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 800; font-size: 3rem;
|
||||
letter-spacing: 0.05em; color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-a .logo-text span {
|
||||
font-family: 'Barlow', sans-serif;
|
||||
font-weight: 400; font-size: 1rem;
|
||||
letter-spacing: 0.3em; color: #F5A623;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-a .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #151515; }
|
||||
.option-a .color-row { display: flex; gap: 12px; }
|
||||
.option-a .swatch { width: 60px; height: 60px; border-radius: 8px; position: relative; }
|
||||
.option-a .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-a .typo-sample h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.8rem; color: #F5A623; }
|
||||
.option-a .typo-sample p { font-family: 'Barlow', sans-serif; color: #ccc; margin-top: 8px; line-height: 1.6; }
|
||||
.option-a .elements { display: flex; gap: 20px; flex-wrap: wrap; }
|
||||
.option-a .element-tag {
|
||||
padding: 10px 20px; border: 2px solid #F5A623; color: #F5A623;
|
||||
font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem;
|
||||
clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
|
||||
}
|
||||
.option-a .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-a .btn-primary { padding: 14px 32px; background: #F5A623; color: #000; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; }
|
||||
.option-a .btn-secondary { padding: 14px 32px; background: transparent; color: #F5A623; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: 2px solid #F5A623; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION B: TECNICO MODERNO ===== */
|
||||
.option-b { background: #ffffff; color: #1a1a2e; border: 1px solid #e0e0e0; }
|
||||
.option-b .option-label { background: #FF6B35; color: #fff; }
|
||||
.option-b .hero {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-b .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
background-image: radial-gradient(circle at 2px 2px, rgba(26,26,46,0.04) 1px, transparent 0);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
.option-b .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 1; }
|
||||
.option-b .logo-icon {
|
||||
width: 70px; height: 70px;
|
||||
position: relative;
|
||||
}
|
||||
.option-b .logo-icon svg { width: 100%; height: 100%; }
|
||||
.option-b .nexus-node { fill: #FF6B35; }
|
||||
.option-b .nexus-line { stroke: #1a1a2e; stroke-width: 2; }
|
||||
.option-b .logo-text h2 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700; font-size: 2.8rem;
|
||||
color: #1a1a2e; letter-spacing: -0.02em;
|
||||
}
|
||||
.option-b .logo-text h2 em {
|
||||
font-style: normal; color: #FF6B35;
|
||||
}
|
||||
.option-b .logo-text span {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 300; font-size: 0.95rem;
|
||||
letter-spacing: 0.25em; color: #666;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-b .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #f4f5f7; color: #1a1a2e; }
|
||||
.option-b .swatch { width: 60px; height: 60px; border-radius: 12px; }
|
||||
.option-b .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-b .color-row { display: flex; gap: 12px; }
|
||||
.option-b .typo-sample h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; color: #1a1a2e; }
|
||||
.option-b .typo-sample p { font-family: 'Montserrat', sans-serif; color: #555; margin-top: 8px; line-height: 1.6; }
|
||||
.option-b .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-b .element-tag {
|
||||
padding: 10px 20px; border-radius: 50px;
|
||||
background: #1a1a2e; color: #fff;
|
||||
font-family: 'Poppins', sans-serif; font-weight: 600;
|
||||
font-size: 0.8rem; letter-spacing: 0.05em;
|
||||
}
|
||||
.option-b .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-b .btn-primary { padding: 14px 32px; background: #FF6B35; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: none; border-radius: 8px; cursor: pointer; }
|
||||
.option-b .btn-secondary { padding: 14px 32px; background: transparent; color: #1a1a2e; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: 2px solid #1a1a2e; border-radius: 8px; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION C: PREMIUM AUTOMOTRIZ ===== */
|
||||
.option-c { background: #0a0a0a; border: 1px solid #222; }
|
||||
.option-c .option-label { background: #E63946; color: #fff; }
|
||||
.option-c .hero {
|
||||
background: linear-gradient(160deg, #0a0a0a 0%, #151515 40%, #0a0a0a 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-c .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; right: 0;
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(230,57,70,0.08) 0%, transparent 70%);
|
||||
}
|
||||
.option-c .hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px; right: 60px;
|
||||
width: 200px; height: 3px;
|
||||
background: linear-gradient(90deg, transparent, #E63946, transparent);
|
||||
}
|
||||
.option-c .logo-area { text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }
|
||||
.option-c .logo-text h2 {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 5rem; letter-spacing: 0.15em;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 60px rgba(230,57,70,0.2);
|
||||
}
|
||||
.option-c .logo-text .red { color: #E63946; }
|
||||
.option-c .logo-divider {
|
||||
width: 80px; height: 3px; background: #E63946;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.option-c .logo-text span {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 400; font-size: 1.1rem;
|
||||
letter-spacing: 0.5em; color: #888;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-c .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #0f0f0f; }
|
||||
.option-c .color-row { display: flex; gap: 12px; }
|
||||
.option-c .swatch { width: 60px; height: 60px; border-radius: 4px; border: 1px solid #333; }
|
||||
.option-c .swatch-label { font-size: 0.7rem; color: #666; margin-top: 6px; text-align: center; }
|
||||
.option-c .typo-sample h3 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #E63946; letter-spacing: 0.1em; }
|
||||
.option-c .typo-sample p { font-family: 'Oswald', sans-serif; font-weight: 400; color: #aaa; margin-top: 8px; line-height: 1.6; }
|
||||
.option-c .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-c .element-tag {
|
||||
padding: 10px 24px;
|
||||
border: 1px solid #E63946; color: #E63946;
|
||||
font-family: 'Oswald', sans-serif; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem;
|
||||
}
|
||||
.option-c .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-c .btn-primary { padding: 14px 36px; background: #E63946; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; border: none; cursor: pointer; }
|
||||
.option-c .btn-secondary { padding: 14px 36px; background: transparent; color: #ccc; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.1em; border: 1px solid #555; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION E: RETRO MODERNO ===== */
|
||||
.option-e { background: #F5F0E8; color: #2C3E50; border: 1px solid #d4c9b8; }
|
||||
.option-e .option-label { background: #1B4965; color: #F5F0E8; }
|
||||
.option-e .hero {
|
||||
background: #F5F0E8;
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.option-e .badge {
|
||||
width: 220px; height: 220px; margin: 0 auto 30px;
|
||||
border: 4px solid #1B4965;
|
||||
border-radius: 50%;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.option-e .badge::before {
|
||||
content: '★ EST. 2026 ★';
|
||||
position: absolute; top: -14px;
|
||||
background: #F5F0E8; padding: 0 15px;
|
||||
font-family: 'Work Sans', sans-serif; font-weight: 600;
|
||||
font-size: 0.7rem; letter-spacing: 0.2em; color: #C45D3E;
|
||||
}
|
||||
.option-e .badge h2 {
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
font-size: 2rem; color: #1B4965;
|
||||
text-transform: uppercase; line-height: 1;
|
||||
}
|
||||
.option-e .badge span {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300; font-size: 0.85rem;
|
||||
letter-spacing: 0.3em; color: #C45D3E;
|
||||
text-transform: uppercase; margin-top: 5px;
|
||||
}
|
||||
.option-e .tagline {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300; font-size: 1.2rem;
|
||||
color: #666; letter-spacing: 0.1em;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.option-e .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #EDE8DD; color: #2C3E50; }
|
||||
.option-e .color-row { display: flex; gap: 12px; }
|
||||
.option-e .swatch { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #d4c9b8; }
|
||||
.option-e .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-e .typo-sample h3 { font-family: 'Archivo Black', sans-serif; font-size: 1.8rem; color: #1B4965; }
|
||||
.option-e .typo-sample p { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #555; margin-top: 8px; line-height: 1.6; }
|
||||
.option-e .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-e .element-tag {
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #1B4965; color: #1B4965;
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.option-e .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-e .btn-primary { padding: 14px 32px; background: #1B4965; color: #F5F0E8; font-family: 'Archivo Black', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; border-radius: 50px; cursor: pointer; }
|
||||
.option-e .btn-secondary { padding: 14px 32px; background: transparent; color: #C45D3E; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 0.9rem; border: 2px solid #C45D3E; border-radius: 50px; cursor: pointer; }
|
||||
|
||||
/* ===== SHARED ===== */
|
||||
.section-title { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; opacity: 0.5; }
|
||||
.mini-landing { padding: 40px 60px; }
|
||||
.mini-landing h3 { margin-bottom: 15px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.option-a .hero, .option-b .hero, .option-c .hero, .option-e .hero,
|
||||
.option-a .brand-board, .option-b .brand-board, .option-c .brand-board, .option-e .brand-board { padding: 40px 20px; }
|
||||
.option-c .logo-text h2 { font-size: 3rem; }
|
||||
.option-a .logo-text h2 { font-size: 2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin:0; padding:20px; background:#111;">
|
||||
<div class="option option-c">
|
||||
<div class="option-label">Opción C — Premium Automotriz</div>
|
||||
<div class="hero">
|
||||
<div class="logo-area">
|
||||
<div class="logo-text">
|
||||
<h2>NEXUS <span class="red">AUTO</span>PARTS</h2>
|
||||
<div class="logo-divider"></div>
|
||||
<span>Performance • Calidad • Precisión</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color:#666; font-family:'Oswald',sans-serif; font-weight:400; font-size:1rem; max-width:500px; margin:0 auto; line-height:1.7; text-align:center;">
|
||||
Refacciones de alto rendimiento para profesionales que exigen lo mejor.
|
||||
</p>
|
||||
<div class="mock-buttons" style="justify-content:center;">
|
||||
<button class="btn-primary">BUSCAR PIEZAS</button>
|
||||
<button class="btn-secondary">CATÁLOGO COMPLETO</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-board">
|
||||
<div>
|
||||
<div class="section-title">Paleta de Colores</div>
|
||||
<div class="color-row">
|
||||
<div>
|
||||
<div class="swatch" style="background:#0a0a0a;"></div>
|
||||
<div class="swatch-label">Negro Mate<br>#0A0A0A</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#E63946;"></div>
|
||||
<div class="swatch-label">Rojo Racing<br>#E63946</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:linear-gradient(135deg,#888,#ccc);"></div>
|
||||
<div class="swatch-label">Plata<br>#B8B8B8</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#1a1a1a; border:1px solid #333;"></div>
|
||||
<div class="swatch-label">Grafito<br>#1A1A1A</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo-sample">
|
||||
<div class="section-title">Tipografía</div>
|
||||
<h3>BEBAS NEUE</h3>
|
||||
<p>Oswald para cuerpo. Elegante, racing, premium.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-title">Elementos Visuales</div>
|
||||
<div class="elements">
|
||||
<div class="element-tag">Líneas Speed</div>
|
||||
<div class="element-tag">Acentos Rojos</div>
|
||||
<div class="element-tag">Degradados Oscuros</div>
|
||||
<div class="element-tag">Bandera Racing</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== OPCION E: RETRO MODERNO ===== -->
|
||||
</body></html>
|
||||
313
branding/option-e.html
Normal file
313
branding/option-e.html
Normal file
@@ -0,0 +1,313 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nexus Autoparts - Opciones de Branding</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800&family=Barlow:wght@400;700&family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;700&family=Bebas+Neue&family=Oswald:wght@400;600;700&family=Archivo+Black&family=Work+Sans:wght@300;400;600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Inter', sans-serif; background: #111; color: #fff; }
|
||||
.header { text-align: center; padding: 60px 20px 40px; }
|
||||
.header h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 0.1em; }
|
||||
.header p { color: #888; margin-top: 10px; font-size: 1.1rem; }
|
||||
.options { max-width: 1400px; margin: 0 auto; padding: 0 20px 60px; }
|
||||
|
||||
/* ===== OPTION CARD ===== */
|
||||
.option { margin-bottom: 80px; border-radius: 20px; overflow: hidden; }
|
||||
.option-label { padding: 12px 24px; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; }
|
||||
|
||||
/* ===== OPTION A: INDUSTRIAL ROBUSTO ===== */
|
||||
.option-a { background: #1a1a1a; border: 1px solid #333; }
|
||||
.option-a .option-label { background: #F5A623; color: #000; }
|
||||
.option-a .hero {
|
||||
background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #252525 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-a .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50px; right: -50px;
|
||||
width: 300px; height: 300px;
|
||||
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(245,166,35,0.05) 10px, rgba(245,166,35,0.05) 20px);
|
||||
}
|
||||
.option-a .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
|
||||
.option-a .logo-icon {
|
||||
width: 80px; height: 80px;
|
||||
background: #F5A623;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 800; font-size: 2.5rem; color: #000;
|
||||
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
|
||||
}
|
||||
.option-a .logo-text h2 {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 800; font-size: 3rem;
|
||||
letter-spacing: 0.05em; color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-a .logo-text span {
|
||||
font-family: 'Barlow', sans-serif;
|
||||
font-weight: 400; font-size: 1rem;
|
||||
letter-spacing: 0.3em; color: #F5A623;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-a .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #151515; }
|
||||
.option-a .color-row { display: flex; gap: 12px; }
|
||||
.option-a .swatch { width: 60px; height: 60px; border-radius: 8px; position: relative; }
|
||||
.option-a .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-a .typo-sample h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.8rem; color: #F5A623; }
|
||||
.option-a .typo-sample p { font-family: 'Barlow', sans-serif; color: #ccc; margin-top: 8px; line-height: 1.6; }
|
||||
.option-a .elements { display: flex; gap: 20px; flex-wrap: wrap; }
|
||||
.option-a .element-tag {
|
||||
padding: 10px 20px; border: 2px solid #F5A623; color: #F5A623;
|
||||
font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem;
|
||||
clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
|
||||
}
|
||||
.option-a .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-a .btn-primary { padding: 14px 32px; background: #F5A623; color: #000; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; }
|
||||
.option-a .btn-secondary { padding: 14px 32px; background: transparent; color: #F5A623; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; border: 2px solid #F5A623; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION B: TECNICO MODERNO ===== */
|
||||
.option-b { background: #ffffff; color: #1a1a2e; border: 1px solid #e0e0e0; }
|
||||
.option-b .option-label { background: #FF6B35; color: #fff; }
|
||||
.option-b .hero {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-b .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
background-image: radial-gradient(circle at 2px 2px, rgba(26,26,46,0.04) 1px, transparent 0);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
.option-b .logo-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 1; }
|
||||
.option-b .logo-icon {
|
||||
width: 70px; height: 70px;
|
||||
position: relative;
|
||||
}
|
||||
.option-b .logo-icon svg { width: 100%; height: 100%; }
|
||||
.option-b .nexus-node { fill: #FF6B35; }
|
||||
.option-b .nexus-line { stroke: #1a1a2e; stroke-width: 2; }
|
||||
.option-b .logo-text h2 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700; font-size: 2.8rem;
|
||||
color: #1a1a2e; letter-spacing: -0.02em;
|
||||
}
|
||||
.option-b .logo-text h2 em {
|
||||
font-style: normal; color: #FF6B35;
|
||||
}
|
||||
.option-b .logo-text span {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 300; font-size: 0.95rem;
|
||||
letter-spacing: 0.25em; color: #666;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-b .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #f4f5f7; color: #1a1a2e; }
|
||||
.option-b .swatch { width: 60px; height: 60px; border-radius: 12px; }
|
||||
.option-b .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-b .color-row { display: flex; gap: 12px; }
|
||||
.option-b .typo-sample h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; color: #1a1a2e; }
|
||||
.option-b .typo-sample p { font-family: 'Montserrat', sans-serif; color: #555; margin-top: 8px; line-height: 1.6; }
|
||||
.option-b .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-b .element-tag {
|
||||
padding: 10px 20px; border-radius: 50px;
|
||||
background: #1a1a2e; color: #fff;
|
||||
font-family: 'Poppins', sans-serif; font-weight: 600;
|
||||
font-size: 0.8rem; letter-spacing: 0.05em;
|
||||
}
|
||||
.option-b .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-b .btn-primary { padding: 14px 32px; background: #FF6B35; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: none; border-radius: 8px; cursor: pointer; }
|
||||
.option-b .btn-secondary { padding: 14px 32px; background: transparent; color: #1a1a2e; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; border: 2px solid #1a1a2e; border-radius: 8px; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION C: PREMIUM AUTOMOTRIZ ===== */
|
||||
.option-c { background: #0a0a0a; border: 1px solid #222; }
|
||||
.option-c .option-label { background: #E63946; color: #fff; }
|
||||
.option-c .hero {
|
||||
background: linear-gradient(160deg, #0a0a0a 0%, #151515 40%, #0a0a0a 100%);
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.option-c .hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; right: 0;
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(230,57,70,0.08) 0%, transparent 70%);
|
||||
}
|
||||
.option-c .hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px; right: 60px;
|
||||
width: 200px; height: 3px;
|
||||
background: linear-gradient(90deg, transparent, #E63946, transparent);
|
||||
}
|
||||
.option-c .logo-area { text-align: center; margin-bottom: 40px; position: relative; z-index: 1; }
|
||||
.option-c .logo-text h2 {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 5rem; letter-spacing: 0.15em;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 60px rgba(230,57,70,0.2);
|
||||
}
|
||||
.option-c .logo-text .red { color: #E63946; }
|
||||
.option-c .logo-divider {
|
||||
width: 80px; height: 3px; background: #E63946;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.option-c .logo-text span {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 400; font-size: 1.1rem;
|
||||
letter-spacing: 0.5em; color: #888;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.option-c .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #0f0f0f; }
|
||||
.option-c .color-row { display: flex; gap: 12px; }
|
||||
.option-c .swatch { width: 60px; height: 60px; border-radius: 4px; border: 1px solid #333; }
|
||||
.option-c .swatch-label { font-size: 0.7rem; color: #666; margin-top: 6px; text-align: center; }
|
||||
.option-c .typo-sample h3 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #E63946; letter-spacing: 0.1em; }
|
||||
.option-c .typo-sample p { font-family: 'Oswald', sans-serif; font-weight: 400; color: #aaa; margin-top: 8px; line-height: 1.6; }
|
||||
.option-c .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-c .element-tag {
|
||||
padding: 10px 24px;
|
||||
border: 1px solid #E63946; color: #E63946;
|
||||
font-family: 'Oswald', sans-serif; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem;
|
||||
}
|
||||
.option-c .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-c .btn-primary { padding: 14px 36px; background: #E63946; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; border: none; cursor: pointer; }
|
||||
.option-c .btn-secondary { padding: 14px 36px; background: transparent; color: #ccc; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.1em; border: 1px solid #555; cursor: pointer; }
|
||||
|
||||
/* ===== OPTION E: RETRO MODERNO ===== */
|
||||
.option-e { background: #F5F0E8; color: #2C3E50; border: 1px solid #d4c9b8; }
|
||||
.option-e .option-label { background: #1B4965; color: #F5F0E8; }
|
||||
.option-e .hero {
|
||||
background: #F5F0E8;
|
||||
padding: 80px 60px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.option-e .badge {
|
||||
width: 220px; height: 220px; margin: 0 auto 30px;
|
||||
border: 4px solid #1B4965;
|
||||
border-radius: 50%;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.option-e .badge::before {
|
||||
content: '★ EST. 2026 ★';
|
||||
position: absolute; top: -14px;
|
||||
background: #F5F0E8; padding: 0 15px;
|
||||
font-family: 'Work Sans', sans-serif; font-weight: 600;
|
||||
font-size: 0.7rem; letter-spacing: 0.2em; color: #C45D3E;
|
||||
}
|
||||
.option-e .badge h2 {
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
font-size: 2rem; color: #1B4965;
|
||||
text-transform: uppercase; line-height: 1;
|
||||
}
|
||||
.option-e .badge span {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300; font-size: 0.85rem;
|
||||
letter-spacing: 0.3em; color: #C45D3E;
|
||||
text-transform: uppercase; margin-top: 5px;
|
||||
}
|
||||
.option-e .tagline {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-weight: 300; font-size: 1.2rem;
|
||||
color: #666; letter-spacing: 0.1em;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.option-e .brand-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 60px; background: #EDE8DD; color: #2C3E50; }
|
||||
.option-e .color-row { display: flex; gap: 12px; }
|
||||
.option-e .swatch { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #d4c9b8; }
|
||||
.option-e .swatch-label { font-size: 0.7rem; color: #888; margin-top: 6px; text-align: center; }
|
||||
.option-e .typo-sample h3 { font-family: 'Archivo Black', sans-serif; font-size: 1.8rem; color: #1B4965; }
|
||||
.option-e .typo-sample p { font-family: 'Work Sans', sans-serif; font-weight: 300; color: #555; margin-top: 8px; line-height: 1.6; }
|
||||
.option-e .elements { display: flex; gap: 15px; flex-wrap: wrap; }
|
||||
.option-e .element-tag {
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #1B4965; color: #1B4965;
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.option-e .mock-buttons { display: flex; gap: 15px; margin-top: 20px; }
|
||||
.option-e .btn-primary { padding: 14px 32px; background: #1B4965; color: #F5F0E8; font-family: 'Archivo Black', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; border: none; border-radius: 50px; cursor: pointer; }
|
||||
.option-e .btn-secondary { padding: 14px 32px; background: transparent; color: #C45D3E; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 0.9rem; border: 2px solid #C45D3E; border-radius: 50px; cursor: pointer; }
|
||||
|
||||
/* ===== SHARED ===== */
|
||||
.section-title { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; opacity: 0.5; }
|
||||
.mini-landing { padding: 40px 60px; }
|
||||
.mini-landing h3 { margin-bottom: 15px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.option-a .hero, .option-b .hero, .option-c .hero, .option-e .hero,
|
||||
.option-a .brand-board, .option-b .brand-board, .option-c .brand-board, .option-e .brand-board { padding: 40px 20px; }
|
||||
.option-c .logo-text h2 { font-size: 3rem; }
|
||||
.option-a .logo-text h2 { font-size: 2rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin:0; padding:20px; background:#111;">
|
||||
<div class="option option-e">
|
||||
<div class="option-label">Opción E — Mecánico Retro-Moderno</div>
|
||||
<div class="hero">
|
||||
<div class="badge">
|
||||
<h2>NEXUS</h2>
|
||||
<span>AUTOPARTS</span>
|
||||
</div>
|
||||
<p class="tagline">“Refacciones con garantía, servicio con experiencia”</p>
|
||||
<div class="mock-buttons" style="justify-content:center; margin-top:30px;">
|
||||
<button class="btn-primary">Buscar Refacciones</button>
|
||||
<button class="btn-secondary">Ver Catálogo</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-board">
|
||||
<div>
|
||||
<div class="section-title" style="color:#999;">Paleta de Colores</div>
|
||||
<div class="color-row">
|
||||
<div>
|
||||
<div class="swatch" style="background:#1B4965;"></div>
|
||||
<div class="swatch-label">Petróleo<br>#1B4965</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#C45D3E;"></div>
|
||||
<div class="swatch-label">Óxido<br>#C45D3E</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#F5F0E8;"></div>
|
||||
<div class="swatch-label">Crema<br>#F5F0E8</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="swatch" style="background:#2C3E50;"></div>
|
||||
<div class="swatch-label">Carbón<br>#2C3E50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typo-sample">
|
||||
<div class="section-title" style="color:#999;">Tipografía</div>
|
||||
<h3>Archivo Black</h3>
|
||||
<p>Work Sans Light para cuerpo. Clásica pero fresca, con personalidad.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-title" style="color:#999;">Elementos Visuales</div>
|
||||
<div class="elements">
|
||||
<div class="element-tag">Badges Circulares</div>
|
||||
<div class="element-tag">Sellos de Calidad</div>
|
||||
<div class="element-tag">Bordes Redondeados</div>
|
||||
<div class="element-tag">Texturas Vintage</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body></html>
|
||||
1594
design-system/index.html
Normal file
1594
design-system/index.html
Normal file
File diff suppressed because it is too large
Load Diff
220
design-system/tokens.css
Normal file
220
design-system/tokens.css
Normal file
@@ -0,0 +1,220 @@
|
||||
/* ============================================
|
||||
NEXUS AUTOPARTS — Design Tokens
|
||||
Dual Theme: Industrial (A) & Modern (B)
|
||||
============================================ */
|
||||
|
||||
/* ---- Base Reset ---- */
|
||||
:root {
|
||||
--base-unit: 4px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Spacing scale (4px grid) */
|
||||
--space-0: 0;
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
--space-20: 80px;
|
||||
--space-24: 96px;
|
||||
|
||||
/* Breakpoints (reference only — use in media queries) */
|
||||
/* --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; */
|
||||
|
||||
/* Transition */
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-base: 250ms ease;
|
||||
--transition-slow: 400ms ease;
|
||||
|
||||
/* Z-index scale */
|
||||
--z-dropdown: 100;
|
||||
--z-sticky: 200;
|
||||
--z-modal-backdrop: 300;
|
||||
--z-modal: 400;
|
||||
--z-toast: 500;
|
||||
--z-tooltip: 600;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TEMA A — Industrial Robusto (Dark)
|
||||
============================================ */
|
||||
[data-theme="industrial"], :root {
|
||||
/* --- Surfaces --- */
|
||||
--color-bg-primary: #0d0d0d;
|
||||
--color-bg-secondary: #1a1a1a;
|
||||
--color-bg-tertiary: #252525;
|
||||
--color-bg-elevated: #2e2e2e;
|
||||
--color-bg-hover: #333333;
|
||||
--color-bg-input: #1a1a1a;
|
||||
--color-bg-card: #1a1a1a;
|
||||
|
||||
/* --- Accent --- */
|
||||
--color-accent: #F5A623;
|
||||
--color-accent-hover: #FFB84D;
|
||||
--color-accent-active: #D4900E;
|
||||
--color-accent-subtle: rgba(245, 166, 35, 0.12);
|
||||
--color-accent-muted: rgba(245, 166, 35, 0.25);
|
||||
|
||||
/* --- Text --- */
|
||||
--color-text-primary: #FFFFFF;
|
||||
--color-text-secondary: #CCCCCC;
|
||||
--color-text-tertiary: #888888;
|
||||
--color-text-disabled: #555555;
|
||||
--color-text-on-accent: #000000;
|
||||
--color-text-link: #F5A623;
|
||||
|
||||
/* --- Borders --- */
|
||||
--color-border: #333333;
|
||||
--color-border-hover: #444444;
|
||||
--color-border-focus: #F5A623;
|
||||
--color-border-input: #404040;
|
||||
|
||||
/* --- Semantic --- */
|
||||
--color-success: #34D399;
|
||||
--color-success-bg: rgba(52, 211, 153, 0.12);
|
||||
--color-warning: #FBBF24;
|
||||
--color-warning-bg: rgba(251, 191, 36, 0.12);
|
||||
--color-error: #EF4444;
|
||||
--color-error-bg: rgba(239, 68, 68, 0.12);
|
||||
--color-info: #60A5FA;
|
||||
--color-info-bg: rgba(96, 165, 250, 0.12);
|
||||
|
||||
/* --- Shadows (dark theme = subtle glow) --- */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
|
||||
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
|
||||
--shadow-accent: 0 0 20px rgba(245, 166, 35, 0.15);
|
||||
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* --- Typography --- */
|
||||
--font-heading: 'Barlow Condensed', sans-serif;
|
||||
--font-body: 'Barlow', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
--font-weight-light: 300;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extrabold: 800;
|
||||
|
||||
/* Heading weights (Barlow Condensed) */
|
||||
--heading-weight: 800;
|
||||
--heading-weight-sub: 600;
|
||||
|
||||
/* Type scale */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
--text-6xl: 3.75rem; /* 60px */
|
||||
|
||||
--leading-tight: 1.15;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.75;
|
||||
|
||||
--tracking-tight: -0.02em;
|
||||
--tracking-normal: 0;
|
||||
--tracking-wide: 0.05em;
|
||||
--tracking-wider: 0.1em;
|
||||
|
||||
/* --- Component-specific --- */
|
||||
--header-height: 64px;
|
||||
--sidebar-width: 260px;
|
||||
--sidebar-collapsed: 72px;
|
||||
--input-height-sm: 32px;
|
||||
--input-height-md: 40px;
|
||||
--input-height-lg: 48px;
|
||||
|
||||
/* --- Radius (Industrial = sharper) --- */
|
||||
--component-radius: var(--radius-sm);
|
||||
--card-radius: var(--radius-md);
|
||||
--button-radius: var(--radius-sm);
|
||||
--input-radius: var(--radius-sm);
|
||||
--badge-radius: var(--radius-sm);
|
||||
--modal-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TEMA B — Tecnico Moderno (Light)
|
||||
============================================ */
|
||||
[data-theme="modern"] {
|
||||
/* --- Surfaces --- */
|
||||
--color-bg-primary: #FFFFFF;
|
||||
--color-bg-secondary: #F8F9FF;
|
||||
--color-bg-tertiary: #F0F1F8;
|
||||
--color-bg-elevated: #FFFFFF;
|
||||
--color-bg-hover: #EDEEF6;
|
||||
--color-bg-input: #FFFFFF;
|
||||
--color-bg-card: #FFFFFF;
|
||||
|
||||
/* --- Accent --- */
|
||||
--color-accent: #FF6B35;
|
||||
--color-accent-hover: #FF8555;
|
||||
--color-accent-active: #E55A25;
|
||||
--color-accent-subtle: rgba(255, 107, 53, 0.08);
|
||||
--color-accent-muted: rgba(255, 107, 53, 0.18);
|
||||
|
||||
/* --- Text --- */
|
||||
--color-text-primary: #1a1a2e;
|
||||
--color-text-secondary: #4a4a6a;
|
||||
--color-text-tertiary: #8888a8;
|
||||
--color-text-disabled: #bbbbcc;
|
||||
--color-text-on-accent: #FFFFFF;
|
||||
--color-text-link: #FF6B35;
|
||||
|
||||
/* --- Borders --- */
|
||||
--color-border: #E2E3EE;
|
||||
--color-border-hover: #C8C9D8;
|
||||
--color-border-focus: #FF6B35;
|
||||
--color-border-input: #D0D1DE;
|
||||
|
||||
/* --- Semantic --- */
|
||||
--color-success: #10B981;
|
||||
--color-success-bg: rgba(16, 185, 129, 0.08);
|
||||
--color-warning: #F59E0B;
|
||||
--color-warning-bg: rgba(245, 158, 11, 0.08);
|
||||
--color-error: #EF4444;
|
||||
--color-error-bg: rgba(239, 68, 68, 0.08);
|
||||
--color-info: #3B82F6;
|
||||
--color-info-bg: rgba(59, 130, 246, 0.08);
|
||||
|
||||
/* --- Shadows --- */
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
|
||||
--shadow-accent: 0 4px 16px rgba(255, 107, 53, 0.2);
|
||||
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* --- Typography --- */
|
||||
--font-heading: 'Poppins', sans-serif;
|
||||
--font-body: 'Poppins', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
--heading-weight: 700;
|
||||
--heading-weight-sub: 600;
|
||||
|
||||
/* --- Radius (Modern = rounder) --- */
|
||||
--component-radius: var(--radius-md);
|
||||
--card-radius: var(--radius-lg);
|
||||
--button-radius: var(--radius-md);
|
||||
--input-radius: var(--radius-md);
|
||||
--badge-radius: var(--radius-full);
|
||||
--modal-radius: var(--radius-xl);
|
||||
}
|
||||
117
nexus-autoparts-design-brief.md
Normal file
117
nexus-autoparts-design-brief.md
Normal file
@@ -0,0 +1,117 @@
|
||||
# Brief: Design System - Nexus Autoparts
|
||||
|
||||
**Fecha:** 2026-03-31
|
||||
**Cliente:** Iván Alcaraz Salazar
|
||||
**Proyecto:** Nexus Autoparts - Sistema POS para refaccionarias
|
||||
|
||||
---
|
||||
|
||||
## Objetivo
|
||||
|
||||
Crear el **Design System completo** para Nexus Autoparts con **selector de 2 temas** (Tema A y Tema B). El design system será la base para las 10 pantallas de la aplicación POS.
|
||||
|
||||
---
|
||||
|
||||
## Tema A — Industrial Robusto (Dark)
|
||||
|
||||
- **Fondo principal:** `#0d0d0d` / `#1a1a1a` / `#252525`
|
||||
- **Color accent:** `#F5A623` (amber/dorado)
|
||||
- **Texto primario:** `#FFFFFF`
|
||||
- **Texto secundario:** `#888888` / `#CCCCCC`
|
||||
- **Bordes:** `#333333`
|
||||
- **Tipografía títulos:** Barlow Condensed (800, 600)
|
||||
- **Tipografía body:** Barlow (400, 700)
|
||||
- **Estilo:** Industrial, robusto, dark mode, formas con clip-path diagonal
|
||||
- **Botón primario:** Fondo `#F5A623`, texto `#000`
|
||||
- **Botón secundario:** Borde `#F5A623`, texto `#F5A623`, fondo transparente
|
||||
- **Referencia visual:** `/root/.openclaw/workspace-hugo/nexus-branding/opciones-branding.html` (sección option-a)
|
||||
|
||||
## Tema B — Técnico Moderno (Light)
|
||||
|
||||
- **Fondo principal:** `#FFFFFF` / `#F8F9FF`
|
||||
- **Color accent:** `#FF6B35` (naranja)
|
||||
- **Texto primario:** `#1a1a2e`
|
||||
- **Tipografía:** Poppins (300, 400, 600, 700)
|
||||
- **Estilo:** Limpio, moderno, light mode, puntos grid sutiles como patrón
|
||||
- **Referencia visual:** `/root/.openclaw/workspace-hugo/nexus-branding/opciones-branding.html` (sección option-b)
|
||||
|
||||
## Implementación de temas
|
||||
|
||||
- Usar **CSS custom properties** con `data-theme="industrial"` y `data-theme="modern"`
|
||||
- Selector de tema en la pantalla de Configuración
|
||||
- Persistir preferencia del usuario
|
||||
|
||||
---
|
||||
|
||||
## Entregables del Design System
|
||||
|
||||
### 1. Tokens de diseño (ambos temas)
|
||||
- Paleta de colores completa (primary, secondary, accent, success, warning, error, neutral)
|
||||
- Escala tipográfica (h1-h6, body, caption, label, monospace para precios)
|
||||
- Espaciado (4px base grid)
|
||||
- Bordes y radios
|
||||
- Sombras/elevación
|
||||
- Breakpoints responsive
|
||||
|
||||
### 2. Componentes reutilizables (20 componentes)
|
||||
- Botones (primary, secondary, danger, ghost, icon-button)
|
||||
- Inputs (text, number, search, select, checkbox, radio, toggle)
|
||||
- Cards (producto, cliente, resumen)
|
||||
- Tablas (con sorting, paginación)
|
||||
- Modales y dialogs
|
||||
- Tabs y navegación
|
||||
- Badges y tags
|
||||
- Toasts/notificaciones
|
||||
- Sidebar y header
|
||||
- Barras de búsqueda
|
||||
- PIN Pad
|
||||
- Numpad para cantidades/precios
|
||||
- Listas de items (carrito, inventario)
|
||||
- Avatares/iniciales
|
||||
- Breadcrumbs
|
||||
- Dropdowns
|
||||
- Tooltips
|
||||
- Progress bars
|
||||
- Empty states
|
||||
- Loading states/skeletons
|
||||
|
||||
### 3. Iconografía
|
||||
- Set de iconos consistente para POS (carrito, producto, cliente, factura, inventario, dashboard, config)
|
||||
|
||||
---
|
||||
|
||||
## Pantallas a diseñar (después del design system)
|
||||
|
||||
| # | Pantalla | Descripción |
|
||||
|---|----------|-------------|
|
||||
| 1 | Login (PIN Pad) | Acceso rápido por PIN numérico |
|
||||
| 2 | Catálogo | Búsqueda y navegación de productos |
|
||||
| 3 | Punto de Venta (POS) | Pantalla principal de venta |
|
||||
| 4 | Inventario (7 tabs) | Gestión completa de inventario |
|
||||
| 5 | Clientes | CRUD de clientes |
|
||||
| 6 | Facturación CFDI | Emisión de facturas SAT |
|
||||
| 7 | Contabilidad (7 tabs) | Módulo contable |
|
||||
| 8 | Dashboard Dueño | Mobile-first, métricas clave |
|
||||
| 9 | Configuración | Incluye selector de tema |
|
||||
| 10 | Reportes | Reportes y analytics |
|
||||
|
||||
**Referencia completa de pantallas:** `https://git.consultoria-as.com/consultoria-as/Autoparts-DB/src/branch/main/docs/design/pantallas-pos.md`
|
||||
|
||||
---
|
||||
|
||||
## Asignación de equipo
|
||||
|
||||
1. **Milo (UX):** Definir la estructura del design system, tokens, spacing, grid system
|
||||
2. **Iris (UI):** Diseño visual de cada componente en ambos temas, paleta completa
|
||||
3. **Zara (Frontend):** Implementar CSS variables y componentes base
|
||||
4. **Enzo (Content):** Microcopy para estados vacíos, tooltips, labels
|
||||
5. **Vera (QA):** Validar consistencia entre temas, accesibilidad (WCAG AA)
|
||||
|
||||
## Fase actual: DESIGN SYSTEM (no pantallas aún)
|
||||
|
||||
Arrancamos con el design system. Las pantallas se diseñarán una por una después, sin prioridad específica.
|
||||
|
||||
---
|
||||
|
||||
**Aprobado por:** Iván Alcaraz Salazar
|
||||
**Coordinado por:** Lucy (Secretaria Personal)
|
||||
1102
social-media/social-media-proposals.html
Normal file
1102
social-media/social-media-proposals.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user