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
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>
|
||||
Reference in New Issue
Block a user