From 87028143eec477dd8c3420345e7e66c0e1a94cfe Mon Sep 17 00:00:00 2001 From: Hugo Date: Tue, 31 Mar 2026 21:36:00 +0000 Subject: [PATCH] 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 --- branding/look-and-feel.html | 1253 +++++++++++++++++ branding/opciones-branding.html | 515 +++++++ branding/option-a.html | 319 +++++ branding/option-b.html | 329 +++++ branding/option-c.html | 318 +++++ branding/option-e.html | 313 +++++ design-system/index.html | 1594 ++++++++++++++++++++++ design-system/tokens.css | 220 +++ nexus-autoparts-design-brief.md | 117 ++ social-media/social-media-proposals.html | 1102 +++++++++++++++ 10 files changed, 6080 insertions(+) create mode 100644 branding/look-and-feel.html create mode 100644 branding/opciones-branding.html create mode 100644 branding/option-a.html create mode 100644 branding/option-b.html create mode 100644 branding/option-c.html create mode 100644 branding/option-e.html create mode 100644 design-system/index.html create mode 100644 design-system/tokens.css create mode 100644 nexus-autoparts-design-brief.md create mode 100644 social-media/social-media-proposals.html diff --git a/branding/look-and-feel.html b/branding/look-and-feel.html new file mode 100644 index 0000000..80599d7 --- /dev/null +++ b/branding/look-and-feel.html @@ -0,0 +1,1253 @@ + + + + + +Nexus Autoparts - Look & Feel Proposals + + + + + + + +
+
+

Nexus Autoparts — Look & Feel

+
+ A: Industrial + B: Tech Moderno + C: Premium + E: Retro +
+
+
+ + +
+
+

Opción A

+

Industrial Robusto

+

Negro • Ámbar • Acero — Barlow Condensed — Fuerte, directo, confiable

+
+ +
+
+
+
nexusautoparts.com
+
+ +
+ + +
+ +
+
+

ENCUENTRA LA REFACCIÓN EXACTA PARA TU VEHÍCULO

+

Más de 1.4 millones de partes OEM y aftermarket. Búsqueda inteligente por marca, modelo y año.

+
+ + +
+
+
+
1.4M+
+
Partes OEM
+
+
+
300K+
+
Aftermarket
+
+
+
50+
+
Marcas
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+

Productos Destacados

+
+
+
+
+

Balatas Cerámicas Delanteras

+
Toyota Corolla 2018-2024 • Honda Civic 2016-2023
+
+
$1,250 MXN
+ +
+
+
+
+
+
+

Filtro de Aceite Premium

+
Nissan Sentra 2015-2024 • Versa 2016-2023
+
+
$185 MXN
+ +
+
+
+
+
+
+

Amortiguador Trasero Gas

+
VW Jetta 2019-2024 • Golf 2018-2023
+
+
$2,890 MXN
+ +
+
+
+
+
+ +
+
+
+

Nexus Autoparts

+

Tu proveedor de refacciones de confianza. Piezas OEM y aftermarket para todas las marcas.

+
+
+

Catálogo

+ MotorFrenosSuspensiónEléctrico +
+
+

Soporte

+ ContactoGarantíasEnvíos +
+
+

Síguenos

+ Facebook + Instagram + WhatsApp +
+
+
© 2026 Nexus Autoparts. Todos los derechos reservados.
+
+
+
+ + +
+
+

Opción B

+

Técnico Moderno

+

Azul Noche • Naranja • Blanco — Poppins — Limpio, tech, profesional

+
+ +
+
+
+
nexusautoparts.com
+
+
+ + +
+
+
+

La plataforma inteligente para encontrar refacciones

+

Busca por marca, modelo, año o número OEM. Más de 1.4 millones de partes disponibles al instante.

+
+ + +
+
+
+
1.4M+
+
Partes OEM
+
+
+
300K+
+
Aftermarket
+
+
+
50+
+
Marcas
+
+
+
+
+
+
+ + + + + +
+
+
+

Productos Destacados

+
+
+
+
+

Balatas Cerámicas Delanteras

+
Toyota Corolla 2018-2024 • Honda Civic 2016-2023
+
+
$1,250
+ +
+
+
+
+
+
+

Filtro de Aceite Premium

+
Nissan Sentra 2015-2024 • Versa 2016-2023
+
+
$185
+ +
+
+
+
+
+
+

Amortiguador Trasero Gas

