Styleguide

Documentación de estilos y componentes para desarrollo

Colores de Branding

Primary Brand

#9a5a8f (Updated)

Primary Theme

CSS Variable

Secondary

CSS Variable

Accent

CSS Variable

Call-to-Action Buttons

Primary CTA

Botón principal con color de branding sólido. Se usa para acciones principales como "Comprar ahora", "Ver juegos", etc.

Ejemplo

Código CSS

/* Primary CTA */
.cta-primary {
  @apply bg-[#9a5a8f] hover:bg-[#9a5a8f]/90 text-white px-8 py-3 rounded-lg font-semibold transition-colors shadow-lg hover:shadow-[#9a5a8f]/25;
}

Secondary CTA

Botón secundario con fondo blanco y borde del color de branding. Se usa para acciones secundarias como "Más información", "Contactar", etc.

Ejemplo

Código CSS

/* Secondary CTA */
.cta-secondary {
  @apply bg-white border border-[#9a5a8f] text-[#9a5a8f] px-8 py-3 rounded-lg font-semibold transition-colors shadow-lg hover:bg-gray-200 hover:text-[#9a5a8f];
}

Hollow CTA

Botón hollow con solo borde y texto del color de branding, sin fondo sólido. Se usa para acciones terciarias o en contextos donde se necesita menos énfasis.

Ejemplo

Código CSS

/* Hollow CTA */
.cta-hollow {
  @apply border border-[#9a5a8f] text-[#9a5a8f] px-8 py-3 rounded-lg font-semibold transition-colors hover:bg-[#9a5a8f]/10 hover:text-[#9a5a8f];
}

Hero CTA (Especial)

Botón secundario del Hero con fondo translúcido y borde blanco. Se usa específicamente en la sección Hero sobre imágenes de fondo.

Ejemplo

Código CSS

/* Hero Secondary CTA */
.cta-hero-secondary {
  @apply bg-background/20 backdrop-blur-sm border border-white text-white px-8 py-3 rounded-lg font-semibold transition-colors hover:bg-white/20 hover:text-white;
}

Guías de Uso

Cuándo usar cada tipo

  • • Primary: Acciones principales, compras, suscripciones
  • • Secondary: Información adicional, contacto, exploración
  • • Hollow: Acciones terciarias, menos importantes
  • • Hero Secondary: Solo en sección Hero sobre imágenes

Consideraciones de Accesibilidad

  • • Contraste mínimo de 4.5:1 para texto
  • • Estados hover y focus claros
  • • Texto descriptivo en aria-label
  • • Navegación por teclado funcional

Soporte de Temas

Light Theme vs Dark Theme

Todos los CTAs se adaptan automáticamente al tema activo usando las variables CSS de Tailwind.

Light Theme

  • • Fondo claro con texto oscuro
  • • Bordes y sombras sutiles
  • • Contraste optimizado para lectura

Dark Theme

  • • Fondo oscuro con texto claro
  • • Bordes y sombras más pronunciados
  • • Contraste optimizado para lectura