---
version: "1.0"
name: "Duwell Surveillance"
description: "Sistema de identidad oscuro e industrial para videovigilancia premium, con antracita mineral, rojo de alerta y una tipografia geometrica de precision."
colors:
  primary: "#E14238"
  secondary: "#8A919B"
  accent: "#F0C9C2"
  neutral: "#E9DDD7"
  background: "#1D1F22"
  surface: "#2A2D31"
  text-primary: "#E9DDD7"
  text-secondary: "#B9B2AF"
  border: "#454A52"
typography:
  display-lg:
    fontFamily: "Oxanium"
    fontSize: "64px"
    fontWeight: 600
    lineHeight: "60px"
    letterSpacing: "-0.04em"
  body-md:
    fontFamily: "Exo 2"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
  label-md:
    fontFamily: "Exo 2"
    fontSize: "12px"
    fontWeight: 600
    lineHeight: "18px"
rounded:
  md: "16px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "12px"
  md: "20px"
  lg: "32px"
  xl: "48px"
  gap: "24px"
  section-padding: "96px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "14px 22px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "14px 22px"
  button-link:
    textColor: "{colors.accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "0px"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.md}"
    padding: "24px"
---

# DESIGN.md - Duwell Surveillance

## 1. Tema Visual y Atmosfera

Duwell se siente como una marca de videovigilancia que quiere verse mas cercana a una firma de precision industrial que a una empresa de electronica de consumo. Todo vive sobre negros minerales, grises metalicos y rojos de alerta contenidos, con una presencia muy controlada del brillo y una preferencia clara por superficies solidas, materiales oscuros y composiciones centradas en objeto o interfaz.

La identidad visual trabaja con tension y silencio. No vende exuberancia sino control, monitoreo y fiabilidad. Incluso cuando aparecen mockups, posters o papeleria, el sistema mantiene un lenguaje de observacion: paneles, marcos, ventanas, objetivos, acceso restringido y luz roja como indicador de actividad, no como decoracion continua.

**Palabras clave de personalidad**: industrial, preciso, vigilante, oscuro, premium, tecnico, contenido

**Densidad del layout**: comfortable

**Modo preferido**: oscuro

**Nivel de ornamentacion**: subtle

**Audiencia visual objetivo**: marcas de seguridad premium, tecnologia de monitoreo, sistemas B2B y equipos de instalaciones

---

## 2. Paleta de Colores y Roles Semanticos

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Alert Red | `--color-primary` | `#E14238` | CTA, indicadores de actividad, foco visual y sellos de alerta | `#F7ECE7` |
| Alert Red Hover | `--color-primary-hover` | `#C2362D` | Hover de CTA y zonas activas | `#F7ECE7` |
| Alert Red Active | `--color-primary-active` | `#A92A22` | Estado pressed y maxima tension | `#F7ECE7` |
| Steel Gray | `--color-secondary` | `#8A919B` | Texto auxiliar fuerte, bordes metalicos y UI secundaria | `#17191C` |
| Warm Dust | `--color-accent` | `#F0C9C2` | Highlights suaves, copy sobre fondos claros y notas de contraste bajo | `#342625` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Carbon Base | `--color-bg` | `#1D1F22` | Fondo principal |
| Graphite Panel | `--color-surface` | `#2A2D31` | Cards, paneles y modulos |
| Raised Metal | `--color-surface-raised` | `#353A41` | Superficies elevadas, hero panels y overlays |
| Fog Overlay | `--color-surface-overlay` | `#E5DFDB` | Superficies claras, papel, material impreso |
| Alloy Border | `--color-border` | `#454A52` | Bordes y divisores |
| Low Border | `--color-border-subtle` | `#35383D` | Separadores suaves en dark |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto principal | `--color-text` | `#E9DDD7` | Titulares, body principal, labels fuertes |
| Texto secundario | `--color-text-secondary` | `#B9B2AF` | Descripciones, supporting copy |
| Texto muted | `--color-text-muted` | `#8C8684` | Metadata y notas secundarias |
| Texto sobre primario | `--color-text-on-primary` | `#F7ECE7` | Texto en botones y alertas rojas |