+
VW Jetta 2019-2024 • Golf 2018-2023
+
+
$2,890
+ +
+
+
+
+
+
+
+
+

Nexus Autoparts

+

La plataforma inteligente para refacciones automotrices. Conectamos piezas con profesionales.

+
+
+

Catálogo

+ MotorFrenosSuspensiónEléctrico +
+
+

Soporte

+ ContactoGarantíasEnvíos +
+
+

Síguenos

+ Facebook + Instagram + WhatsApp +
+
+
© 2026 Nexus Autoparts. Todos los derechos reservados.
+
+
+
+ + +
+
+

Opción C

+

Premium Automotriz

+

Negro Mate • Rojo Racing • Plata — Bebas Neue — Elegante, racing, premium

+
+ +
+
+
+
nexusautoparts.com
+
+
+
NEXUS AUTOPARTS
+ +
+
+
+

NEXUS AUTOPARTS

+
+

Performance • Calidad • Precisión

+
+ + +
+
+
+
1.4M+
+
Partes OEM
+
+
+
300K+
+
Aftermarket
+
+
+
50+
+
Marcas
+
+
+
+
+
+
+ + + + + +
+
+
+

PRODUCTOS DESTACADOS

+
+
+
+
+

BALATAS CERÁMICAS DELANTERAS

+
Toyota Corolla 2018-2024 • Honda Civic 2016-2023
+
+
$1,250
+ +
+
+
+
+
+
+

FILTRO DE ACEITE PREMIUM

+
Nissan Sentra 2015-2024 • Versa 2016-2023
+
+
$185
+ +
+
+
+
+
+
+

AMORTIGUADOR TRASERO GAS

+
VW Jetta 2019-2024 • Golf 2018-2023
+
+
$2,890
+ +
+
+
+
+
+
+
+
+

NEXUS AUTOPARTS

+

Refacciones de alto rendimiento para profesionales que exigen lo mejor.

+
+
+

CATÁLOGO

+ MotorFrenosSuspensiónEléctrico +
+
+

SOPORTE

+ ContactoGarantíasEnvíos +
+
+

SÍGUENOS

+ Facebook + Instagram + WhatsApp +
+
+
© 2026 NEXUS AUTOPARTS. TODOS LOS DERECHOS RESERVADOS.
+
+
+
+ + +
+
+

Opción E

+

Mecánico Retro-Moderno

+

Petróleo • Óxido • Crema — Archivo Black — Clásico con carácter

+
+ +
+
+
+
nexusautoparts.com
+
+
+ + +
+
+
+

NEXUS

+ AUTOPARTS +
+

“Refacciones con garantía, servicio con experiencia”

+
+ + +
+
+
+
1.4M+
+
Partes OEM
+
+
+
300K+
+
Aftermarket
+
+
+
50+
+
Marcas
+
+
+
+
+
+ + + + + +
+
+
+

Productos Destacados

+
+
+
+
+

Balatas Cerámicas

+
Toyota Corolla 2018-2024 • Honda Civic 2016-2023
+
+
$1,250
+ +
+
+
+
+
+
+

Filtro de Aceite Premium

+
Nissan Sentra 2015-2024 • Versa 2016-2023
+
+
$185
+ +
+
+
+
+
+
+

Amortiguador Trasero

+
VW Jetta 2019-2024 • Golf 2018-2023
+
+
$2,890
+ +
+
+
+
+
+
+
+
+

Nexus Autoparts

+

Refacciones con garantía y servicio con experiencia. Tu taller merece lo mejor.

+
+
+

Catálogo

+ MotorFrenosSuspensiónEléctrico +
+
+

Soporte

+ ContactoGarantíasEnvíos +
+
+

Síguenos

+ Facebook + Instagram + WhatsApp +
+
+
© 2026 Nexus Autoparts. Todos los derechos reservados.
+
+
+
+ + +
+

Nexus Autoparts — Propuestas de Look & Feel

+ Cada opción muestra: navegación, hero, búsqueda, tarjetas de producto y footer
+ Generado por Hugo, Project Manager © 2026 +
+ + + \ No newline at end of file diff --git a/branding/opciones-branding.html b/branding/opciones-branding.html new file mode 100644 index 0000000..3bfea74 --- /dev/null +++ b/branding/opciones-branding.html @@ -0,0 +1,515 @@ + + + + + +Nexus Autoparts - Opciones de Branding + + + + + +
+

NEXUS AUTOPARTS

+

Opciones de Branding — Selecciona tu estilo

