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
118 lines
4.0 KiB
Markdown
118 lines
4.0 KiB
Markdown
# 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)
|