Esta guía NO es de obligado cumplimiento. Es una recomendación de estilo, no un estándar de la severidad de los Estándares de aplicaciones. Sirve como referencia para mantener una identidad visual coherente entre apps internas, pero cada proyecto puede justificar excepciones según su contexto (apps públicas, integraciones con marcas externas, dashboards técnicos, etc.).
Esta guía define el estilo visual que las aplicaciones de Pampling suelen seguir para mantener una identidad coherente. Es una referencia para desarrolladores (humanos o IA) 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