87028143ee
- 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
4.0 KiB
4.0 KiB
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"ydata-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
- Milo (UX): Definir la estructura del design system, tokens, spacing, grid system
- Iris (UI): Diseño visual de cada componente en ambos temas, paleta completa
- Zara (Frontend): Implementar CSS variables y componentes base
- Enzo (Content): Microcopy para estados vacíos, tooltips, labels
- 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)