Saltar al contenido principal

Web / Admin

El design system web usa Tailwind CSS. Los tokens están registrados en tailwind.config.js como colores custom que extienden la paleta por defecto.

Tailwind config​

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50:  '#eef2ff',
          100: '#e0e7ff',
          200: '#c7d2fe',
          300: '#a5b4fc',
          400: '#818cf8',
          500: '#6366f1',  // primary
          600: '#4f46e5',  // hover
          700: '#4338ca',  // pressed
          800: '#3730a3',
          900: '#312e81',
          950: '#1e1b4b',
        },
        success: { 50: '#f0fdf4', 500: '#22c55e', 700: '#15803d' },
        warning: { 50: '#fffbeb', 500: '#f59e0b', 700: '#b45309' },
        danger:  { 50: '#fef2f2', 500: '#ef4444', 700: '#b91c1c' },
        info:    { 50: '#eff6ff', 500: '#3b82f6', 700: '#1d4ed8' },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
      },
      borderRadius: {
        sm:  '4px',
        DEFAULT: '8px',
        md:  '12px',
        lg:  '16px',
      },
    },
  },
}

Patrones comunes​

Botones​

<!-- Primario -->
<button class="bg-primary-500 hover:bg-primary-600 active:bg-primary-700 text-white
               font-medium text-sm px-4 py-3 rounded-lg transition-colors">
  Guardar
</button>

<!-- Secundario (outline) -->
<button class="border border-primary-500 text-primary-600 hover:bg-primary-50
               font-medium text-sm px-4 py-3 rounded-lg transition-colors">
  Cancelar
</button>

<!-- Destructivo -->
<button class="bg-danger-500 hover:bg-danger-700 text-white
               font-medium text-sm px-4 py-3 rounded-lg transition-colors">
  Eliminar
</button>

Badges de estado​

<!-- Éxito -->
<span class="bg-success-50 text-success-700 text-xs font-medium px-2 py-1 rounded-full">
  Activo
</span>

<!-- Advertencia -->
<span class="bg-warning-50 text-warning-700 text-xs font-medium px-2 py-1 rounded-full">
  Pendiente
</span>

<!-- Error -->
<span class="bg-danger-50 text-danger-700 text-xs font-medium px-2 py-1 rounded-full">
  Inactivo
</span>

<!-- Info -->
<span class="bg-info-50 text-info-700 text-xs font-medium px-2 py-1 rounded-full">
  Borrador
</span>

Alertas​

<!-- Éxito -->
<div class="bg-success-50 border border-success-500 text-success-700 rounded-lg p-4 flex gap-3">
  <svg class="w-5 h-5 text-success-500 shrink-0"><!-- check-circle icon --></svg>
  <p class="text-sm">Producto guardado correctamente.</p>
</div>

<!-- Error -->
<div class="bg-danger-50 border border-danger-500 text-danger-700 rounded-lg p-4 flex gap-3">
  <svg class="w-5 h-5 text-danger-500 shrink-0"><!-- x-circle icon --></svg>
  <p class="text-sm">No se pudo procesar el pago.</p>
</div>

Cards​

<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-none">
  <h3 class="text-lg font-semibold text-gray-900">Ventas del mes</h3>
  <p class="text-3xl font-bold text-gray-900 mt-2">S/ 48,230</p>
  <p class="text-sm text-gray-500 mt-1">+12% vs mes anterior</p>
</div>

Inputs​

<div class="flex flex-col gap-1">
  <label class="text-sm font-medium text-gray-700">Email</label>
  <input
    type="email"
    placeholder="usuario@empresa.com"
    class="border border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-100
           rounded-lg px-3 py-2 text-sm text-gray-900 placeholder-gray-400
           outline-none transition-colors"
  />
</div>

Admin Go templates​

En los templates Go del admin panel, los tokens están disponibles via clases Tailwind compiladas. No hay variables CSS separadas — Tailwind genera las clases al build time.

El base layout está en admin/templates/base.html. Los componentes reutilizables en admin/templates/components/.

Tipografía en web​

Inter se carga localmente (self-hosted, no Google Fonts):

<!-- admin/templates/base.html -->
<link rel="preload" href="/static/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
</style>