### Colores de estado

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Exito | `--color-success` | `#79B39B` | `#101A16` |
| Exito (bg) | `--color-success-bg` | `#1A2622` | - |
| Advertencia | `--color-warning` | `#D7A867` | `#271B0F` |
| Advertencia (bg) | `--color-warning-bg` | `#2D2318` | - |
| Error | `--color-error` | `#E14238` | `#F7ECE7` |
| Error (bg) | `--color-error-bg` | `#321715` | - |
| Info | `--color-info` | `#9FB3C5` | `#111B23` |
| Info (bg) | `--color-info-bg` | `#1B2630` | - |

La paleta es deliberadamente contenida. El rojo nunca compite con otros colores de alto voltaje: aparece como senal, no como festival. El resto del sistema se resuelve con metal, polvo tibio y negros industriales.

---

## 3. Reglas de Tipografia

### Familias tipograficas

```css
/* Heading: Oxanium - sustituto Google para la wordmark geometrica y angular observada en la guia */
--font-heading: 'Oxanium', sans-serif;

/* Body: Exo 2 - sans tecnica y estable para textos de producto, monitoreo y soporte */
--font-body: 'Exo 2', sans-serif;

/* Labels: Exo 2 - misma familia para paneles, specs y UI secundaria */
--font-mono: 'Exo 2', sans-serif;
```

**Google Fonts (implementacion web):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=Oxanium:wght@500;600;700&display=swap" rel="stylesheet">
```

**Nota sobre sustitucion**: la marca observada usa una sans display propietaria, muy construida, de hombros rectos y aperturas tecnicas. Se compararon `Oxanium`, `Aldrich` y `Chakra Petch`; `Oxanium` conserva mejor el tono de wordmark de seguridad premium sin volverse futurista caricaturesca. Para body se compararon `Exo 2`, `Saira` y `Barlow`; `Exo 2` fue la mas equilibrada para lectura tecnica y soporte comercial.

### Escala tipografica

| Token | rem | px equiv. | Line height | Uso |
|-------|-----|-----------|-------------|-----|
| `--text-xs` | 0.75rem | 12px | 1.4 | Metadata, seriales, specs |
| `--text-sm` | 0.875rem | 14px | 1.5 | Labels, microcopy, botones |
| `--text-base` | 1rem | 16px | 1.625 | Body principal |
| `--text-lg` | 1.125rem | 18px | 1.55 | Intro copy y descripciones destacadas |
| `--text-xl` | 1.375rem | 22px | 1.3 | Titulo de card |
| `--text-2xl` | 1.75rem | 28px | 1.16 | H3 y carteles de seccion |
| `--text-3xl` | 2.5rem | 40px | 1.05 | H2 y lockups |
| `--text-4xl` | 3rem | 48px | 1.02 | Display de sistema |
| `--text-5xl` | 4rem | 64px | 0.94 | Hero y wordmark dominante |

### Pesos tipograficos

```css
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```

### Letter spacing

```css
--tracking-tight: -0.04em;
--tracking-normal: 0em;
--tracking-wide: 0.06em;
--tracking-wider: 0.14em;
```

La voz tipografica no es editorial ni amable. Se siente calibrada. El display debe parecer construido, casi grabado o estampado, mientras el cuerpo sostiene la informacion tecnica sin ruido visual.

---

## 4. Estilos de Componentes

### Botones

**Primario**
```
Background: var(--color-primary)
Color de texto: var(--color-text-on-primary)
Padding: 14px 22px
Border-radius: 16px
Font-weight: var(--font-semibold)
Font-size: var(--text-sm)
Transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease

Hover:
  Background: var(--color-primary-hover)
  box-shadow: 0 14px 28px rgba(225, 66, 56, 0.18)

Active/Pressed:
  Background: var(--color-primary-active)
  transform: translateY(1px)

Disabled:
  Opacity: 0.45
  Cursor: not-allowed

Focus:
  Outline: 2px solid var(--color-accent)
  Outline-offset: 2px
```

**Secundario**
```
Background: transparent
Color: var(--color-text)
Border: 1px solid rgba(233, 221, 215, 0.18)
Padding: 14px 22px
Border-radius: 16px

Hover:
  Background: rgba(233, 221, 215, 0.05)
  Border-color: rgba(233, 221, 215, 0.30)
```

**Ghost / Texto**
```
Background: transparent
Color: var(--color-accent)
Border: none
Padding: 0

