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
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
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.
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.
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