# Airexsus es una empresa Design System

> Category: Custom · Industrial HVAC
> Surface: web (marketing + operator dashboards)
> Locale: es-ES primary, en-US secondary

Airexsus es una empresa de HVAC del mercado de Estados Unidos. Vende sistemas de refrigeración desde el diseño hasta la implementación, comerciales e industriales. El sistema de diseño está pensado para acompañar dos superficies principales:

1. **Sitio comercial / marketing** — presenta capacidades de ingeniería, casos de instalación y solicitud de cotización.
2. **Panel operativo / dashboards** — monitoreo de equipos, órdenes de servicio, mantenimiento preventivo y reportes técnicos.

El tono visual proyecta **frescura controlada, precisión técnica y confianza industrial** — frío sin ser estéril, denso sin ser pesado.

---

## Product context

Airexsus diseña, instala y mantiene sistemas de refrigeración HVAC para clientes comerciales e industriales en EE. UU. El sistema de diseño cubre dos productos:

- **Sitio comercial / marketing** — cápsulas de capacidad técnica, fichas de equipo, request-a-quote bilingüe.
- **Panel operativo** — monitoreo en tiempo real de la flota (split, rooftop, evaporadores industriales, cámaras de congelación, chillers), órdenes de servicio, mantenimiento preventivo y reportes técnicos. Soporta turnos nocturnos vía dark mode.

La voz primaria es español (es-ES) con soporte secundario en inglés (en-US). Unidades imperiales primero (BTU/h, °F, ton, SEER) con SI entre paréntesis cuando el cliente lo solicita.

## 1. Visual Theme & Atmosphere

**Posición de marca:** ingeniería seria con superficie limpia. Pensamos en sala blanca, gabinete de control, plano isométrico — no en estética "tech consumer".

**Materiales visuales:**
- Lienzo principal blanco frío con leve tono azul, evoca aire acondicionado bien calibrado.
- Superficies elevadas en blanco puro con borde hairline; sombras suaves, nunca dramáticas.
- Acento **cyan refrigeración** (`#00A4D6`) para acciones primarias y señales de "sistema activo / enfriando".
- Azul tinta profundo para tipografía y chrome estructural — sustituye el negro puro.
- Color de advertencia ámbar templado para alertas de carga térmica / heating mode.
- Color de estado **éxito = verde frío**, **peligro = rojo señalético**, ambos con saturación moderada para coexistir con datos densos sin gritar.

**Reglas de atmósfera:**
- Una superficie blanca, una elevación, una sombra — no apilar más de dos niveles.
- Los datos numéricos manejan la jerarquía; el color decora, no informa primario.
- No usar gradientes pastel, beige cálido, ni ilustraciones humanoides genéricas. La marca vive en planos, isométricos técnicos, fotografía de instalaciones reales o esquemas de flujo.

---

## 2. Color

### 2.1 Brand core

| Token | Valor | Uso |
|---|---|---|
| `--brand-primary` | `oklch(56% 0.14 230)` · `#00A4D6` | Acento de marca, acciones primarias, estado "cooling / activo" |
| `--brand-primary-pressed` | `oklch(48% 0.13 230)` · `#0087B3` | Hover/pressed en botones primarios |
| `--brand-deep` | `oklch(28% 0.08 245)` · `#1B3A5C` | Azul tinta, headings, navegación, hairlines fuertes |
| `--brand-frost` | `oklch(96% 0.018 230)` · `#E6F3F8` | Lavado frío para chips, fondos de sección informativa |

### 2.2 Neutral scale (cool-tinted)

| Token | Light | Dark |
|---|---|---|
| `--bg` | `#F7FAFB` | `#0A1420` |
| `--surface` | `#FFFFFF` | `#11202F` |
| `--surface-raised` | `#FFFFFF` | `#16293B` |
| `--fg` | `#0E2236` | `#E7F0F6` |
| `--fg-muted` | `#5A6C7E` | `#9AAFC2` |
| `--fg-subtle` | `#8898A8` | `#6A7E92` |
| `--border` | `#D9E2EA` | `#1F354A` |
| `--border-strong` | `#B5C3D1` | `#34516E` |

### 2.3 Status / semantic