Hover:
  Color: var(--color-primary)
```

**Destructivo**
```
Background: var(--color-error)
Color: #F7ECE7
Misma estructura del primario
```

### Inputs de texto

```
Background: #2A2D31
Border: 1.5px solid #454A52
Border-radius: 16px
Padding: 12px 16px
Font-size: 16px
Color: #E9DDD7
Placeholder: #8C8684

Hover:
  Border-color: #5A616A

Focus:
  Border-color: #E14238
  Box-shadow: 0 0 0 3px rgba(225, 66, 56, 0.16)
  Outline: none
```

### Cards

```
Background: #2A2D31
Border: 1px solid #454A52
Border-radius: 16px
Padding: 24px
Box-shadow: 0 20px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.03)

Hover:
  Border-color: rgba(240, 201, 194, 0.26)
  Transform: translateY(-1px)
```

### Badges / Chips

```
Padding: 7px 12px
Border-radius: 9999px
Font-size: 12px
Font-weight: 600

Default:
  Background: rgba(255,255,255,0.06)
  Color: #E9DDD7

Primary:
  Background: rgba(225,66,56,0.14)
  Color: #F0C9C2
```

### Alertas / Toasts

```
Padding: 16px 20px
Border-radius: 16px
Border-left: 4px solid el color del estado
Background oscuro o fog overlay segun contexto
```

### Navegacion / Header

```
Background: #1D1F22 o transparente sobre hero dark
Border-bottom: 1px solid rgba(255,255,255,0.06)
Height: 64px
Padding horizontal: 24px

Links:
  Color: #B9B2AF
  Font-size: 12px
  Font-weight: 600
  Letter spacing: 0.10em
  Text-transform: uppercase

Hover:
  Color: #E9DDD7
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--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;
```

### Contenedores

```css
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1120px;
--container-xl: 1280px;
```

### Grid

```
Sistema: 12 columnas
Gutter: 24px
Margin lateral: 20px en mobile, 32px en tablet, auto en desktop
```

### Filosofia de espaciado

Duwell no usa mucho aire decorativo. Usa espacio para aislar objeto, mensaje y panel. La composicion necesita calma, pero una calma tensa, con reservas claras para copy, producto y senales visuales.

---

## 6. Profundidad y Elevacion

### Sistema de sombras

```css
--shadow-none: none;
--shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.03);
--shadow-md: 0 20px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.03);
--shadow-lg: 0 28px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.04);
--shadow-xl: 0 36px 64px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255,255,255,0.04);
```

### Niveles de elevacion

| Nivel | Token de sombra | Uso |
|-------|----------------|-----|
| 0 - Base | `--shadow-none` | Fondo carbon |
| 1 - Raised | `--shadow-sm` | Chips, mini paneles |
| 2 - Floating | `--shadow-md` | Cards principales y paneles de producto |
| 3 - Overlay | `--shadow-lg` | Posters, kiosks, signal modules |
| 4 - Modal | `--shadow-xl` | Hero objects, device showcases |

### Radios de borde

```css
--radius-none: 0px;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 9999px;
```

El radio predominante es `16px`. No busca ternura, sino control industrial contemporaneo. Es suficiente para refinar el sistema sin quitarle rigidez funcional.

---

## 7. Lo que Si y lo que No

### Hacer

1. **Usa el rojo como indicador de estado o tension** - nunca debe perder su poder de alerta.
2. **Mantiene superficies oscuras, solidas y densas** - la marca necesita masa material.
3. **Reserva espacio claro para objetos, posters y monitores** - el producto debe leerse sin ruido.
4. **Usa paneles, marcos o ventanas como gesto grafico** - el sistema habla de observacion y control.
5. **Mantiene la tipografia display muy contenida y estructural** - menos expresiva, mas precisa.
6. **Usa fotografia low-key y luz puntual** - la escena debe sentirse nocturna y controlada.

### No hacer

1. **No conviertas el fondo en humo, nebula o gradientes blandos** - rompe el tono industrial.
2. **No dejes que el rojo cubra grandes superficies sin razon** - debe seguir siendo senal.
3. **No mezcles azules electricos, verdes o acentos brillantes extra** - ensucian el sistema.
4. **No pongas adornos en la zona de copy** - objetivos, marcos o iconos deben vivir aparte.
5. **No uses tipografia redonda o demasiado friendly** - la identidad perderia tension.
6. **No ablandes las cards con exceso de glass o blur** - la marca pide materia y control.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
@media (min-width: 640px) { }
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
@media (min-width: 1280px) { }
```

