PulsePass Design System
Resident Advisor style — Editorial, sobrio, moderno. Para la comunidad electrónica real.
👆 Usá el botón arriba para cambiar entre light y dark mode
Tipografía
Heading 1
Eventos electrónicos
Heading 2
Próximos eventos
Heading 3
Panel de control
Body Text
La ticketera más simple y estética para fiestas electrónicas, con control de acceso impecable y pensada para la comunidad real.
Monospace (código/QR)
QR-2025-ABC-123-XYZPaleta de Colores
Acento principal — CTAs, acciones importantes
Acento secundario — Links, acciones alternativas
Errores, eliminaciones, alertas críticas
Confirmaciones, operaciones exitosas
Advertencias, atención moderada
Fondos sutiles, texto secundario
Typography System
Componentes de texto semánticos y reutilizables
Headings
Display
Welcome to PulsePass
H1
My Dashboard
H2
Upcoming Events
H3
Event Details
H4
Payment Method
<H1>My Dashboard</H1>Body Text
Discover the best electronic music events in your city
<Lead>...</Lead>This event will take place at the main venue downtown. Limited capacity available.
<Body>...</Body>Important information about your tickets and event access.
<BodyLarge>...</BodyLarge>Limited capacity. First come, first served.
<BodySmall>...</BodySmall>Utility Text
Last updated 2 hours ago
<Muted>...</Muted>* Terms and conditions apply
<Small>...</Small>TKT-2024-1234<Code>...</Code>Status Text
Invalid email format
<ErrorText>...</ErrorText>Account created successfully!
<SuccessText>...</SuccessText>Prices
$45.00
<Price>$45.00</Price>$25
<PriceSmall>$25</PriceSmall>Special Text
Read our privacy policy for details.
<TextLink>...</TextLink>The Future of Events
<GradientText>...</GradientText>Summer Electronic Festival
Electronic Music · Downtown
Join us for an unforgettable night of electronic music with world-class DJs.
From
$45.00
Available
<Card>
<H3>Summer Electronic Festival</H3>
<Muted>Electronic Music · Downtown</Muted>
<BodySmall>Join us for...</BodySmall>
<Price>$45.00</Price>
<SuccessText>Available</SuccessText>
</Card>Form Components
Sistema completo de componentes para formularios
FormField
Password must be at least 8 characters
Only letters, numbers and underscores
<FormField
label="Email"
type="email"
registration={register("email")}
error={errors.email?.message}
icon={<Mail className="w-4 h-4" />}
/>FormActions
<FormActions
submitText="Create"
onCancel={handleCancel}
/><FormActions
layout="row"
submitText="Save"
/>Form Messages
FormError
⚠️Invalid credentials. Please try again.
FormSuccess
✓Account created successfully!
FormHint
💡Your password must be at least 8 characters and include a number.
<FormError error={error} />
<FormSuccess message={success} />
<FormHint>Tip here</FormHint>FormDivider
<FormDivider text="or continue with" />FormSection
Account Details
Your login credentials
Personal Information
Tell us about yourself
<FormSection
title="Account Details"
description="Your credentials"
>
<FormField label="Email" />
<FormField label="Password" />
</FormSection>Sign In
Welcome back to PulsePass
<form onSubmit={handleSubmit(onSubmit)}>
<FormField
label="Email"
registration={register("email")}
error={errors.email?.message}
icon={<Mail className="w-4 h-4" />}
/>
<FormField
label="Password"
type="password"
registration={register("password")}
error={errors.password?.message}
/>
<FormActions
submitText="Sign In"
isSubmitting={isLoading}
/>
<FormDivider text="or" />
<FormSecondaryButton onClick={handleGoogle}>
Sign in with Google
</FormSecondaryButton>
</form>Event Cards
Componente principal para mostrar eventos
Event Slider
Carrusel de eventos en homepage
Layout Components
Contenedores reutilizables para páginas
<FormPageLayout>
<LoginForm />
</FormPageLayout><PageLayout maxWidth="7xl">
<Content />
</PageLayout>Dashboard Stats
1,248
+12% vs mes pasado
24
8 esta semana
892
71% tasa de conversión
$18,750
+24% este mes
Formularios
Sistema de Espaciado
Componentes para spacing consistente y semántico
Micro spacing (elementos muy cercanos)
Compact spacing (elementos relacionados)
Comfortable spacing (secciones)
Spacious spacing (grandes secciones)
Compact spacing con diferentes alineaciones
Wrap para múltiples elementos
Grid 1-2-3 columnas con gap comfortable
Feature 1
Description
Feature 2
Description
Feature 3
Description
Grid 1-2-4 columnas con gap compact
Card 1
Card 2
Card 3
Card 4
Spacer vertical
Divider con label
Content above divider
Content below divider
Divider decorativo
Section 1
Section 2
Section con padding comfortable
Section Title
Section con padding y spacing interno consistente
Inset con padding en diferentes lados
Padding all sides (md)
Padding horizontal only (lg)
Padding vertical only (sm)
Sign In
Enter your credentials to continue
Don't have an account?
Sign upVer la SPACING_SYSTEM.md para guías completas, mejores prácticas y ejemplos de migración.
Skeleton/Loading System
Componentes para estados de carga consistentes
Skeleton básico con diferentes formas
SkeletonText con diferentes configuraciones
Pulse animation (default)
Wave animation
SkeletonCard completo
SkeletonCard con avatar
Diferentes tamaños de avatar
LoadingSpinner en diferentes tamaños
LoadingSpinner en diferentes variantes
Grid de eventos loading
Botón con loading state
Diferentes tipos de imagen skeleton
Square
Video (16:9)
Portrait (3:4)
Wide (21:9)
Ver la SKELETON_SYSTEM.md para guías completas, mejores prácticas y patrones de uso.
Badge/Tag System
Componentes para categorías, estados, etiquetas y más
Estados básicos
Con punto de color
Diferentes tamaños
<StatusBadge status="success">Aprobado</StatusBadge><StatusBadge status="pending" withDot>Procesando</StatusBadge>Variante subtle (default)
Variante outline
Variante solid
<CategoryBadge>Concierto</CategoryBadge><CategoryBadge variant="outline" color="secondary">Rock</CategoryBadge>Tipos de precio
Tamaños
<PriceBadge>$45.00</PriceBadge><PriceBadge type="discount">-20%</PriceBadge>Notificaciones con límite
Variantes
<CountBadge count={5} /><CountBadge count={150} max={99} /> // Muestra 99+Tags removibles
Clickeables
Deshabilitado
<InteractiveBadge onRemove={() => remove()}>Rock</InteractiveBadge><InteractiveBadge onClick={() => filter()}>Ver más</InteractiveBadge>Con iconos (izquierda)
Icono a la derecha
Variantes
<IconBadge icon={<Star className="w-3 h-3" />}>Premium</IconBadge>Grupo básico
Con límite de visibles (maxVisible=3)
Spacing comfortable
<BadgeGroup maxVisible={3}> {tags.map(tag => <CategoryBadge key={tag}>{tag}</CategoryBadge>)}</BadgeGroup>Gradientes disponibles
Con animación pulse
<GradientBadge gradient="sunset">Destacado</GradientBadge><GradientBadge gradient="ocean" animate>Nuevo</GradientBadge>Card de evento con badges
Techno Warehouse Session
25 de Octubre, 23:00 - Buenos Aires
Panel de usuario con badges
Juan Pérez
PremiumVerificadoLista de pedidos
Pedido #1234
CompletadoPedido #1235
ProcesandoPedido #1236
CanceladoVer la BADGE_SYSTEM.md para guías completas, mejores prácticas y patrones de uso.
Empty State System
Componentes para estados vacíos, errores y sin contenido
Empty state básico
No hay mensajes
Tu bandeja de entrada está vacía
Con acción
No hay mensajes
Tu bandeja de entrada está vacía
Diferentes tamaños
Pequeño
Mediano
Grande
<EmptyState icon={<Inbox />} title="No hay mensajes" />EmptySearch - Sin resultados de búsqueda
No encontramos resultados para "techno party"
Prueba buscando: house, electrónica, trance
EmptyList - Lista vacía con creación
No hay eventos
Aún no has creado ningún evento
<EmptySearch searchTerm="techno" onClear={...} /><EmptyList title="No hay eventos" onCreate={...} />Vista de Creador
Aún no has creado eventos
Crea tu primer evento y comienza a vender entradas
Vista de Asistente
No hay eventos disponibles
Vuelve pronto para ver próximos eventos
<EmptyEvents userRole="creator" onCreate={...} /><EmptyEvents userRole="attendee" onBrowse={...} />Error404 - Página no encontrada
Página no encontrada
La página que buscas no existe o fue movida
Error500 - Error del servidor
Algo salió mal
Ocurrió un error en nuestros servidores. Estamos trabajando para solucionarlo.
NoPermission - Acceso denegado
Acceso denegado
No tienes permisos para acceder a esta página
<Error404 onGoHome={() => navigate("/")} /><Error500 onRetry={() => window.location.reload()} /><NoPermission onGoBack={() => navigate(-1)} />Lista con loading y empty state
No hay eventos
Aún no has creado ningún evento
Dashboard con widgets vacíos
Sin notificaciones nuevas
No tienes favoritos aún
Búsqueda sin resultados
No encontramos resultados para "evento inexistente"
Intenta con otros términos de búsqueda o revisa la ortografía
Ver la EMPTY_STATE_SYSTEM.md para guías completas, mejores prácticas y patrones de uso.
Toast System
Sistema de notificaciones moderno y consistente
Success Toast ✅
¡Guardado exitosamente!
Los cambios se guardaron correctamente
Error Toast ❌
Error al guardar
No se pudo conectar al servidor
Warning Toast ⚠️
Conexión inestable
Tu conexión es lenta, puede haber retrasos
Info Toast ℹ️
Nueva actualización disponible
Haz clic aquí para actualizar
Operación completada
Se cerrará automáticamente en 5 segundos
El toast se pausa automáticamente al hacer hover
position="top-right"Default - Esquina superior derecha
position="top-left"Esquina superior izquierda
position="top-center"Centro superior
position="bottom-right"Esquina inferior derecha
position="bottom-left"Esquina inferior izquierda
position="bottom-center"Centro inferior
Confirmación simple
addNotification({
type: "success",
title: "¡Guardado!",
duration: 3000
});Error con acción
addNotification({
type: "error",
title: "Error al cargar",
message: "No se pudo conectar",
duration: 0 // Persiste
});Warning persistente
addNotification({
type: "warning",
title: "Conexión limitada",
message: "Modo offline activado",
duration: 0,
persistent: true
});Cuándo usar cada tipo:
- Success: Operaciones completadas, guardados exitosos, confirmaciones
- Error: Fallos, errores de validación, problemas de red (sin auto-dismiss)
- Warning: Advertencias, conexión inestable, límites próximos
- Info: Información general, actualizaciones, tips
Duraciones recomendadas:
- Success: 3000-5000ms (breve confirmación)
- Error: 0ms (usuario debe leer el error)
- Warning: 0ms (advertencias importantes)
- Info: 5000-8000ms (información no crítica)
Ver la TOAST_SYSTEM.md para guías completas, mejores prácticas y patrones de uso.
⚠️ Sistema de Animaciones - DEPRECADO
Los componentes de animación React han sido removidos. Usa utilidades directas de Tailwind CSS.
Por qué el cambio: Las animaciones con componentes React son 96% más lentas que las utilidades directas de Tailwind CSS. El bundle es 95% más pequeño usando CSS puro.
Ver documentación: ANIMATION_SYSTEM.md y WHY_DIRECT_TAILWIND_IS_BETTER.md
Patrones de Reemplazo
Hover Scale
className="transform-gpu transition-transform duration-200 hover:scale-105"Hover Lift
className="transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"Click Feedback
className="transform-gpu transition-transform duration-100 active:scale-95"Fade In
className="motion-safe:animate-in motion-safe:fade-in motion-safe:duration-300"Slide In (Ticket Reveal)
className="motion-safe:animate-in motion-safe:slide-in-from-bottom-4 motion-safe:zoom-in-95 motion-safe:duration-500"Glow Pulse
className="animate-glow-pulse-subtle"Ejemplos en Vivo
Hover Scale
Hover Lift
Click Me!
Aura Tech Components
Componentes del sistema Aura Tech (glass morphism, spotlight effects)
CTASection
Join the Community
Connect with thousands of event creators and attendees
<CTASection
kicker="EXAMPLE CTA"
kickerDot
title="Join the Community"
subtitle="Description text"
>
<PrimaryButton>Action</PrimaryButton>
</CTASection>Card Variants (Glass)
Glass Card
bg-black/40 backdrop-blur-md
Glass Secondary
bg-black/30 backdrop-blur-sm
Glass Hover
Hover me! Interactive glass card
<Card variant="glass">Content</Card>
<Card variant="glass-hover">Hover me</Card>IconContainer
<IconContainer
icon={<Ticket />}
variant="primary"
size="md"
/>GlassPanel + SectionHeader
Section with Glass Panel
This is a glass panel with a section header. Perfect for content sections.
<GlassPanel variant="default">
<SectionHeader
kicker="FEATURED"
title="Title"
action={<Button>Action</Button>}
/>
<Content />
</GlassPanel>Efectos Electronic Theme
Hover para ver el efecto glow sutil con lime accent.
Borde con acento lime sutil.
Texto con acento lime y glow suave.
Las animaciones pulse, glow-wave y loading-sweep están desactivadas en esta vista para evitar layout shift. Podés activarlas manualmente agregando las clases cuando las necesites.