+
+ +
+ + +
+
Opción A — Industrial Robusto
+
+
+
N
+
+

NEXUS

+ AUTOPARTS +
+
+

+ Piezas que conectan. Calidad que resiste.
+ Tu proveedor de refacciones de confianza. +

+
+ + +
+
+
+
+
Paleta de Colores
+
+
+
+
Ámbar
#F5A623
+
+
+
+
Negro
#1A1A1A
+
+
+
+
Acero
#6B7B8D
+
+
+
+
Plata
#E8E8E8
+
+
+
+
+
Tipografía
+

Barlow Condensed Bold

+

Barlow Regular para cuerpo de texto. Fuerte, legible, industrial.

+
+
+
Elementos Visuales
+
+
Metal Cepillado
+
Líneas Diagonales
+
Iconos Técnicos
+
Bordes Angulares
+
+
+
+
+ + +
+
Opción B — Técnico Moderno
+
+
+
+ + + + + + + + + + +
+
+

Nexus Autoparts

+ Conectando piezas, moviendo industrias +
+
+

+ La plataforma inteligente para encontrar la refacción exacta. Más de 1.4 millones de partes a tu alcance. +

+
+ + +
+
+
+
+
Paleta de Colores
+
+
+
+
Azul Noche
#1A1A2E
+
+
+
+
Naranja
#FF6B35
+
+
+
+
Gris Claro
#F4F5F7
+
+
+
+
Blanco
#FFFFFF
+
+
+
+
+
Tipografía
+

Poppins Bold

+

Montserrat para cuerpo. Moderna, geométrica, tech-friendly.

+
+
+
Elementos Visuales
+
+
Nodos de Red
+
Grid Punteado
+
Bordes Redondeados
+
Gradientes Sutiles
+
+
+
+
+ + +
+
Opción C — Premium Automotriz
+
+
+
+

NEXUS AUTOPARTS

+
+ Performance • Calidad • Precisión +
+
+

+ Refacciones de alto rendimiento para profesionales que exigen lo mejor. +

+
+ + +
+
+
+
+
Paleta de Colores
+
+
+
+
Negro Mate
#0A0A0A
+
+
+
+
Rojo Racing
#E63946
+
+
+
+
Plata
#B8B8B8
+
+
+
+
Grafito
#1A1A1A
+
+
+
+
+
Tipografía
+

BEBAS NEUE

+

Oswald para cuerpo. Elegante, racing, premium.

+
+
+
Elementos Visuales
+
+
Líneas Speed
+
Acentos Rojos
+
Degradados Oscuros
+
Bandera Racing
+
+
+
+
+ + +
+
Opción E — Mecánico Retro-Moderno
+
+
+

NEXUS

+ AUTOPARTS +
+

“Refacciones con garantía, servicio con experiencia”

+
+ + +
+
+
+
+
Paleta de Colores
+
+
+
+
Petróleo
#1B4965
+
+
+
+
Óxido
#C45D3E
+
+
+
+
Crema
#F5F0E8
+
+
+
+
Carbón
#2C3E50
+
+
+
+
+
Tipografía
+

Archivo Black

+

Work Sans Light para cuerpo. Clásica pero fresca, con personalidad.

+
+
+
Elementos Visuales
+
+
Badges Circulares
+
Sellos de Calidad
+
Bordes Redondeados
+
Texturas Vintage
+
+
+
+
+ +
+ +
+ Nexus Autoparts — Propuestas de Branding © 2026
+ Generado por Hugo, Project Manager +
+ + + diff --git a/branding/option-a.html b/branding/option-a.html new file mode 100644 index 0000000..3df3c13 --- /dev/null +++ b/branding/option-a.html @@ -0,0 +1,319 @@ + + + + + +Nexus Autoparts - Opciones de Branding + + + + +
+
Opción A — Industrial Robusto
+
+
+
N
+
+

NEXUS

+ AUTOPARTS +
+
+

+ Piezas que conectan. Calidad que resiste.
+ Tu proveedor de refacciones de confianza. +

+
+ + +
+
+
+
+
Paleta de Colores
+
+
+
+
Ámbar
#F5A623
+
+
+
+
Negro
#1A1A1A
+
+
+
+
Acero
#6B7B8D
+
+
+
+
Plata
#E8E8E8
+
+
+
+
+
Tipografía
+

Barlow Condensed Bold

+

Barlow Regular para cuerpo de texto. Fuerte, legible, industrial.

