Sistema de Diseño

Sistema de diseño completo para la aplicación backoffice de Percus.

Colores de Marca

Paleta Principal

Azul Profundo
#0F4C81
Color de marca principal, encabezados, navegación

Azul Cielo
#1E88E5
Elementos interactivos, enlaces, resaltados

Naranja Percus
#FF6B35
Llamados a la acción, estados activos, resaltados

Paleta Neutral

Pizarra 900
#0F172A
Texto principal

Pizarra 700
#334155
Texto secundario

Pizarra 500
#64748B
Texto terciario, etiquetas

Pizarra 300
#CBD5E1
Bordes, divisores

Pizarra 100
#F1F5F9
Fondos, rellenos

Pizarra 50
#F8FAFC
Fondos de página

Colores Semánticos

Éxito
#10B981
Estados de éxito, métricas positivas

Advertencia
#F59E0B
Advertencias, estados de precaución

Error
#EF4444
Errores, acciones destructivas

Información
#3B82F6
Mensajes informativos

Tipografía

Familia Tipográfica

Fuente Principal: Inter

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

¿Por qué Inter?

• Excelente legibilidad en todos los tamaños
• Profesional y moderna
• Gran soporte para números y datos
• Ampliamente utilizada en aplicaciones SaaS

Escala Tipográfica

Nivel	Tamaño	Peso	Altura de línea	Uso
Display	2.5rem (40px)	700	1.2	Títulos de página
H1	2rem (32px)	700	1.25	Encabezados principales
H2	1.5rem (24px)	600	1.3	Encabezados de sección
H3	1.25rem (20px)	600	1.4	Encabezados de subsección
H4	1.125rem (18px)	600	1.4	Títulos de tarjeta
Cuerpo Grande	1rem (16px)	400	1.6	Texto de cuerpo principal
Cuerpo	0.875rem (14px)	400	1.5	Texto de cuerpo secundario
Pequeño	0.75rem (12px)	500	1.5	Etiquetas, subtítulos

Sistema de Espaciado

Utilizamos una unidad base de 8px para espaciado consistente:

Token	Tamaño	Uso
xs	0.25rem (4px)	Espaciado ajustado
sm	0.5rem (8px)	Espacios pequeños
md	1rem (16px)	Espaciado predeterminado
lg	1.5rem (24px)	Espaciado de sección
xl	2rem (32px)	Espacios grandes
2xl	3rem (48px)	Secciones principales

Radio de Borde

Token	Tamaño	Uso
sm	6px	Botones, insignias
md	8px	Inputs, tarjetas pequeñas
lg	12px	Tarjetas, paneles
xl	16px	Contenedores grandes
full	9999px	Pills, botones redondeados

Sombras

/* Pequeña - Elevación sutil */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

/* Media - Tarjetas, dropdowns */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* Grande - Modales, popovers */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

/* Sombra acento naranja (estados hover) */
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);

Componentes

Botones

Botón Principal

background: #FF6B35;
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 600;
border: 1px solid #FF6B35;

Hover:

background: #E55A28;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);

Botón Secundario

background: white;
color: #64748B;
padding: 0.5rem 1rem;
border-radius: 6px;
border: 1px solid #E2E8F0;

Hover:

border-color: #FF6B35;
color: #FF6B35;
background: #FFF5F1;

Tarjetas

background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-left: 3px solid #F1F5F9;
transition: all 0.2s;

Hover:

border-left-color: #FF6B35;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15);

Insignias

Insignias de Estado

Activo (Producción):

background: #FFE8DD;
color: #C7440A;
border: 1px solid #FFCDB3;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;

Pruebas:

background: #DBEAFE;
color: #1E40AF;
padding: 0.25rem 0.75rem;
border-radius: 999px;

Anterior/Inactivo:

background: #F1F5F9;
color: #64748B;
padding: 0.25rem 0.75rem;
border-radius: 999px;

Campos de Entrada

padding: 0.625rem 1rem;
border: 1px solid #E2E8F0;
border-radius: 8px;
font-size: 0.875rem;

Enfoque:

outline: none;
border-color: #FF6B35;
box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);

Navegación

Navegación Superior

• Altura: 64px
• Fondo: blanco
• Borde inferior: 1px solid #E2E8F0
• Posicionamiento fijo (sticky)

Pestañas de Proyecto

• Pestaña activa: Subrayado naranja (#FF6B35), texto en negrita
• Hover: Texto azul profundo (#0F4C81)
• Borde inferior: 2px para estado activo

Iconos y Emojis

Utilizamos emojis para indicadores visuales rápidos:

• 🟢 Producción/Activo
• 🔵 Pruebas/Beta
• ⚪ Anterior/Inactivo
• 📊 Analíticas/Gráficos
• 📧 Email
• 🔔 Notificaciones
• ↑ Crecimiento positivo
• ↓ Cambio negativo

Accesibilidad

Contraste de Color

Todo el texto cumple con los estándares WCAG AA:

• Texto de cuerpo: mínimo 4.5:1
• Texto grande: mínimo 3:1
• Elementos interactivos: Estados de enfoque claros

Estados de Enfoque

Todos los elementos interactivos tienen indicadores de enfoque visibles usando resplandor naranja:

box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);

Diseño Responsivo

• Enfoque mobile-first
• Breakpoints: 640px, 768px, 1024px, 1280px
• Objetivos táctiles mínimo 44x44px

Implementación

Configuración de Tailwind CSS

El backoffice utiliza Tailwind CSS con configuración personalizada:

module.exports = {
  theme: {
    extend: {
      colors: {
        'percus-blue': '#0F4C81',
        'percus-sky': '#1E88E5',
        'percus-orange': '#FF6B35',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

Principios de Diseño

1. Claridad Primero - La información debe ser clara y escaneable
2. Revelación Progresiva - Mostrar lo necesario, ocultar lo que no
3. Patrones Consistentes - Acciones similares se ven similares
4. Retroalimentación - Cada acción tiene una respuesta
5. Denso en Datos - Optimizar para densidad de información sin desorden

Mockup de UI

Ver el mockup interactivo: static/design/backoffice-simplified.html

El mockup muestra:

• Página de Inicio: Vista general de estadísticas + cuadrícula de tarjetas de proyecto
• Detalle de Proyecto - Plantillas: Tabla de gestión de versiones con indicadores Producción/Pruebas/Anterior
• Detalle de Proyecto - Integración: Credenciales API y ejemplos de código
• Detalle de Proyecto - Analíticas: Métricas específicas de campaña y gráficos