glassmorphism-sistema-diseno @ 1.0.0
Design System

Glassmorphism
Design System

Sistema de diseño con efecto vidrio esmerilado para la plataforma de cliente CULTIVA IA. Tokens de diseño, componentes, estados y criterios de accesibilidad WCAG 2.2 AA.

01

Tokens de Color

Paleta semántica — usar siempre tokens, nunca valores en bruto
--color-primary
#1856FF
Acciones principales, CTA
--color-secondary
#3A344E
Superficies secundarias
--color-success
#07CA6B
Estados positivos
--color-warning
#E89558
Alertas, bajo rendimiento
--color-danger
#EA2143
Errores, acciones destructivas
--glass-bg
rgba(255,255,255,0.08)
Superficie glass base
--glass-border
rgba(255,255,255,0.18)
Borde luminoso glass
--color-text
#141414
Texto sobre fondo claro
02

Sistema Tipográfico

Plus Jakarta Sans (display/body) · JetBrains Mono (mono/código)
h1 · 3rem · 800
Plus Jakarta Sans
Impulsado por IA
h2 · 2.25rem · 700
Plus Jakarta Sans
Automatización inteligente
h3 · 1.75rem · 600
Plus Jakarta Sans
Resultados medibles
body-lg · 1.125rem · 400
Plus Jakarta Sans
Conectamos tu negocio con las herramientas de IA más avanzadas del mercado para escalar sin fricción.
body-md · 1rem · 400
Plus Jakarta Sans
La plataforma CULTIVA IA centraliza campañas, automatizaciones y reportes en un dashboard unificado.
label-caps · 0.75rem · 600
JetBrains Mono
TOKEN · VARIABLE · REFERENCIA
code · 0.875rem · 400
JetBrains Mono
backdrop-filter: blur(18px) saturate(180%);
03

Escala de Espaciado

Modo comfortable density — múltiplos de 8px
--space-xs · 4px
--space-sm · 8px
--space-md · 16px
--space-lg · 24px
--space-xl · 40px
--space-2xl · 64px
04

Bento Cards — KPI Dashboard

Componente de métricas glassmorphism · variantes: stat, chart, status
Agentes activos
247
↑ +18% vs. mes anterior
Todos operativos
Tareas automatizadas / mes
12.4K
↑ +34% MoM
Tasa de error
0.3%
↓ −0.8pp objetivo cumplido
Rendimiento por servicio — Jun 2026
98.5%
Marketing IA
94.1%
Automatización
87.3%
Contenido
76.0%
Datos & BI
SLA 99.9% Junio 2026
Alertas pendientes
3
⚠ Revisión recomendada
• Agente #031 sin respuesta 4h
• Límite API OpenAI al 88%
• Webhook inactivo: Slack #ops
05

Botones

4 variantes · 3 tamaños · estados completos
Variantes default state
Estados disabled
Con iconos icon-left
06

Badges de Estado

5 variantes semánticas · siempre con glow-dot en estados live
primary activo ⚠ alerta ✕ error archivado IA generativa WCAG AA límite próximo webhook caído beta en producción
07

Campos de Entrada

Estados: default · hover · focus · error · disabled
Identificador único visible en el dashboard
URL de destino para notificaciones
✕ Clave inválida. Regenera en Configuración → API Keys.
Disponible en plan Pro+
08

Estados Interactivos

Reglas de tokens para cada estado — no usar valores en bruto
Estado Background Border Shadow / Focus ring Notas
Default --glass-bg --glass-border --glass-shadow Blur 18px · saturate 180%
Hover --glass-bg-hover --glass-border-hover Shadow +4px elevation translateY(−1px) · cursor pointer
Focus-visible Sin cambio --color-primary outline 2px + offset 3px Obligatorio WCAG 2.2 §2.4.11
Active/Pressed opacity 0.9 Sin cambio Shadow reducido scale(0.98) · duración 100ms
Disabled opacity 0.38 opacity 0.38 Ninguno cursor: not-allowed · no pointer events
Error rgba(234,33,67,0.07) --color-danger 0 0 0 3px rgba(234,33,67,0.15) Acompañar siempre con mensaje de error
Loading Sin cambio Sin cambio Pulse animation Spinner + aria-busy="true" · deshabilitar input
09