+
+
+
Elementos Visuales
+
+
Metal Cepillado
+
Líneas Diagonales
+
Iconos Técnicos
+
Bordes Angulares
+
+
+
+
+ + + \ No newline at end of file diff --git a/branding/option-b.html b/branding/option-b.html new file mode 100644 index 0000000..a65e18e --- /dev/null +++ b/branding/option-b.html @@ -0,0 +1,329 @@ + + + + + +Nexus Autoparts - Opciones de Branding + + + + +
+
Opción B — Técnico Moderno
+
+
+
+ + + + + + + + + + +
+
+

Nexus Autoparts

+ Conectando piezas, moviendo industrias +
+
+

+ La plataforma inteligente para encontrar la refacción exacta. Más de 1.4 millones de partes a tu alcance. +

+
+ + +
+
+
+
+
Paleta de Colores
+
+
+
+
Azul Noche
#1A1A2E
+
+
+
+
Naranja
#FF6B35
+
+
+
+
Gris Claro
#F4F5F7
+
+
+
+
Blanco
#FFFFFF
+
+
+
+
+
Tipografía
+

Poppins Bold

+

Montserrat para cuerpo. Moderna, geométrica, tech-friendly.

+
+
+
Elementos Visuales
+
+
Nodos de Red
+
Grid Punteado
+
Bordes Redondeados
+
Gradientes Sutiles
+
+
+
+
+ + + \ No newline at end of file diff --git a/branding/option-c.html b/branding/option-c.html new file mode 100644 index 0000000..94705a0 --- /dev/null +++ b/branding/option-c.html @@ -0,0 +1,318 @@ + + + + + +Nexus Autoparts - Opciones de Branding + + + + +
+
Opción C — Premium Automotriz
+
+
+
+

NEXUS AUTOPARTS

+
+ Performance • Calidad • Precisión +
+
+

+ Refacciones de alto rendimiento para profesionales que exigen lo mejor. +

+
+ + +
+
+
+
+
Paleta de Colores
+
+
+
+
Negro Mate
#0A0A0A
+
+
+
+
Rojo Racing
#E63946
+
+
+
+
Plata
#B8B8B8
+
+
+
+
Grafito
#1A1A1A
+
+
+
+
+
Tipografía
+

BEBAS NEUE

+

Oswald para cuerpo. Elegante, racing, premium.

+
+
+
Elementos Visuales
+
+
Líneas Speed
+
Acentos Rojos
+
Degradados Oscuros
+
Bandera Racing
+
+
+
+
+ + + \ No newline at end of file diff --git a/branding/option-e.html b/branding/option-e.html new file mode 100644 index 0000000..c412030 --- /dev/null +++ b/branding/option-e.html @@ -0,0 +1,313 @@ + + + + + +Nexus Autoparts - Opciones de Branding + + + + +
+
Opción E — Mecánico Retro-Moderno
+
+
+

NEXUS

+ AUTOPARTS +
+

“Refacciones con garantía, servicio con experiencia”

+
+ + +
+
+
+
+
Paleta de Colores
+
+
+
+
Petróleo
#1B4965
+
+
+
+
Óxido
#C45D3E
+
+
+
+
Crema
#F5F0E8
+
+
+
+
Carbón
#2C3E50
+
+
+
+
+
Tipografía
+

Archivo Black

+

Work Sans Light para cuerpo. Clásica pero fresca, con personalidad.

+
+
+
Elementos Visuales
+
+
Badges Circulares
+
Sellos de Calidad
+
Bordes Redondeados
+
Texturas Vintage
+
+
+
+
+ + + \ No newline at end of file diff --git a/design-system/index.html b/design-system/index.html new file mode 100644 index 0000000..ac09c57 --- /dev/null +++ b/design-system/index.html @@ -0,0 +1,1594 @@ + + + + + + Nexus Autoparts — Design System + + + + + + + + + +
+

Nexus Autoparts — Design System

+
+ + +
+
+ +
+ + +
+

Paleta de Colores

+

Colores primarios, accent, semánticos y neutrales para ambos temas.

+ +

Superficies

+
+
BG Primary
--color-bg-primary
+
BG Secondary
--color-bg-secondary
+
BG Tertiary
--color-bg-tertiary
+
BG Elevated
--color-bg-elevated
+
BG Hover
--color-bg-hover
+
+ +

Accent

+
+
Accent
--color-accent
+
Accent Hover
--color-accent-hover
+
Accent Active
--color-accent-active
+
Accent Subtle
--color-accent-subtle
+
Accent Muted
--color-accent-muted
+
+ +

