Guía de Diseño Capitalta

Identidad

• Marca: Capitalta (SOFOM ENR) enfocada en construcción y bienes raíces.
• Tono: profesional, confiable, tecnológico, con acentos de energía.

Tipografía

• Primaria: Inter (Google Fonts), ya configurada globalmente.
• Jerarquía recomendada:
  • H1: font-bold, text-3xl en móvil, text-4xl en desktop.
  • H2: font-bold, text-2xl / text-3xl.
  • H3: font-semibold, text-xl / text-2xl.
  • Párrafo: text-base / text-lg en páginas largas.

Paleta de Colores

Los tokens están definidos en Tailwind bajo brand, semantic y neutral.

Marca

• Primario: brand.primary #0ea5e9
• Primario Oscuro: brand.primaryDark #0284c7
• Navy (Corporativo): brand.navy #002c5f
• Secundario: brand.secondary #14b8a6
• Acento: brand.accent #f59e0b
• Fondo claro: brand.lightBg #f1f5f9
• Borde claro: brand.slate #e2e8f0

Semánticos

• Éxito: semantic.success #10b981
• Advertencia: semantic.warning #f59e0b
• Error: semantic.error #ef4444
• Información: semantic.info #0ea5e9

Neutros

• neutral.50–neutral.900 para texto, bordes y fondos.

Uso y Combinaciones

• CTA: fondo bg-brand-primary, hover hover:bg-brand-primaryDark, texto text-white.
• Header/nav: text-neutral-900, acento text-brand-primary en hover.
• Tablas/tarjetas: fondo bg-white, borde border-brand-slate, sombras suaves.
• Estados: éxito bg-semantic-success/10 + text-semantic-success, error bg-semantic-error/10 + text-semantic-error.
• Acentos: text-brand-accent para indicadores y badges.

Componentes Base (Lineamientos)

• Botón primario: radio rounded-lg, padding px-4 py-2, bg-brand-primary.
• Botón secundario: bg-brand-secondary o variante outline con border-brand-primary.
• Input: borde border-neutral-300, foco ring-2 ring-brand-primary.
• Card: rounded-xl, border-brand-slate, bg-white, shadow-sm.
• Alert: fondo semántico tenue, icono y título font-semibold.

Ejemplos de Clases

<button class="bg-brand-primary hover:bg-brand-primaryDark text-white rounded-lg px-4 py-2">Cotizar ahora</button>
<div class="border border-brand-slate rounded-xl p-4 bg-white">Contenido</div>
<input class="border border-neutral-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-primary" />
<div class="bg-semantic-success/10 text-semantic-success rounded-lg p-3">Aprobado</div>

Gradientes (Opcionales)

• Azul: from-brand-primary to-brand-primaryDark
• Corporativo: from-brand-navy to-neutral-800
• Energía: from-brand-accent to-brand-primary

Radio de Borde

• rounded-lg y rounded-xl definidos para consistencia.

Accesibilidad

• Contraste mínimo AA en textos primarios y botones.
• Estados de foco visibles en inputs y enlaces.