Manual de Marca

Guía de identidad visual para mantener consistencia en todas las comunicaciones.

🎨 Paleta de Colores

Azul Voltio

#2563EB

Primario: botones, links, foco · blanco 5.2:1 AA

Brasa (chispa Blaze)

#F97316

CTA estrella + acentos · texto tinta 6.5:1

Cian Eléctrico

#22D3EE

Solo glow / profundidad — nunca texto

Tinta Profunda

#0B1220

Bandas oscuras 'tech' · blanco 18:1

Tinta

#0F172A

Texto principal · sobre blanco 16:1 AAA

Mute

#64748B

Texto secundario · sobre blanco 4.6:1 AA

Superficie

#F8FAFC

Fondo claro base

Verde Soles

#15803D

Éxito / 'Yape pagado'

Gradiente Eléctrico (titulares): linear-gradient(135deg, #2563EB 0%, #22D3EE 100%)

Gradiente Chispa (CTA estrella): linear-gradient(135deg, #F97316 0%, #EA580C 100%)

🔤 Tipografía

Space Grotesk (Display)

Tu barbería, automática

Geométrica con carácter casi-mono. Para titulares y números destacados: se lee "software serio y moderno" sin asustar.

Titulares + Números

Inter (Cuerpo / UI)

Agenda, caja y clientes

El caballo de batalla SaaS: ultra-legible para párrafos, agenda, caja y datos. La legibilidad es prioridad.

Cuerpo + Datos

🧩 Componentes UI

Botones

.btn-primary (azul) para la acción por defecto · .btn-cta (brasa, texto tinta) para el CTA estrella, máx. uno por pantalla · .btn-secondary para acciones secundarias.

Cards

Card Básica

Contenido de la card con sombra suave y bordes redondeados.

Card Destacada

Con borde azul para destacar el plan más popular.

Glassmorphism

Efecto vidrio para elementos flotantes sobre imágenes.

Badges

💈 Para Barberías⚡ IA 24/7🔥 Oferta Fundador⭐ Más Popular

.badge (azul) para etiquetas neutras · .badge-spark (brasa) para urgencia/oferta.

🗣️ Voz y Tono

✅ Así SÍ

  • Energético: "¡Haz crecer tu negocio hoy!"
  • Claro: "Chatbot que agenda citas automáticamente"
  • Empático: "Sabemos que estás ocupado con tus clientes"
  • Directo: "Resultados en 30 días o es gratis"

❌ Así NO

  • Corporativo: "Soluciones empresariales integrales"
  • Confuso: "Ecosistema omnicanal con IA generativa"
  • Distante: "Los usuarios pueden beneficiarse de..."
  • Vago: "Mejora tu presencia digital"