Accesibilidad — WCAG 2.2 AA

Criterios testables en code review
🎨
Contraste de Color
Texto sobre glass oscuro debe superar ratio 4.5:1 (normal) o 3:1 (large).
Texto/#fff → 21:1 ✓
#7aaaff/bg → 4.8:1 ✓
⌨️
Navegación por Teclado
Todos los interactivos deben ser alcanzables con Tab. Focus visible obligatorio (2.4.11).
focus-visible implementado ✓
🔍
Tamaño mínimo objetivo
Elementos interactivos deben tener mínimo 24×24px de área de toque (WCAG 2.5.8).
btn-sm: 32px ✓
Reglas anti-blur para accesibilidad
Obligatorio: Usar prefers-reduced-motion para desactivar backdrop-filter y animaciones cuando el usuario lo solicite. Añadir @media (prefers-reduced-motion: reduce) y quitar blur + transiciones.
Obligatorio: El texto crítico sobre glass nunca debe depender solo del blur como separador visual. Añadir siempre un valor de background mínimo de rgba(0,0,0,0.30) como fallback si backdrop-filter no está soportado.
10

Anti-patrones y Buenas Prácticas

Cada regla anclada a token o umbral — no a adjetivos vagos
Hacer ✓
  • Usar tokens semánticos siempre: --color-primary en lugar de #1856FF en componentes
  • Preservar jerarquía visual: h1 > h2 > body nunca invertidos
  • Blur máximo 24px para rendimiento; preferir 18px como valor base
  • Acompañar estados de error con mensaje descriptivo + icono
  • Animar solo con propósito funcional (feedback, dirección)
  • Añadir focus-visible a todos los interactivos
  • Bento grid: mantener ratio de cards coherente, múltiplos de columna
No hacer ✗
  • Texto de bajo contraste sobre glass: ratio < 4.5:1 inaceptable
  • Blur > 30px en Chrome Android — rendimiento crítico degradado
  • Mezclar metáforas visuales: glass + skeumorfismo + flat en mismo componente
  • Espaciado inconsistente: nunca usar valores arbitrarios como 11px, 13px
  • Usar colores raw sin token: prohibido #1856FF directo en CSS de componente
  • Motion decorativo sin prefers-reduced-motion — violación WCAG
  • Cards sin estado hover definido — sensación de componente "muerto"
11

QA Checklist — Code Review

Ejecutable en PR antes de merge
Tokens y Fundamentos
  • ✓
    Todos los colores usan tokens CSS custom properties
  • ✓
    Espaciado usa variables de la escala (ningún px arbitrario)
  • ✓
    Tipografía referencia font-family, size y weight del token system
  • ✓
    Border-radius usa tokens: --radius-sm a --radius-2xl
  • ✓
    Blur no supera 24px en ningún componente nuevo
Componentes y Estados
  • ✓
    Todos los botones tienen estado hover, focus-visible, disabled
  • ✓
    Inputs tienen estado error con mensaje descriptivo
  • ✓
    Bento cards tienen mínimo 160px de altura
  • ✓
    KPI delta incluye dirección (↑↓) y contexto temporal
  • ✓
    Badges semánticos usan color correcto para su significado
Accesibilidad
  • ✓
    Contraste texto principal ≥ 4.5:1 verificado con herramienta
  • ✓
    Focus-visible implementado, no oculto con outline:none
  • ✓
    @media prefers-reduced-motion desactiva blur y animaciones
  • ✓
    Fallback background sin backdrop-filter para Safari < 15
  • ✓
    aria-label en iconos sin texto visible
Rendimiento y Responsive
  • ✓
    No más de 3 capas glass anidadas en mismo stack DOM
  • ✓
    will-change: transform solo en elementos con animación activa
  • ✓
    Bento grid colapsa a 1 columna en viewport < 768px
  • ✓
    Botones tamaño touch mínimo 44px en mobile
  • ✓
    Fuentes declaradas con font-display: swap