# 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)