Todas las aplicaciones de Pampling siguen un diseño visual unificado. Esta guía define los estándares estéticos que todo desarrollador (humano o IA) debe seguir al construir interfaces.
Referencia visual: Pampling Analytics · Surtido Retail
Estas variables van en el :root de cada aplicación. Son el contrato estético del equipo:
:root {
/* ── Fondo ── */
--bg-base: #F5F0EB; /* Arena cálido */
--bg-card: rgba(255, 255, 255, 0.70); /* Tarjeta glass */
--bg-card-2: rgba(255, 255, 255, 0.90); /* Tarjeta sólida */
--bg-input: rgba(255, 255, 255, 0.80); /* Inputs */
/* ── Bordes ── */
--border: rgba(45, 42, 38, 0.08);
--border-light: rgba(45, 42, 38, 0.05);
/* ── Texto ── */
--text-primary: #2D2A26; /* Casi negro cálido */
--text-secondary: rgba(45, 42, 38, 0.60);
--text-muted: rgba(45, 42, 38, 0.35);
/* ── Acento principal (violeta) ── */
--accent-a: #7947F8;
--accent-a-end: #A855F7;
--accent-a-grad: linear-gradient(135deg, #7947F8, #A855F7);
--accent-a-soft: rgba(121, 71, 248, 0.10);
/* ── Acento secundario (azul) ── */
--accent-b: #4A9EFF;
--accent-b-soft: rgba(74, 158, 255, 0.10);
/* ── Semánticos ── */
--green: #5C8A6C;
--green-soft: rgba(92, 138, 108, 0.12);
--amber: #C99555;
--amber-soft: rgba(201, 149, 85, 0.12);
--red: #E05252;
--red-soft: rgba(224, 82, 82, 0.12);
/* ── Radios ── */
--radius-sm: 8px;
--radius: 16px;
--radius-lg: 20px;
/* ── Sombras ── */
--shadow: 0 1px 4px rgba(45, 42, 38, 0.06);
--shadow-md: 0 4px 16px rgba(45, 42, 38, 0.08);
/* ── Tipografía ── */
--font: 'Poppins', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* ── Layout ── */
--nav-height: 60px;
}
Fuente principal: Poppins (Google Fonts)
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
| Elemento | Tamaño | Peso | Color | Extras |
|---|---|---|---|---|
| Título de página (h1) | 32px | 800 | --text-primary |
letter-spacing: -1px |
| Etiqueta de sección | 14px | 600 | --accent-a |
Precedido por barra — en acento |
| Subtítulo / descripción | 14px | 400 | --text-secondary |
Debajo del h1 |
| Título de card/sección | 10px | 600 | --text-muted |
text-transform: uppercase; letter-spacing: 1px |
| Valor KPI principal | 28px | 800 | --accent-a |
letter-spacing: -1px |
| Valor KPI (secundario) | 14–16px | 700 | --text-primary |
— |
| Texto auxiliar KPI (media) | 11px | 400 | --text-primary |
— |
| Badge de variación | 11px | 700 | --green / --red |
border-radius: 20px |
| Enlace de navegación | 13px | 600 | --text-secondary |
Activo: --accent-a con bg --accent-a-soft |
| Texto tabla header | 10px | 600 | --text-muted |
text-transform: uppercase; letter-spacing: 0.5px |
| Texto tabla celda | 13px | 400–600 | --text-primary |
— |
| Label de filtro | 10px | 600 | --text-muted |
text-transform: uppercase; letter-spacing: 1px |
| Body base | 14px | 400 | --text-primary |
— |
| Uso | Color | Valor |
|---|---|---|
| Fondo general de página | Arena cálido | #F5F0EB |
| Tarjeta / card | Blanco glass | rgba(255,255,255,0.70) |
| Tarjeta sólida | Blanco casi opaco | rgba(255,255,255,0.90) |
| Input / select | Blanco suave | rgba(255,255,255,0.80) |
| Uso | Color | Valor |
|---|---|---|
| Principal | Casi negro cálido | #2D2A26 |
| Secundario | — | rgba(45,42,38,0.60) |
| Muted / labels | — | rgba(45,42,38,0.35) |
| Uso | Color | Valor |
|---|---|---|
| Acento principal | Violeta | #7947F8 |
| Acento degradado | Violeta → púrpura | #7947F8 → #A855F7 |
| Acento secundario | Azul | #4A9EFF |
| Uso | Color | Fondo soft |
|---|---|---|
| Positivo / subida | #5C8A6C |
rgba(92,138,108,0.12) |
| Alerta / atención | #C99555 |
rgba(201,149,85,0.12) |
| Negativo / bajada | #E05252 |
rgba(224,82,82,0.12) |
Importante: Nunca usar los colores semánticos como fondo sólido. Siempre usar la versión
soft(con 10–12% de opacidad) como fondo y el color sólido como texto/icono.
nav {
position: fixed;
top: 0;
width: 100%;
height: var(--nav-height); /* 60px */
padding: 0 32px;
background: rgba(245, 240, 235, 0.85);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
z-index: 100;
display: flex;
align-items: center;
gap: 6px;
}
--text-primary, precedido por punto en --accent-a--text-secondary, padding 6px 14px--accent-a-soft, color --accent-a, border-radius: 8px--text-muted, con punto verde de estado.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius); /* 16px */
padding: 20px 22px;
box-shadow: var(--shadow);
}
border-color: var(--accent-a) y box-shadow: 0 0 0 2px var(--accent-a-soft)Estructura interna:
--accent-a, tracking -1px.delta {
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
}
.delta.pos { color: var(--green); background: var(--green-soft); }
.delta.neg { color: var(--red); background: var(--red-soft); }
▲ para positivo y ▼ para negativo▲ 5,6% (con espacio después del símbolo).tab {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
padding: 6px 14px;
border-radius: var(--radius-sm);
cursor: pointer;
}
.tab.active {
color: var(--text-primary);
background: rgba(45, 42, 38, 0.05);
}
.btn-primary {
background: var(--accent-a-grad);
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 8px 22px;
border: none;
border-radius: 999px; /* Pill */
cursor: pointer;
}
--bg-input, border --border, radius --radius-sm (8px), font-size 13pxaccent-color: var(--accent-a))th {
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
}
td {
font-size: 13px;
padding: 12px;
border-bottom: 1px solid var(--border-light);
}
--accent-a-soft y color --accent-a.section-title {
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.cardLas filas de alerta usan un fondo soft según severidad:
.alert-row-red { background: var(--red-soft); }
.alert-row-amber { background: var(--amber-soft); }
.alert-row-green { background: var(--green-soft); }
Con un punto de color sólido como indicador a la izquierda.
Configuración base para todos los gráficos:
const chartDefaults = {
chart: {
fontFamily: "'Poppins', system-ui, sans-serif",
toolbar: { show: false },
background: 'transparent',
},
colors: ['#7947F8', '#4A9EFF', '#5C8A6C', '#C99555', '#E05252'],
grid: {
borderColor: 'rgba(45, 42, 38, 0.06)',
strokeDashArray: 4,
},
xaxis: {
labels: {
style: { colors: 'rgba(45,42,38,0.35)', fontSize: '11px', fontWeight: 600 }
},
axisBorder: { show: false },
axisTicks: { show: false },
},
yaxis: {
labels: {
style: { colors: 'rgba(45,42,38,0.35)', fontSize: '11px' }
}
},
tooltip: {
theme: 'light',
style: { fontSize: '12px' },
},
legend: {
fontSize: '12px',
fontWeight: 600,
labels: { colors: 'rgba(45,42,38,0.6)' },
},
dataLabels: { enabled: false },
};
strokeDashArray: 4), muy sutilesshow: false)borderRadius: 4)┌─────────────────────────────────────────────┐
│ Nav: ● Brand [Tab] [Tab] [Tab] ETL ↻ │ ← fixed, blur
├─────────────────────────────────────────────┤
│ │
│ — SECCIÓN TAG │
│ Título de Página │
│ Descripción secundaria │
│ │
│ ┌─ Panel de filtros ─────────────────────┐ │
│ │ [Período] [◄ Fecha ►] [Aplicar] │ │
│ │ LABEL LABEL LABEL │ │
│ │ [Input] [Select] [Select] ☑ Check │ │
│ └────────────────────────────────────────┘ │
│ │
│ ┌──KPI──┐ ┌──KPI──┐ ┌──KPI──┐ ┌──KPI──┐ │
│ │ LABEL │ │ LABEL │ │ LABEL │ │ LABEL │ │
│ │ VALOR │ │ VALOR │ │ VALOR │ │ VALOR │ │
│ │ ▲ var │ │ ▼ var │ │ ▼ var │ │ ▲ var │ │
│ └───────┘ └───────┘ └───────┘ └───────┘ │
│ │
│ ┌─ Gráfico ──────────┐ ┌─ Tabla/Top ────┐ │
│ │ │ │ │ │
│ │ [chart area] │ │ # Nombre Val │ │
│ │ │ │ 1 ... ... │ │
│ └─────────────────────┘ └────────────────┘ │
└─────────────────────────────────────────────┘
32px horizontal, 24px vertical16–20pxgap: 16px, ancho equitativoTodas las páginas siguen este patrón:
<!-- Etiqueta de sección con barra -->
<div class="section-tag">
<span class="tag-bar"></span> <!-- barra de 24px en --accent-a -->
Nombre de la Sección
</div>
<!-- Título principal -->
<h1>Título de la Página</h1>
<!-- Descripción -->
<p class="page-desc">Descripción breve · Contexto adicional</p>
.section-tag {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
color: var(--accent-a);
margin-bottom: 6px;
}
.tag-bar {
width: 24px;
height: 3px;
background: var(--accent-a);
border-radius: 2px;
}
h1 {
font-size: 32px;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -1px;
margin: 0 0 4px;
}
.page-desc {
font-size: 14px;
color: var(--text-secondary);
}
Antes de dar por terminada una nueva vista, verificar:
:root copiadas--bg-base (arena, no blanco)--bg-card semitransparente--accent-a con peso 800--border suave← Decisiones · → Home