| Token | Valor | Uso |
|---|---|---|
| `--success` | `#1B9B6F` | Equipo en línea, mantenimiento OK |
| `--warning` | `#D98B2B` | Carga térmica alta, próxima revisión |
| `--danger` | `#C8364A` | Falla crítica, fuga de refrigerante |
| `--info` | `#3A78C2` | Mensajes neutros del sistema |

Cada color de estado tiene un tono de fondo derivado al 12% de mezcla con `--surface` (`color-mix(in oklch, var(--danger) 12%, var(--surface))`) para chips, banners y row highlights.

### 2.4 Reglas de uso del color

- **Un solo acento por pantalla.** El cyan de marca aparece a lo sumo dos veces por vista.
- **Estados antes que decoración.** Si una fila ya está pintada por estado, no añadir acento de marca encima.
- **Modo oscuro.** El dashboard operativo soporta dark mode nativo (turnos nocturnos en planta); marketing solo light.
- **Contraste mínimo:** texto sobre fondo ≥ 4.5:1; texto secundario ≥ 3:1.

---

## 3. Typography

### 3.1 Stacks

```css
--font-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
```

`Inter` cubre display y body con un único peso variable. La voz industrial pide sans neutral, no serif editorial. Mono se reserva para SKU de equipos, IDs de orden, lecturas de sensores, código de modelo.

### 3.2 Scale

| Token | Tamaño | Line-height | Tracking | Uso |
|---|---|---|---|---|
| `--text-display-xl` | clamp(48px, 6vw, 84px) | 1.02 | -0.025em | Hero comercial |
| `--text-display-l` | clamp(36px, 4vw, 56px) | 1.05 | -0.022em | Heading de sección hero |
| `--text-h1` | 36px | 1.15 | -0.018em | Título de página |
| `--text-h2` | 28px | 1.2 | -0.015em | Título de sección |
| `--text-h3` | 22px | 1.3 | -0.01em | Subtítulo / card title |
| `--text-h4` | 18px | 1.35 | 0 | Encabezado de bloque |
| `--text-body` | 16px | 1.55 | 0 | Cuerpo estándar |
| `--text-body-s` | 14px | 1.5 | 0 | UI compacta, formularios |
| `--text-caption` | 13px | 1.4 | 0.01em | Captions, metadatos |
| `--text-eyebrow` | 12px | 1.2 | 0.14em uppercase | Kickers, etiquetas técnicas |
| `--text-mono-s` | 13px | 1.4 | 0 | IDs, sensores, SKU |

### 3.3 Reglas

- Headings en `--brand-deep` o `--fg`, nunca cyan.
- `font-variant-numeric: tabular-nums` por defecto en tablas y métricas.
- `text-wrap: pretty` en párrafos de marketing; `text-wrap: balance` en headlines.
- Eyebrows técnicos siempre en mono mayúsculas con tracking amplio (etiquetas tipo `BTU/H`, `REFRIG. R-410A`, `SKU-A4521`).

---

## 4. Spacing

### 4.1 Scale (base 4 px)

```css
--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;
--space-32: 128px;
```

### 4.2 Radius

```css
--radius-xs: 2px;   /* chips compactos, badges */
--radius-s:  6px;   /* inputs, botones small */
--radius-m:  10px;  /* botones, controles */
--radius-l:  14px;  /* cards de dashboard */
--radius-xl: 20px;  /* hero cards, módulos destacados */
--radius-pill: 999px;
```

Densidad: el dashboard usa `--radius-m` por defecto; marketing puede subir a `--radius-l`/`xl`. Nunca se mezclan tres radios distintos en un mismo módulo.

### 4.3 Shadows

```css
--shadow-hairline: 0 0 0 1px var(--border);
--shadow-1: 0 1px 2px rgba(14, 34, 54, 0.06), 0 0 0 1px rgba(14, 34, 54, 0.04);
--shadow-2: 0 4px 12px rgba(14, 34, 54, 0.08), 0 0 0 1px rgba(14, 34, 54, 0.04);
--shadow-3: 0 12px 32px rgba(14, 34, 54, 0.10), 0 0 0 1px rgba(14, 34, 54, 0.05);
--shadow-focus: 0 0 0 3px color-mix(in oklch, var(--brand-primary) 35%, transparent);
```

Una sombra por elemento. `--shadow-2` para cards estándar; `--shadow-3` para modales y popovers.

