# 04 · UI/UX Design Brief

**Proyecto:** Sistema Boutique (POS + Tienda Online)
**Versión:** 1.0

> Nota: la paleta y las tipografías definitivas dependen del **logo y la identidad de la boutique**, que el cliente aún debe entregar. Lo de abajo es una **dirección visual base** —moderna, de moda, minimalista— lista para ajustarse cuando llegue la marca. Los valores están como tokens (variables), no incrustados, precisamente para poder recolorear toda la app cambiando 6 líneas.

---

## 1. Personalidad visual

Una boutique de moda no es una ferretería: la interfaz tiene que **respirar**, dejar que la ropa (las fotos) sea la protagonista, y sentirse cuidada. Dos ánimos distintos para dos usuarios:

- **Tienda Online (cliente):** editorial, espaciosa, aspiracional. La foto manda. Mucho blanco, tipografía con carácter.
- **POS (cajero):** denso pero limpio, botones grandes, alto contraste, cero distracción. Aquí la prioridad es tocar rápido y no equivocarse. Es una herramienta de trabajo, no una vitrina.

Comparten la misma paleta y tipografía (misma marca), pero el POS sube el tamaño de los controles y baja la decoración.

---

## 2. Paleta de color (tokens)

Dirección base "boutique contemporánea" — neutros cálidos con un acento de tinta profunda. Deliberadamente **evito** el cream + terracota que se ha vuelto un cliché de interfaces generadas; en su lugar uso un neutro piedra frío con un acento **ciruela/vino** que evoca moda sin caer en el rosa obvio.

```css
:root {
  /* Neutros (base de la interfaz) */
  --color-bg:            #FAFAF8;  /* fondo general, casi blanco cálido */
  --color-surface:       #FFFFFF;  /* tarjetas, paneles */
  --color-border:        #E7E5E1;  /* líneas finas, divisores */
  --color-text:          #1A1A1A;  /* texto principal */
  --color-text-muted:    #6B6B6B;  /* texto secundario, labels */

  /* Acento de marca (ajustable al logo del cliente) */
  --color-accent:        #6B2B3A;  /* vino/ciruela — botones primarios, enlaces */
  --color-accent-hover:  #551F2C;  /* estado hover del acento */
  --color-accent-soft:   #F3E9EC;  /* fondo suave del acento (badges, selección) */

  /* Semánticos (estado) */
  --color-success:       #2E7D5B;  /* stock ok, pago aprobado */
  --color-warning:       #B7791F;  /* stock mínimo */
  --color-danger:        #B23A3A;  /* stock cero, error, eliminar */
}

/* Modo oscuro (el POS lo agradece en jornadas largas) */
:root[data-theme="dark"] {
  --color-bg:            #14110F;
  --color-surface:       #1E1A17;
  --color-border:        #322C27;
  --color-text:          #F5F3F0;
  --color-text-muted:    #A39B92;
  --color-accent:        #C97A8A;  /* el vino se aclara para contraste en oscuro */
  --color-accent-hover:  #D890A0;
  --color-accent-soft:   #2A2023;
  --color-success:       #4CAF82;
  --color-warning:       #D9A441;
  --color-danger:        #E06C6C;
}
```

**Regla de uso:** el acento vino se usa **con moderación** — solo en la acción primaria de cada pantalla (un botón "Cobrar", un "Pagar"). Todo lo demás es neutro. El color no decora; señala qué hacer.

---

## 3. Tipografía

Dos familias, roles claros:

| Rol | Fuente | Uso |
|-----|--------|-----|
| **Display** | **Fraunces** (serif con carácter) | Títulos de la tienda, nombre de producto, hero. Da el aire editorial de moda. Usar con restricción. |
| **Cuerpo / UI** | **Inter** (sans neutra y legible) | Todo el texto de interfaz, formularios, tablas, el POS entero. Máxima legibilidad. |
| **Datos / mono** | **JetBrains Mono** | Precios en el POS, códigos de barras, referencias. La cifra alineada evita errores de lectura en caja. |

Escala tipográfica (base 16px):

```
Display XL   40 / 48   Fraunces 500   → hero tienda
Display L    32 / 40   Fraunces 500   → título de sección
Title        24 / 32   Inter 600
Body         16 / 24   Inter 400      → texto general
Small        14 / 20   Inter 400      → labels, ayudas
Caption      12 / 16   Inter 500      → metadatos
Price (POS)  28 / 32   JetBrains 600  → total a cobrar, grande y claro
```

En el **POS**, Fraunces casi no aparece — es una herramienta, no una vitrina. Ahí domina Inter grande y JetBrains Mono para las cifras.

