Captadata Design System
Modern AI-First Design System
Built for Captadata's AI agency landing page with glassmorphism effects, modern typography, and seamless animations.
Sistema de Tipografía
Headings
Hero Heading
.heading-hero - clamp(2.5rem, 5vw, 4rem)
Extra Large
.heading-xl - clamp(2rem, 4vw, 3.5rem)
Large Heading
.heading-lg - clamp(1.5rem, 3vw, 2.5rem)
Body Text & Effects
Hero body text for important descriptions
.body-hero - 1.25rem
AI Gradient Text Effect
.text-ai-gradient
Technical Monospace
.text-tech-mono
Button Components
Botones Primarios
Secundarios y Ghost
Efecto Cristal
Sistema de Iconos con Lucide
Utilizamos Lucide Vue Next para iconos consistentes, escalables y optimizados. Perfectos para interfaces de AI con símbolos técnicos y modernos.
AI & Brain
Brain
Performance
Zap
Security
Shield
Precision
Target
Ejemplos de botones con iconos en diferentes posiciones:
Biblioteca Completa de Iconos
Haz clic en cualquier icono para copiar su nombre al portapapeles
Red Neuronal
brain-network
Nodo de Datos
data-node
Automatización IA
automation
Red Neural
neural-network
Procesador IA
ai-processor
Agente de Voz
voice-wave
Flujo de Datos
data-flow
Agente Inteligente
smart-agent
Inteligencia Artificial
Brain
Procesamiento
Cpu
Red Neural
Network
Automatización
Workflow
Algoritmos
GitBranch
Monitoreo
Activity
Velocidad
Zap
Crecimiento
TrendingUp
Analytics
BarChart3
Estadísticas
PieChart
Tendencias
LineChart
Precisión
Target
Seguridad
Shield
Privacidad
Lock
Supervisión
Eye
Verificación
UserCheck
Base de Datos
Database
Servidor
Server
Nube
Cloud
Capas de Datos
Layers
Continuar
ArrowRight
Siguiente
ChevronRight
Enlace Externo
ExternalLink
Descargar
Download
Reproducir
Play
Lanzar
Rocket
Buscar
Search
Filtrar
Filter
Configuración
Settings
Código
Code
Terminal
Terminal
Documentación
FileText
Usuarios
Users
Teléfono
Phone
Global
Globe
Éxito
CheckCircle
Alerta
AlertCircle
Información
Info
Ayuda
HelpCircle
Destacado
Star
Calendario
Calendar
Tiempo
Clock
Componentes de Tarjeta
Analíticas IA
Algoritmos avanzados de aprendizaje automático para analizar tus datos y proporcionar insights accionables.
Suite IA Premium
Nuestra plataforma IA insignia con características avanzadas para procesamiento de datos a nivel empresarial.
Automatización Inteligente
Herramientas de automatización inteligente que optimizan tu flujo de trabajo y aumentan la productividad.
Sistema de Temas Dual
Soporte completo para modo claro y oscuro con detección automática del sistema. Cambia entre temas usando el switcher en la esquina superior derecha.
Modo Claro
Diseño profesional con fondos claros, perfecto para entornos de oficina y trabajo diurno. Optimizado para máxima legibilidad.
Fondo: Blanco suave (#FAFAFA)
Primario: Captadata Red
Texto: Negro profesional
Modo Oscuro
Tema oscuro elegante que reduce la fatiga visual en entornos con poca luz. Mantiene el contraste profesional para interfaces de AI.
Fondo: Gris oscuro profesional
Primario: Red ajustado
Texto: Blanco suave
Prueba el Cambio de Tema
Usa el switcher de arriba para cambiar entre modo claro, oscuro, o automático (sistema)
Professional AI Agency Color Palette
Nuestra paleta de colores refleja confianza profesional, innovación tecnológica y la identidad de marca Captadata. Diseñada para transmitir credibilidad y modernidad en el sector de inteligencia artificial.
Captadata Red
#d31725
Captadata Black
#403939
AI Blue
#2563eb
AI Purple
#7c3aed
AI Cyan
#06b6d4
AI Green
#10b981
🎯 Confianza Profesional
Fondos claros y neutros que transmiten profesionalismo y credibilidad, esenciales para una agencia de AI que maneja datos críticos de negocio.
🚀 Innovación Tecnológica
Acentos en azul y cian que evocan tecnología avanzada y innovación, reforzando nuestra posición como líderes en inteligencia artificial.
🔴 Identidad de Marca
El rojo Captadata (#d31725) como color primario mantiene la identidad de marca mientras se integra armoniosamente con la paleta profesional.
Ejemplos de Contraste Mejorado
✅ Contraste Correcto
Título Legible
Este texto tiene suficiente contraste para ser fácilmente legible sobre el fondo blanco de la tarjeta.
🎨 Variantes de Tarjetas
Tarjeta de Servicio
Fondo sólido blanco con gradiente sutil para máxima legibilidad.
Tarjeta AI con contraste optimizado
Pixel Tracking Integration
Interactive examples of Facebook Pixel and TikTok Pixel event tracking with real-time debugging capabilities. Test different event types and parameters to see how they integrate with our analytics system.