consultoria-as/Nexus-Autoparts-Design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Design System completo + propuestas branding + social media

Browse Source 
- 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
2026-03-31 21:36:00 +00:00
parent fca9748804
commit 87028143ee
10 changed files with 6080 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1253
branding/look-and-feel.html Normal file
View File

File diff suppressed because it is too large Load Diff

515
branding/opciones-branding.html Normal file
View 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 &mdash; Selecciona tu estilo</p>
</div>
<div class="options">
<!-- ===== OPCION A: INDUSTRIAL ROBUSTO ===== -->
<div class="option option-a">
<div class="option-label">Opci&oacute;n A &mdash; 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&Aacute;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">&Aacute;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&iacute;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&iacute;neas Diagonales</div>
<div class="element-tag">Iconos T&eacute;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&oacute;n B &mdash; T&eacute;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&oacute;n exacta. M&aacute;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&aacute;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&iacute;a</div>
<h3>Poppins Bold</h3>
<p>Montserrat para cuerpo. Moderna, geom&eacute;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&oacute;n C &mdash; 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 &bull; Calidad &bull; Precisi&oacute;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&Aacute;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&iacute;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&iacute;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&oacute;n E &mdash; Mec&aacute;nico Retro-Moderno</div>
<div class="hero">
<div class="badge">
<h2>NEXUS</h2>
<span>AUTOPARTS</span>
</div>
<p class="tagline">&ldquo;Refacciones con garant&iacute;a, servicio con experiencia&rdquo;</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&aacute;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&oacute;leo<br>#1B4965</div>
</div>
<div>
<div class="swatch" style="background:#C45D3E;"></div>
<div class="swatch-label">&Oacute;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&oacute;n<br>#2C3E50</div>
</div>
</div>
</div>
<div class="typo-sample">
<div class="section-title" style="color:#999;">Tipograf&iacute;a</div>
<h3>Archivo Black</h3>
<p>Work Sans Light para cuerpo. Cl&aacute;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 &mdash; Propuestas de Branding &copy; 2026<br>
<small>Generado por Hugo, Project Manager</small>
</div>
</body>
</html>

319
branding/option-a.html Normal file
View 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&oacute;n A &mdash; 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&Aacute;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">&Aacute;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&iacute;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&iacute;neas Diagonales</div>
<div class="element-tag">Iconos T&eacute;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
View 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&oacute;n B &mdash; T&eacute;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&oacute;n exacta. M&aacute;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&aacute;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&iacute;a</div>
<h3>Poppins Bold</h3>
<p>Montserrat para cuerpo. Moderna, geom&eacute;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
View 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&oacute;n C &mdash; 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 &bull; Calidad &bull; Precisi&oacute;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&Aacute;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&iacute;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&iacute;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
View 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&oacute;n E &mdash; Mec&aacute;nico Retro-Moderno</div>
<div class="hero">
<div class="badge">
<h2>NEXUS</h2>
<span>AUTOPARTS</span>
</div>
<p class="tagline">&ldquo;Refacciones con garant&iacute;a, servicio con experiencia&rdquo;</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&aacute;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&oacute;leo<br>#1B4965</div>
</div>
<div>
<div class="swatch" style="background:#C45D3E;"></div>
<div class="swatch-label">&Oacute;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&oacute;n<br>#2C3E50</div>
</div>
</div>
</div>
<div class="typo-sample">
<div class="section-title" style="color:#999;">Tipograf&iacute;a</div>
<h3>Archivo Black</h3>
<p>Work Sans Light para cuerpo. Cl&aacute;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
View File

File diff suppressed because it is too large Load Diff

220
design-system/tokens.css Normal file
View 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
View 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
View File

File diff suppressed because it is too large Load Diff