---

## 4. Componentes

### Botones

```
Primario   → fondo --color-accent, texto blanco, radio 10px, peso 600
             hover: --color-accent-hover; transición 150ms
             En POS: altura 56px mínimo (dedo, no mouse)
Secundario → fondo transparente, borde --color-border, texto --color-text
Peligro    → texto --color-danger, para "eliminar/cancelar"
Ghost      → sin borde, solo texto, para acciones terciarias
```

Todos con estado `:focus-visible` marcado (accesibilidad de teclado — crítico en el POS, que se opera mucho con teclado).

### Tarjeta de producto (tienda)
- Foto en proporción 3:4 (vertical, como la ropa se fotografía). Las imágenes provienen de la tabla `product_images`; la marcada `is_primary = true` es la que aparece en la tarjeta. Se sirven como estáticos desde el disco del VPS vía Apache.
- Nombre en Inter 600, precio en la misma línea inferior.
- Al hover: leve elevación (sombra suave) y zoom sutil de la foto. Nada estridente.

### Fila de venta (POS)
- Alta, tocable, con: miniatura, nombre + variante (talla/color), cantidad, precio unitario, subtotal.
- Botón de quitar a la derecha, en `--color-danger` ghost.

### Selector de variante (talla/color)
- Tallas como chips seleccionables; la talla agotada se muestra tachada y deshabilitada.
- Color como muestras circulares con el color real.

### Badges de stock
- Verde "Disponible", ámbar "Últimas unidades", rojo "Agotado". Comunican estado de un vistazo.

---

## 5. Iconografía

**Lucide** (línea limpia, consistente, gratis, react-friendly). Íconos adaptados al tema de ropa/tienda:

| Concepto | Ícono Lucide |
|----------|--------------|
| Producto / prenda | `shirt` |
| Catálogo | `layout-grid` |
| Carrito | `shopping-bag` (bolsa, más "boutique" que el carrito de super) |
| Cliente | `user` / `users` |
| Venta / caja | `scan-barcode`, `banknote` |
| Inventario | `package`, `boxes` |
| Descuento / promo | `tag`, `percent` |
| Reportes | `bar-chart-3`, `trending-up` |
| Proveedor | `truck` |
| Fidelización | `sparkles`, `heart` |

Trazo consistente (1.5px), tamaño 20–24px en UI, 28px en botones grandes del POS.

---

## 6. Layout

**Tienda Online:**
```
┌───────────────────────────────────────┐
│  Logo        Buscar        Cuenta 🛍   │  ← header limpio, sticky
├───────────────────────────────────────┤
│  [ filtros ]   │   grid de productos   │
│  tipo          │   ┌────┐ ┌────┐ ┌────┐│
│  color         │   │ 3:4│ │ 3:4│ │ 3:4││
│  talla         │   └────┘ └────┘ └────┘│
│  precio        │   ...                 │
└───────────────────────────────────────┘
```

**POS (terminal de venta):**
```
┌──────────────────────────┬────────────┐
│  [ campo de escaneo ]     │            │
│                           │  TOTAL     │
│  Carrito de venta:        │  $ 45.000  │  ← cifra grande, JetBrains
│  ┌──────────────────────┐ │            │
│  │ Blusa · M · Azul  x1 │ │  [Cliente] │
│  │ Jean · 32 · Negro x1 │ │  [Descuento]│
│  └──────────────────────┘ │            │
│                           │  [ COBRAR ]│  ← acento vino, 56px
└──────────────────────────┴────────────┘
```

El campo de escaneo **siempre tiene el foco** en el POS: apenas termina una venta, el cursor vuelve ahí solo. Ese detalle es lo que elimina las filas.

---

## 7. Movimiento

Deliberadamente **poco**. La moda se siente premium con quietud, no con animaciones por todos lados.
- Transiciones de 150ms en hover de botones y tarjetas.
- Reveal suave al cargar el catálogo (fade-in escalonado leve).
- **Respetar `prefers-reduced-motion`** — si el usuario lo pide, sin animación.
- En el POS: **cero animación decorativa**. Solo feedback funcional (un flash verde al agregar al carrito, un shake rojo si el stock falla).

---

## 8. Accesibilidad (piso mínimo, no opcional)

- Contraste AA en todo texto (el vino sobre blanco y sus variantes ya cumplen).
- Foco visible de teclado en todo control.
- Objetivos táctiles ≥ 44px (POS ≥ 56px).
- La app responde de escritorio a móvil (la tienda se usa mucho desde el celular).