Sistema de Diseño VIP Proage Wellness
Demostrando todos los componentes y utilidades del nuevo sistema de diseño construido con Tailwind CSS v4 y Astro 5
Variantes de Botones
Botones Principales
Botones Secundarios
Estados Especiales
Variantes de Tarjetas
Tarjeta Básica
Tarjeta con sombra suave y efecto de elevación al hacer hover.
Tarjeta Premium
Tarjeta con gradiente y efecto de resplandor al hacer hover.
Tarjeta con Borde
Tarjeta con borde definido y efecto de escala al hacer hover.
Tarjeta Plana
Tarjeta sin sombra con hover personalizado mediante utilidades.
Sistema Tipográfico
Jerarquía de Encabezados
Display XL
Título Hero
Display Large
Título Principal
Display Medium
Subtítulo
Display Small
Encabezado
Variantes de Texto
Lead Text
Texto destacado para introducciones y contenido importante.
Body Text
Texto principal para párrafos y contenido de lectura normal.
Body Secondary
Texto secundario para información complementaria.
Caption
Texto pequeño para etiquetas y metadata.
Paleta de Colores
Primary
primary-900 #2d3f42
primary-800 #3a434a
primary-700 #424d54
primary-500 #5a6870
primary-50 #f6f7f7
Secondary
secondary-900 #4a4039
secondary-400 #bfa491
secondary-300 #d4c4b5
secondary-200 #e8e0d5
secondary-50 #faf9f7
Neutral
neutral-900 #6b5d51
neutral-700 #a6866a
neutral-300 #f5ebe0
neutral-200 #faf6f1
neutral-100 #fdf8f3
Sistema de Grid Responsivo
Grid Auto Fit Small (250px min)
Item 1
Item 2
Item 3
Item 4
Grid Auto Fit Medium (300px min)
Item 1
Item 2
Item 3
Grid Auto Fit Large (350px min)
Item 1
Item 2
Utilidades del Sistema
Efectos Hover
Hover Lift - Elevación suave
Hover Glow - Resplandor sutil
Hover Scale - Escala al 105%
Gradientes
Gradiente Principal
Gradiente Secundario
Gradiente Neutro
¿Listo para implementar?
Consulta la documentación completa en DESIGN_SYSTEM.md para aprender a usar todos los componentes y utilidades del sistema de diseño.