La paleta usa alto contraste sobre superficie oscura. Ratio mínimo de contraste: 4.5:1 (texto normal) · 3:1 (texto grande y UI). Todos verificados WCAG 2.2 AA.
Base 4px. Escala: 4 / 8 / 12 / 16 / 24 / 32. Usar siempre tokens; nunca valores arbitrarios.
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-6
24px
--space-8
32px
Componentes
Botones
Todos los estados (default, hover, focus-visible, disabled) deben ser visibles. Focus ring: 3px solid --color-primary + offset 3px. Mínimo target táctil: 44×44px.
Componentes
Badges
Etiquetas de estado semántico. Usar siempre con texto legible, nunca solo con color. Font: JetBrains Mono uppercase. No usar para acciones (usar Button).
PrimarioBetaActivoAdvertenciaError
Componentes
Cards
Contenedores con border sutil. El borde superior de acento (2px gradient) se usa solo en cards de feature o destacadas. Hover eleva con sombra + border primario.
⚡
Featured
Automatización IA
Crea flujos de trabajo inteligentes que se adaptan en tiempo real a los datos de tus campañas. Sin código, sin fricción.
2.4M
tareas automatizadas este mes
📊
Estable
Analytics Predictivo
Modelos de ML entrenados sobre tus datos históricos para predecir conversiones, churn y LTV con 87% de precisión.
87%
precisión predictiva media
🔗
Beta
Integraciones Nativas
Conecta con Meta Ads, Google Ads, HubSpot, Notion, Slack y 340+ herramientas más con OAuth2 en un click.
340+
conectores disponibles
Componentes
Inputs de Formulario
Estados: default, focus (ring primario), error (ring danger), success (ring success), disabled. Label siempre visible (no usar solo placeholder). Hint text en mono.
— Estado: default
— Estado: filled (focus si activo)
✗ El dominio no puede contener espacios
✓ Conexión verificada · latencia 42ms
Guía de Uso
Anti-Patrones Prohibidos
Reglas concretas para que el estilo Dramatic se mantenga coherente en toda la aplicación.
✓ Hacer
Usar siempre tokens CSS (var(--color-primary))
Respetar el ritmo de espaciado (escala ×4)
Texto oscuro solo sobre fondos claros (#FAFAFA sobre superficies)
Focus ring visible en todos los interactivos
Labels explícitos en todos los inputs
Gradients solo en acentos — nunca en cuerpo de texto
✗ No hacer
Valores raw (#8B5CF6 hardcoded en componentes)
Texto gris sobre gris — contraste insuficiente
Espaciados de 6px, 10px, 15px (fuera de escala)
Botones sin estado :focus-visible
Usar solo color para comunicar estado (sin texto/icono)
Animaciones de entrada sin prefers-reduced-motion
Calidad
QA Checklist — Code Review
Ejecutar en cada PR que toque UI. Todos los ítems deben ser ✓ antes de merge.
Checklist · Sistema Dramático v1.0
Tokens de color — Todos los colores usan var(--color-*). No hay valores HEX hardcoded en componentes.
Contraste WCAG 2.2 AA — Texto normal ≥ 4.5:1; texto grande ≥ 3:1. Verificado con axe-core en CI.
Focus visible — Todo elemento interactivo tiene :focus-visible con ring de 3px --color-primary. Navegación por teclado funcional.
Tipografía — Solo Outfit (400/900) y JetBrains Mono. Escala 12/14/16/20/24/32 únicamente.
Espaciado — Solo valores de la escala ×4 (4/8/12/16/24/32). Sin valores arbitrarios.
Estados de componentes — Buttons y inputs tienen: default, hover, focus, active, disabled, error (donde aplica).
Semántica HTML — Landmarks correctos (nav, main, article). Listas con role="list". Labels asociados a inputs.
Motion — Animaciones respetan @media (prefers-reduced-motion: reduce). No autoplay sin control de usuario.
Badges semánticos — No usan solo color. Incluyen texto y/o icono. aria-label si son icon-only.
Responsive — Breakpoint 700px verificado en Chrome DevTools. Nav colapsada. Grid de inputs en 1 columna.