### 4.4 Layout rhythm

- Gutter base de grilla: `--space-6` (24px) en desktop; `--space-4` en mobile.
- Padding de section vertical: `--space-20` desktop, `--space-12` mobile.
- Cards: `padding: var(--space-6)`; cards densas de operación: `var(--space-4)`.

---

## 5. Layout & Composition

### 5.1 Grid

- **Marketing:** grilla de 12 columnas, contenedor `max-width: 1280px`, gutter 24px.
- **Dashboard:** grilla flexible de 12 columnas dentro de `max-width: 1440px`, paneles sticky a 280px de ancho de navegación lateral.

### 5.2 Page structure

**Marketing**
1. Topbar fija translúcida con logotipo, navegación principal de 4–5 items, CTA "Solicitar cotización".
2. Hero: headline + sub + CTA + visual técnico (isométrico de equipo, fotografía de instalación real).
3. Secciones alternadas de fondo `--bg` ↔ `--surface` para ritmo.
4. Footer denso con direcciones de oficinas, certificaciones (NATE, EPA 608) y links legales.

**Dashboard**
1. Sidebar 280px con secciones: Resumen, Equipos, Órdenes de servicio, Mantenimiento, Reportes, Cuenta.
2. Topbar de 56px con buscador global, alertas, perfil.
3. Workspace: 12 columnas; widgets KPI (4×3 col), tabla principal (full width), drawer lateral para detalle.

### 5.3 Responsive

- Breakpoints: 360, 600, 768, 1024, 1280, 1440, 1920.
- Sidebar colapsa a icon-rail bajo 1024; a bottom-tab en mobile.
- Tablas operativas se convierten en lista de tarjetas bajo 768; columnas críticas (Equipo, Estado, Acción) se preservan.

### 5.4 Information density

Dashboard prioriza densidad: máximo 16 filas visibles sin scroll en 1080p. Marketing prioriza respiración: máximo 1 idea por viewport.

---

## 6. Components

### 6.1 Botones

| Variante | Uso | Estilo |
|---|---|---|
| Primary | CTA principal | `--brand-primary` fondo, texto blanco, radius `--radius-m`, padding `12px 20px` |
| Secondary | Acción alterna | Borde `--brand-deep`, texto `--brand-deep`, fondo transparente |
| Ghost | Acción terciaria | Solo texto `--brand-primary`, hover con `--brand-frost` |
| Danger | Confirmaciones destructivas | Fondo `--danger`, texto blanco |
| Icon | Acciones compactas | 36×36, `--radius-s`, hover `--brand-frost` |

Tamaños: `sm` (32px), `md` (40px), `lg` (48px). En dashboard predomina `sm`; en marketing `lg`.

### 6.2 Inputs y formularios

- Input estándar: 40px alto, borde `--border`, focus `--brand-primary` con `--shadow-focus`.
- Label arriba, helper text 13px gris, error text 13px `--danger`.
- Selects con caret custom; combobox para búsqueda de equipos.
- Date pickers calendar-style; mantenimiento programado usa rango.

### 6.3 Cards

- **Equipment card:** thumbnail isométrico + nombre + chip de estado + métrica primaria (BTU/h, temperatura). 320×220 mínimo.
- **KPI card:** label eyebrow + número grande mono + delta vs semana previa.
- **Service order card:** ID mono + cliente + dirección + chip de prioridad + asignación.

### 6.4 Tables

- Header sticky, fondo `--surface` con borde inferior `--border-strong`.
- Filas 48px alto en densidad media, 40px en compacta.
- Numéricos a la derecha, tabular-nums.
- Selección con checkbox; row hover `color-mix(in oklch, var(--brand-frost) 60%, transparent)`.
- Empty state ilustrado con icono lineal técnico, no humanoide.

### 6.5 Navigation

- Sidebar items: icono 20px + label, padding `var(--space-3) var(--space-4)`, item activo con barra 3px `--brand-primary` izquierda y fondo `--brand-frost`.
- Topbar marketing: links con underline animado bottom (1px → 2px en hover).
- Breadcrumbs en dashboard con separador `/` en `--fg-subtle`.

### 6.6 Modals & drawers