### Cambios por breakpoint

**Mobile (< 640px)**
- Navegacion: logo + menu resumido
- Grid: 1 columna
- Tipografia H1: 40px
- Padding de contenedor: 16px
- Cards: full-width

**Tablet (640px - 1024px)**
- Navegacion: links abreviados o drawer
- Grid: 2 columnas
- Tipografia H1: 48px
- Padding de contenedor: 24px

**Desktop (> 1024px)**
- Navegacion: full nav visible
- Grid: 12 columnas o composicion 7/5
- Tipografia H1: 64px
- Padding de contenedor: 32px o auto con max-width

### Touch targets

- Botones minimo: 44x44px
- Inputs: minimo 44px
- Elementos de control: hitbox minimo 44x44px

### Filosofia responsive

El sistema debe mantener lectura tecnica y composicion de vigilancia tanto en mobile como en desktop. Mobile-first en controles, desktop-first en presencia de marca y objetos.

---

## 9. Guia de Prompts para Agentes

### Prompt de inicializacion de sesion

```txt
Estas trabajando con el sistema visual de Duwell Surveillance.

PALETA: antracita #1D1F22, panel #2A2D31, rojo alerta #E14238, gris metal #8A919B y texto tibio #E9DDD7.
TIPOGRAFIA: headings con Oxanium, body y labels con Exo 2.
ESTILO: seguridad premium, industrial y oscura, con paneles de observacion, control visual y senales rojas contenidas.
TOKENS: usa siempre variables CSS y evita hardcodear colores fuera de la paleta.
MODO: oscuro.
```

### Prompt: Crear nueva pantalla

```txt
Crea una pantalla de [FUNCIONALIDAD] para Duwell Surveillance.

Requisitos:
- sigue el DESIGN.md de Duwell
- usa superficies oscuras y estructura de panel o monitor
- reserva el rojo para CTA, alerta o indicador de actividad
- debe sentirse premium, preciso y vigilante
```

### Prompt: Anadir componente al UI kit

```txt
Anade un componente de [TIPO] al sistema Duwell Surveillance.

Debe:
- usar exclusivamente los tokens del sistema
- incluir estados default, hover, active, disabled y focus
- sentirse tecnico, oscuro e industrial
- evitar fondos nebulosos o gradientes suaves
```

### Prompt: Revision de consistencia

```txt
Revisa esta interfaz y detecta que elementos no siguen el sistema Duwell Surveillance.

Para cada problema:
1. senala el elemento
2. explica por que rompe la identidad
3. corrige con el token o patron correcto
```

### Prompt: Variante de campana

```txt
Genera una variante promocional o de keynote para Duwell Surveillance manteniendo carbono, rojo alerta y composicion de observacion industrial.

No conviertas la marca en una landing glow genérica. Usa marcos, paneles, visores, luz roja puntual y superficies controladas.
```

---

## 10. Movimiento (Motion)

La board no documenta motion de forma explicita. El tono del sistema pide transiciones secas y medidas: aparicion de paneles, hover corto en CTA, desplazamientos minimos en cards y encendido puntual de indicadores. Nada continuo, nada playful.

**Nivel de motion**: subtle, no especificado literalmente en la guia

**Duraciones**: no especificadas en la board

**Easings**: no especificados en la board

**Propiedades animadas en hover**: color, shadow minima y desplazamiento de 1px

**Patrones de motion**: panel reveal, indicator glow breve, swap de vistas y focus states muy claros

```css
--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
--duration-fast: 150ms;
--duration-base: 220ms;
```

Respeta siempre `prefers-reduced-motion: reduce` y evita loops ambientales.

---

## Anexo: Stack tecnico detectado

- **Plataforma / builder**: no inferible desde la board, probablemente presentacion o brandbook
- **Animacion**: no especificada
- **3D**: no visible como requisito del sistema
- **Animacion vectorial**: no especificada
- **Comportamiento**: branding de seguridad con fuerte uso de objeto, papeleria, paneles y entorno fisico