Dragona — Sistema de Diseño

Sistema de
Color

Paletas consistentes para charts, slides y visualizaciones — fondo blanco, alta densidad, premium.

7 CATEGORICOS · 4 SEMANTICOS · 3 SECUENCIALES · 3 DIVERGENTES

01 / 06

Paleta Categorica

Multiples Series

Para barras, lineas y charts con varias dimensiones

Blue #2563EB Principal
Teal #0D9488 Secundaria
Violet #7C3AED Terciaria
Pink #DB2777 4to canal
Amber #D97706 5to canal
Emerald #059669 6to canal
Slate #64748B Otros
02 / 06

Paleta Semantica

Significado en el Color

Bueno, malo, alerta y referencia — siempre los mismos colores

Positive #22C55E Crecimiento, ventas, ROAS bueno
Negative #EF4444 Caidas, alertas, ROAS malo
Warning #F59E0B Neutro, pendiente, threshold
Info #3B82F6 Referencia, benchmark, promedio
03 / 06

Estructura del Chart

Anatomia Visual

Fondo blanco · plot area `#F8FAFC` · grid `#E2E8F0`

Revenue mensual — Q1 2026
Todas las fuentes combinadas
Ene Feb Mar Abr May Jun Jul
Background #FFFFFF
Plot area #F8FAFC
Grid lines #E2E8F0
Axis text #94A3B8
Titles #1E293B
Legends #64748B
04 / 06

Paletas de Escala

Secuenciales y Divergentes

Para heatmaps, densidad, deltas y comparaciones

Secuencial
blue_seq
Usuarios, actividad, densidad
Secuencial
teal_seq
Revenue, MRR por cohorte
Secuencial
desert_sunset
Ops / demanda por hora-dia
Divergente
churn_diverge
Retention cohort (verde = bueno)
Divergente
growth_diverge
Growth rate (verde = positivo)
Divergente
delta_diverge
Diferencias neutrales
05 / 06

Cuando Usar Cada Paleta

Reglas de Uso

La paleta correcta hace que el dato hable solo

Situacion Multiples series / barras / lineas
Paleta Categorica — 7 colores
Situacion Una sola metrica de intensidad
Paleta Secuencial
Situacion Delta positivo / negativo
Paleta Divergente
Situacion Bueno / malo / alerta
Paleta Semantica
DRAGONA_COLORS = ["#2563EB", "#0D9488", "#7C3AED", "#DB2777", "#D97706", "#059669", "#64748B"]
paper_bgcolor = "#FFFFFF" · plot_bgcolor = "#F8FAFC" · gridcolor = "#E2E8F0"
06 / 06