- Modal: overlay `rgba(11, 27, 46, 0.5)` con backdrop-filter blur 8px, panel `--surface` con `--shadow-3`, header sticky.
- Drawer lateral derecha 480px para detalle de orden / equipo, anim slide 240ms cubic-bezier(0.2, 0.8, 0.2, 1).

### 6.7 Status pills & chips

- Estado equipo: `Operativo`, `En mantenimiento`, `Falla`, `Apagado` — colores `--success`, `--info`, `--danger`, `--fg-muted`.
- Prioridad orden: `Crítica`, `Alta`, `Normal`, `Baja` — escala de saturación, no solo color.
- Refrigerante: chip mono con código (`R-410A`, `R-32`).

### 6.8 Charts (módulos operativos)

- Línea de temperatura: línea `--brand-primary` 2px, área `color-mix(in oklch, var(--brand-primary) 14%, transparent)`.
- Comparativo heating/cooling: línea cyan vs ámbar.
- Gauges de eficiencia con arco neutro + arco activo en color de estado.
- Sin 3D, sin pies, sin gradientes ornamentales.

---

## 7. Motion & Interaction

- **Duraciones:** instant 80ms, fast 160ms, base 240ms, slow 400ms.
- **Easing:** `cubic-bezier(0.2, 0.8, 0.2, 1)` para entradas; `cubic-bezier(0.4, 0, 0.2, 1)` para salidas.
- **Hover:** transición de `background-color`, `border-color`, `box-shadow` solamente. Sin translate de botones (transmite inestabilidad mecánica indeseada).
- **Focus visible:** siempre con `--shadow-focus`, nunca outline default del navegador.
- **Loading:** skeleton blocks con shimmer suave (no spinners parpadeantes salvo en async corto < 1s).
- **Transiciones de pantalla:** view-transitions API para navegación dashboard, fade 160ms.
- **Reduced motion:** respetar `prefers-reduced-motion: reduce` — eliminar shimmer, fades y view-transitions, mantener cambios de estado instantáneos.

---

## 8. Voice & Brand

- **Idioma primario:** español neutro de negocios, sin tuteo ("Solicite cotización", "Programe su mantenimiento"). Soporte completo en inglés US para clientes finales y técnicos.
- **Capitalización:** sentence case en buttons, labels y headings de dashboard. Title case solo en headlines de marketing.
- **Terminología técnica preferida:** "equipo", "sistema", "unidad condensadora", "evaporador", "carga térmica", "BTU/h", "SEER", "refrigerante", "mantenimiento preventivo", "orden de servicio". Evitar anglicismos cuando exista equivalente claro ("ticket" → "orden").
- **Números y unidades:** sistema imperial primario (BTU/h, °F, ton, sqft) con SI entre paréntesis cuando el cliente lo pida. Separador decimal punto en formato US.
- **Tono:** preciso, sobrio, sin exageración comercial. "Reduce su consumo eléctrico hasta 28% en operación continua" antes que "Ahorra mucho!". Cuando un dato no se tiene, decirlo con `—`, no inventar.
- **CTA bilingües frecuentes:** "Solicitar cotización" / "Request a quote", "Programar visita" / "Schedule a visit", "Ver ficha técnica" / "View spec sheet".

---

## 9. Anti-patterns

- ❌ Gradientes morados/violetas o lavados beige/peach/pink — rompen el lenguaje de refrigeración.
- ❌ Iconos emoji decorativos en titulares (❄️🔥💧). Iconos solo lineales técnicos.
- ❌ Ilustraciones humanoides genéricas estilo "corporate Memphis". Preferir isométricos técnicos, fotografía real, esquemas de flujo.
- ❌ Headings en serif editorial. La marca es ingeniería, no editorial.
- ❌ Tres acentos de color en una misma vista; el cyan es UNO.
- ❌ Sombras dramáticas, glow neón, bordes con gradiente.
- ❌ Tablas con stripes alternados ni con bordes verticales completos.
- ❌ Métricas inventadas sin fuente ("99.9% uptime"). Mejor `—` que números falsos.
- ❌ Botones con `transform: translateY` en hover — transmite vibración mecánica, no confianza.
- ❌ Modo oscuro en marketing — solo opera en dashboard.
- ❌ Decoración de íconos junto a cada heading.
- ❌ Spinners infinitos en lugar de skeletons.