Duwell Surveillance Premium watch system
← Color Fonts

Duwell Surveillance

Sistema visual para videovigilancia premium con antracita, gris metalico y rojo de alerta, enfocado en control, monitoreo y presencia industrial refinada.

FUENTE: Duwell-Surveillance-DESIGN.md

Typography

Display + body
Heading system
Oxanium
Specimen - 600 - 48px - ls -0.04em
Body system
Exo 2
400 - 16px / 26px
Duwell usa cuerpo tecnico y limpio para specs, copy de producto y mensajes de control, mientras la display sostiene un tono de vigilancia premium, firme y preciso.
Original observed fonts: proprietary industrial display / technical UI sans -> HTML: Oxanium / Exo 2 (Google substitutes selected for angular control and stable reading).
Labels system: Exo 2 - 600 - 12px / 18px for specs, panels, controls and security notes.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 0%

Colors

Alert core
Alert Red #E14238
Steel Gray #8A919B
Warm Dust #F0C9C2
Carbon Base #1D1F22

Background #1D1F22 · Surface #2A2D31 · Text #E9DDD7 · Border #454A52 · Accent #F0C9C2

Overview

Layout
Layout12-column system with object-led dark compositions
Content width1120px to 1280px for brandbook, product and print
FramingMonitor windows, lens focus, posters and device hero shots
Grid24px gutters, restrained left alignment, reserved media zones

Buttons

3 styles
Access now Open panel Alert note
Primary bg #E14238 · text #F7ECE7 · radius 16px · 14x22
Secondary transparent · border rgba(233,221,215,.18) · text #E9DDD7

Components

Live recipe
Control panel

Secure shell

Card oscura con borde de aleacion, radio controlado y CTA roja solo cuando hay accion o alerta. Nada se siente blando ni casual, todo parece modulo de control.

Authorize Inspect
Monitor input

Sector watch

stateonline track
radius16px shell, precise controls
focus3px red ring on dark panel

Spacing

Base 4
Observation rhythm
Quiet control blocks
El espacio separa visores, producto y copy con calma tensa. No es lujo vacio, es reserva funcional para que cada mensaje y objeto se lea sin interferencia.
Scan area
Scale
4px 12px 20px 32px 48px 96px
Gaps · Card padding
24px gutters 24px cards 16px fields

Elevation & Depth

Material shell

La profundidad sale de paneles metalicos, objetos oscuros y un brillo interior muy contenido. No hay glass, no hay blur ambiental. La elevacion se siente como peso fisico.

Technique Solid graphite cards, subtle inset highlight and heavy dark shadow for industrial mass.
Surface#2A2D31
Border#454A52
Shadow0 20px 38px rgba(0,0,0,.28)
Blur / deepNo blur, depth by shell mass

Shapes

Radius family

El sistema mezcla marcos de observacion con bordes controlados. Los radios refinan el hardware visual, pero la estructura sigue sintiendose precisa y vigilante.

10px micro 16px core shell 24px media object 9999px signal chip
Primary radius16px shell, rounded control frame
Icon set · treatmentFrames, watch windows, lens targets and signal pills

Do's and Don'ts

Guardrails

Do

Use red only for action, alert or live activity.
Keep surfaces dark, solid and materially heavy.
Reserve graphic space for panels, frames and monitored objects.
Use display type as a controlled structural voice, not as spectacle.

Don't

Do not soften the system with blurry dark gradients or glow clouds.
Do not let red become the background color of everything.
Do not mix playful rounded typography or cheerful color accents.
Do not place surveillance motifs inside the text zone.

Motion

Subtle

La guia no documenta motion formal, pero el sistema pide respuestas cortas y exactas: reveal de panel, encendido de estado, hover sobrio en CTA y ningun loop atmosferico.

Motion levelSubtle, status-led
DurationsNot specified in the board
EasingShort ease curves for reveals and alerts
Hover / scrollPanel reveal, indicator pulse, 1px lift
Generado desde DESIGN.md · design-md-styleguide · Duwell Surveillance
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #E14238;
  --color-secondary: #8A919B;
  --color-accent: #F0C9C2;
  --color-neutral: #E9DDD7;
  --color-background: #1D1F22;
  --color-surface: #2A2D31;
  --color-text-primary: #E9DDD7;
  --color-text-secondary: #B9B2AF;
  --color-border: #454A52;
  --font-display: "Oxanium";
  --font-body: "Oxanium";
  --radius-md: 16px;
  --radius-full: 9999px;
  --space-base: 4px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-gap: 24px;
  --space-section-padding: 96px;
}
@theme {
  --color-primary: #E14238;
  --color-secondary: #8A919B;
  --color-accent: #F0C9C2;
  --color-neutral: #E9DDD7;
  --color-background: #1D1F22;
  --color-surface: #2A2D31;
  --color-text-primary: #E9DDD7;
  --color-text-secondary: #B9B2AF;
  --color-border: #454A52;
  --font-display: "Oxanium";
  --font-body: "Oxanium";
  --radius-md: 16px;
  --radius-full: 9999px;
  --spacing-base: 4px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-gap: 24px;
  --spacing-section-padding: 96px;
}
{
  "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"
  }
}
---
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