Semanticos

+
+
Success
--color-success
+
Warning
--color-warning
+
Error
--color-error
+
Info
--color-info
+
+
+ + +
+

Tipografia

+

Escala tipografica con heading font y body font segun el tema activo.

+ +
H1 / 60px
Nexus Autoparts
+
H2 / 48px
Catalogo de Refacciones
+
H3 / 36px
Punto de Venta
+
H4 / 30px
Inventario General
+
H5 / 24px
Clientes Registrados
+
H6 / 20px
Detalle de Factura
+
Body / 16px
Busca entre mas de 1.4 millones de partes OEM y 300K aftermarket con compatibilidad verificada para cada vehiculo.
+
Small / 14px
Compatible con: Toyota Corolla 2018-2023, Honda Civic 2020-2024
+
Caption / 12px
Ultima actualizacion: hace 2 horas | SKU: NX-BRK-4521
+
Mono / Price
$1,245.00 MXN
+
+ + +
+

Botones

+

Primary, secondary, danger, ghost e icon buttons en 3 tamanos.

+ +
+ + + + + +
+
+ + + +
+
+ + +
+
+ + +
+

Inputs y Formularios

+

Text, search, select, checkbox, radio, toggle.

+ +
+
+ + + Ingresa el nombre o numero de parte +
+
+ + +
+
+ + + El correo no tiene un formato valido +
+
+ + +
+
+ + +
+ +
+ 🔍 + + +
+
+ + +
+
+ Checkbox + + + +
+
+ Radio + + + +
+
+ Toggle +
+ + Notificaciones +
+
+ + Modo oscuro +
+
+
+
+ + +
+

Cards

+

Producto, cliente y resumen (dashboard).

+ +

Tarjeta de Producto

+
+
+
⚙
+
+
Balata Delantera Ceramica
+
SKU: NX-BRK-4521
+
$845.00
+
Toyota Corolla 2018-2023
+
+
+ + +
+
+
+
⚙
+
+
Filtro de Aceite Premium
+
SKU: NX-FLT-8832
+
$189.00
+
Honda Civic 2020-2024
+
+
+ + +
+
+
+
⚙
+
+
Amortiguador Trasero
+
SKU: NX-SUS-2211
+
$1,650.00
+
Nissan Sentra 2019-2023
+
+
+ + +
+
+
+ +

Tarjeta de Cliente

+
+
+
JR
+
Juan Rodriguez
Taller Mecanico Rodriguez
+
+
+
ML
+
Maria Lopez
Refaccionaria La Central
+
+
+
CP
+
Carlos Perez
AutoServicio Express
+
+
+ +

Tarjeta Resumen (Dashboard)

+
+
+
Ventas Hoy
+
$24,580
+
+12.5% vs ayer
+
+
+
Productos Vendidos
+
47
+
+8 unidades
+
+
+
Clientes Nuevos
+
5
+
+2 esta semana
+
+
+
Stock Bajo
+
12
+
Requiere atencion
+
+
+
+ + +
+

Tabla con Paginacion

+

Tabla de datos con sorting y paginacion para inventario, ventas, etc.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SKU ▲Producto ▼CategoriaStockPrecioEstado
NX-BRK-4521Balata Delantera CeramicaFrenos124$845.00En stock
NX-FLT-8832Filtro de Aceite PremiumMotor58$189.00En stock
NX-SUS-2211Amortiguador TraseroSuspension3$1,650.00Stock bajo
NX-ELC-1105Alternador RemanufacturadoElectrico0$3,200.00Agotado
NX-MTR-7744Junta de CabezaMotor22$520.00En stock
+
+ Mostrando 1-5 de 1,423,847 productos +
+ + + + + + + +
+
+
+
+ + +
+

Modal / Dialog

+

Ventana modal para confirmaciones, formularios y alertas.

+ +
+
+
+

Confirmar Venta

+ +
+
+

Estas a punto de procesar una venta por $3,284.00 MXN para el cliente Juan Rodriguez.

+
+ + +
+
+
+ + +
+
+
+
+ + +
+

Tabs / Navegacion

+

Tabs para secciones como Inventario (7 tabs) y Contabilidad.

+ +
+ + + + + + + +
+
+

Contenido de la tab "General" se muestra aqui. Cada tab carga su contenido correspondiente.

+
+
+ + +
+

Badges y Tags

+

Indicadores de estado, categorias y etiquetas removibles.

