DESIGN.md - Sistema de Monitoreo Eléctrico "WattVision"

DESIGN.md - Sistema de Monitoreo Eléctrico "WattVision" mockup preview
Click to expand

El diseño debe transmitir confiabilidad técnica y control. No debe sentirse como una red social o una app de juegos. La interfaz está pensada para ser vista en una laptop o tablet en un entorno doméstico o de pequeño negocio en Bolivia. El ambiente es 'Power BI Dashboard' pero simplificado para el usuario final.

Background Primario:#121212
Superficie de Tarjetas:#1E1E1E
Acento Primario (Datos):#00E5FF
Acento de Alerta:#FF453A
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

titleInter · 24px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

kpimetricJetBrains Mono, Fira Code · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

El diseño debe transmitir confiabilidad técnica y control. No debe sentirse como una red social o una app de juegos. La interfaz está pensada para ser vista en una laptop o tablet en un entorno doméstico o de pequeño negocio en Bolivia. El ambiente es 'Power BI Dashboard' pero simplificado para el usuario final.

Components

Cards

Card Title

Sample body text for the card component.

Chart

default

default

hover

default

Do's & Don'ts

Do

Usar gráficos de área para suavizar picos de consumo.
Incluir la equivalencia en Bolivianos ('Bs.') siempre junto al kWh.

Don't

Usar colores pastel o fondos blancos (dificultan la lectura prolongada de datos).
Usar iconos genéricos de 'foco'. Preferir iconos de 'rayo', 'enchufe' o 'medidor'.
1. Visual Theme & Atmosphere

El diseño debe transmitir confiabilidad técnica y control. No debe sentirse como una red social o una app de juegos. La interfaz está pensada para ser vista en una laptop o tablet en un entorno doméstico o de pequeño negocio en Bolivia. El ambiente es "Power BI Dashboard" pero simplificado para el usuario final.

3. Component Stylings

• Tarjetas (Cards): border-radius: 16px. Fondo #1E1E1E. Padding interno de 20px. Borde sutil: 1px solid #2C2C2E.

• Gráficos (Charts): Líneas de grid en #2C2C2E. Datos en #00E5FF con #30D158 para gradientes de área. Sin líneas de borde gruesas.

• Tablas: Filas con border-bottom: 1px solid #2C2C2E. Hover sobre fila cambia fondo a #252525.

• Alertas: Caja con fondo #3A1C1C, texto rojo #FF453A y borde izquierdo de 4px solid #FF453A.

5. Layout Principles

• Grid: 12 columnas.

• Espaciado: Múltiplos de 8px (8px, 16px, 24px, 32px).

• Dashboard: Vista de 3 columnas (KPI, KPI, KPI) en la parte superior, Gráfico principal ocupando 8 columnas, Panel de Alertas ocupando 4 columnas en el lateral derecho.
Download .md
groquispe100inf-max groquispe100inf-max @groquispe100inf-max
License MIT
Uploaded 1 months ago
Version v1
File size 2.3 KB
Downloads 874
Copies 278
bold dark dashboard devtools mobile-app

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/groquispe100inf-max/design-md-sistema-de-monitoreo-el-ctrico-wattvision and implement it in my code

Don't have the MCP? Install it here