+ +

Badges

+
+ Nuevo + En stock + Stock bajo + Agotado + Pedido + Inactivo +
+ +

Tags

+
+ Frenos × + Toyota × + 2020-2024 × + OEM × + Ceramica × +
+
+ + +
+

Toasts / Notificaciones

+

Mensajes de feedback para acciones del usuario.

+ +
+
+ ✔ +
Venta completada
Folio #NX-2024-0847 generado exitosamente
+
+
+ ❌ +
Error al procesar
No se pudo conectar con el servidor de facturacion
+
+
+ ⚠ +
Stock insuficiente
Solo quedan 3 unidades de NX-SUS-2211
+
+
+ ℹ +
Actualizacion disponible
Hay 247 nuevas partes en el catalogo
+
+
+
+ + +
+

Sidebar y Header

+

Navegacion principal de la aplicacion POS.

+ +
+ +
+ POS + Catalogo + Inventario + Clientes + Reportes +
+
+ +
IA
+
+
+ +
+
+
Principal
+ + + + +
Gestion
+ + + + +
Sistema
+ +
+
+ + +
+

PIN Pad

+

Acceso rapido por PIN numerico para login.

+ +
+
+
🔒 Ingresa tu PIN
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + +
+
+
+ + +
+

Numpad

+

Teclado numerico para cantidades y precios en POS.

+ +
+
+
$1,245.00
+ + + + + + + + + + + + +
+
+
+ + +
+

Listas (Carrito / Inventario)

+

Items de lista con cantidad, precio y acciones.

+ +
+
+ Carrito de Venta + 3 items +
+
+
⚙
+
+
Balata Delantera Ceramica
+
NX-BRK-4521 | Toyota Corolla
+
+
2
+
$1,690.00
+
+
+
⚙
+
+
Filtro de Aceite Premium
+
NX-FLT-8832 | Honda Civic
+
+
1
+
$189.00
+
+
+
⚙
+
+
Amortiguador Trasero
+
NX-SUS-2211 | Nissan Sentra
+
+
1
+
$1,650.00
+
+
+ Total + $3,529.00 +
+
+
+ + +
+

Avatares

+

Iniciales de usuario en diferentes tamanos.

+ +
+
I
+
IA
+
IA
+
IA
+ XS (24) / SM (32) / MD (40) / LG (56) +
+
+ + +
+

Breadcrumbs

+

Navegacion jerárquica para secciones profundas.

+ +
+ Inicio + / + Inventario + / + Frenos + / + Balata Delantera Ceramica +
+
+ + +
+

Dropdown

+

Menu contextual para acciones secundarias.

+ +
+ +
+
✎ Editar producto
+
📋 Duplicar
+
🖨 Exportar PDF
+
+
🗑 Eliminar
+
+
+
+ + +
+

Tooltips

+

Informacion contextual al hover.

+ +
+
+ Hover aqui +
Balata ceramica de alto rendimiento
+
+
+ Stock info +
124 unidades disponibles en almacen
+
+
+
+ + +
+

Barras de Progreso

+

Indicadores de progreso para stock, metas y procesos.

+ +
+
+
Meta de ventas diaria78%
+
+
+
+
Stock balatas92%
+
+
+
+
Stock amortiguadores15%
+
+
+
+
Stock alternadores0%
+
+
+
+
+ + +
+

Empty States

+

Estados vacios cuando no hay datos que mostrar.

+ +
+
+
🔍
+

No se encontraron resultados

+

No hay productos que coincidan con tu busqueda. Intenta con otro termino o revisa los filtros aplicados.

+ +
+
+
+ + +
+

Loading States / Skeleton

+

Placeholders de carga mientras se obtienen datos.

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+

Iconografia POS

+

Set de iconos consistente para el sistema POS.

+ +
+
🛒
Carrito
+
⚙
Producto
+
👤
Cliente
+
📄
Factura
+
📦
Inventario
+
📈
Dashboard
+
⚙
Config
+
🔍
Buscar
+
💰
Ventas
+
📊
Reportes
+
🔒
Login
+
🔔
Alertas
+
+
+ Nota: En produccion, reemplazar emojis por un set SVG consistente (Lucide Icons, Phosphor, o iconos custom). Los emojis son solo placeholder. +
+
+ + +
+

Referencia de Espaciado

+

Grid base de 4px para mantener consistencia visual.

+ +
+
+ 4px (space-1) +
+
+
+ 8px (space-2) +
+
+
+ 16px (space-4) +
+
+
+ 24px (space-6) +
+
+
+ 32px (space-8) +
+
+
+ 48px (space-12) +
+
+
+ 64px (space-16) +
+
+
+
+ +
+ + + + + diff --git a/design-system/tokens.css b/design-system/tokens.css new file mode 100644 index 0000000..12351ab --- /dev/null +++ b/design-system/tokens.css @@ -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); +} diff --git a/nexus-autoparts-design-brief.md b/nexus-autoparts-design-brief.md new file mode 100644 index 0000000..a4f93fa --- /dev/null +++ b/nexus-autoparts-design-brief.md @@ -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) diff --git a/social-media/social-media-proposals.html b/social-media/social-media-proposals.html new file mode 100644 index 0000000..ff51f85 --- /dev/null +++ b/social-media/social-media-proposals.html @@ -0,0 +1,1102 @@ + + + + + + Nexus Autoparts — Propuestas Redes Sociales + + + + + + + +
+

Nexus Autoparts — Redes Sociales

+
+ + + +
+
+ +
+ + +
+
+
Propuesta 1 — Industrial Bold
+
Estilo dark, robusto y profesional. Ideal para proyectar fuerza y confiabilidad en el ramo automotriz. Tipografia Barlow Condensed Bold, paleta oscura con acentos en ambar/dorado.
+
+
+
+
+
+
+
Barlow Condensed 800 + Barlow 400
+
+
+ + +
+
Posts de Feed (Instagram/Facebook) — 1080x1080
+
+ + +
+
+
+
Oferta de la Semana
+
+
Balatas
Ceramicas
Premium
+
+
+
$845.00 MXN
+
Comprar Ahora
+
+
+
+
Promo / Oferta
+
@nexusautoparts Balatas ceramicas premium con hasta 40% mas de vida util. Compatibles con +200 modelos.
+
#NexusAutoparts #Refacciones #Frenos #Taller
+
+
+ + +
+
+
⚙
+
+
Filtro de Aceite
+
Desde $189 MXN | +500 modelos compatibles
+
+
+
+
+
+
+
Carrusel / Catalogo
+
@nexusautoparts Top 5 filtros mas vendidos esta semana. Desliza para ver todos.
+
#Filtros #Motor #Autopartes #Catalogo
+
+
+ + +
+
+
#3
+
+
Revisa tus
balatas cada
20,000 km
+
El desgaste irregular puede indicar problemas en los discos o calipers.
+
+
Nexus Autoparts — Tips del Mecanico
+
+
+
Educativo / Tips
+
@nexusautoparts Tip #3 de nuestra serie "Tips del Mecanico". Cuida tu vehiculo, cuida tu inversion.
+
#TipsDelMecanico #Mantenimiento #Frenos
+
+
+ + +
+
+
Nexus en Numeros
+
+
+
1.4M+
+
Partes OEM
+
+
+
300K+
+
Aftermarket
+
+
+
12B+
+
Links vehiculo-parte
+
+
+
50+
+
Marcas
+
+
+
+
+
Infografia / Brand
+
@nexusautoparts El catalogo mas completo de refacciones en Mexico. Estos son nuestros numeros.
+
#NexusAutoparts #Catalogo #B2B #Refaccionarias
+
+
+
+
+ + +
+
Stories (Instagram/WhatsApp) — 1080x1920
+
+
+
+
Flash Sale
+
+
Amortiguadores
-25%
+
Solo hoy | Todas las marcas
+
+
+
Ver Oferta
+
+
↑ Desliza hacia arriba
+
+
+
+
+
Nuevo Producto
+
+
⚙
+
+
Alternador
Remanufacturado
+
$3,200 MXN
+
+
+
↑ Desliza para comprar
+
+
+
+
+
Quiz
+
+
Cada cuanto debes
cambiar el
filtro de aceite?
+
+
A) 5,000 km
+
B) 10,000 km
+
C) 15,000 km
+
+
+
Toca para responder
+
+
+
+
+ + +
+
Highlight Covers (Instagram)
+
+
🛒
Ofertas
+
⚙
Catalogo
+
💡
Tips
+
⭐
Resenas
+
📦
Envios
+
📞
Contacto
+
+
+
+ + +
+
+
Propuesta 2 — Tech Modern
+
Estilo limpio, light y moderno. Proyecta tecnologia y profesionalismo digital. Tipografia Poppins, fondo claro con acentos en naranja electrico. Grid de puntos como textura sutil.
+
+
+
+
+
+
+
Poppins 700 + Poppins 400
+
+
+ + +
+
Posts de Feed (Instagram/Facebook) — 1080x1080
+
+
+
+
+
Oferta de la Semana
+
+
Balatas
Ceramicas
Premium
+
+
+
$1,100$845
+
Comprar
+
+
+
+
Promo / Oferta
+
@nexusautoparts Balatas ceramicas premium. Rendimiento superior, precio justo.
+
#NexusAutoparts #Frenos #Autopartes
+
+
+ +
+
+
+
⚙
+
+
Filtro de Aceite
+
Desde $189 MXN | +500 modelos
+
+
+
+
+
+
+
Carrusel / Catalogo
+
@nexusautoparts Top filtros de la semana. Encuentra el tuyo.
+
#Filtros #Motor #Catalogo
+
+
+ +
+
+
#3
+
+
Revisa tus
balatas cada
20,000 km
+
El desgaste irregular puede indicar problemas en discos o calipers.
+
+
nexusautoparts.com
+
+
+
Educativo / Tips
+
@nexusautoparts Consejo #3: el mantenimiento preventivo te ahorra miles.
+
#Tips #Mantenimiento #Mecanica
+
+
+ +
+
+
Nexus en Numeros
+
+
1.4M+
Partes OEM
+
300K+
Aftermarket
+
12B+
Links
+
50+
Marcas
+
+
+
+
Infografia
+
@nexusautoparts Numeros que hablan por si solos. El catalogo mas completo.
+
#NexusAutoparts #Datos #Refaccionarias
+
+
+
+
+ + +
+
Stories (Instagram/WhatsApp) — 1080x1920
+
+
+
+
Flash Sale
+
+
Amortiguadores
-25% hoy
+
Todas las marcas disponibles
+
+
+
Ver Oferta
+
+
Desliza ↑
+
+
+
+
+
Nuevo
+
+
⚙
+
+
Alternador Reman.
+
$3,200
+
+
+
Desliza para comprar ↑
+
+
+
+
+ + +
+
Highlight Covers
+
+
🛒
Ofertas
+
⚙
Catalogo
+
💡
Tips
+
⭐
Resenas
+
📦
Envios
+
📞
Contacto
+
+
+
+ + +
+
+
Propuesta 3 — Hybrid Premium
+
Combina lo mejor de ambos mundos: el fondo dark del Industrial con un gradiente ambar-a-naranja como accent. Se siente premium, moderno y unico. Barlow Condensed para headings + Poppins para body.
+
+
+
+
+
+
+
Barlow Condensed 800 + Poppins 400
+
+
+ + +
+
Posts de Feed — 1080x1080
+
+
+
+
+
Oferta de la Semana
+
+
Balatas
Ceramicas
Premium
+
+
+
$845.00
+
Comprar Ahora
+
+
+
+
Promo / Oferta
+
@nexusautoparts La fusion perfecta de calidad y precio. Balatas ceramicas de alto rendimiento.
+
#NexusAutoparts #Frenos #Premium
+
+
+ +
+
+
#3
+
+
Revisa tus
balatas cada
20,000 km
+
Desgaste irregular = problemas en discos o calipers. No lo ignores.
+
+
Nexus Autoparts
+
+
+
Educativo
+
@nexusautoparts Tips que cuidan tu vehiculo y tu bolsillo.
+
#TipsDelMecanico #Mantenimiento
+
+
+ +
+
+
Nexus en Numeros
+
+
1.4M+
Partes OEM
+
300K+
Aftermarket
+
12B+
Links
+
50+
Marcas
+
+
+
+
Infografia
+
@nexusautoparts El catalogo mas grande. El gradiente que nos distingue.
+
#Catalogo #Refacciones #NexusAutoparts
+
+
+
+
+ + +
+
Stories — 1080x1920
+
+
+
+
+
Flash Sale
+
+
Amortiguadores
-25% hoy
+
Todas las marcas
+
+
+
Ver Oferta
+
+
↑ Desliza
+
+
+
+
+
+
Nuevo
+
+
⚙
+
+
Alternador
Remanufacturado
+
$3,200
+
+
+
↑ Comprar
+
+
+
+
+ + +
+
Highlight Covers
+
+
🛒
Ofertas
+
⚙
Catalogo
+
💡
Tips
+
⭐
Resenas
+
📦
Envios
+
📞
Contacto
+
+
+
+ +
+ + + + +