Bold Design System · WCAG 2.2 AA
Sistema de
Diseño Bold
Guía de implementación opinionada para CULTIVA IA. Tokens listos para ingeniería, componentes con estados completos y criterios de accesibilidad testeables.
28
Design Tokens
6
Componentes
AA
WCAG 2.2
44px
Touch Target Min
01 — Contexto y objetivo
Intención de diseño
CULTIVA IA comunica autoridad, claridad y confianza tecnológica. El estilo Bold establece presencia visual fuerte mediante tipografía expresiva, colores de alto contraste y layouts comandantes — sin sacrificar legibilidad ni accesibilidad.
Regla de oro
Cada decisión de diseño debe poder justificarse con un token o umbral concreto. Los adjetivos subjetivos ("bonito", "limpio") sin ancla a valores son anti-patrones de documentación.
02 — Fundamentos
Tokens de color
Todos los valores de color deben referenciarse mediante tokens semánticos. El uso de valores HEX directos en componentes está prohibido.
--color-primary
#0077BC
CTAs, links, focus
--color-secondary
#009866
Acentos, badges alt
--color-success
#16A34A
Estados OK, confirmación
--color-warning
#D97706
Alertas, pendiente
--color-danger
#DC2626
Errores, destrucción
--color-surface
#111111
Fondos dark, nav
--color-text
#111827
Texto principal
--color-bg-subtle
#F9FAFB
Fondos de sección
Ratios de contraste (WCAG 2.2 AA)
| Token | Valor | Sobre blanco | Sobre surface | Normal text | Large text |
|---|---|---|---|---|---|
| --color-primary | #0077BC | 5.9:1 | 9.2:1 | ✓ Pasa | ✓ Pasa |
| --color-text | #111827 | 17.1:1 | — | ✓ Pasa | ✓ Pasa |
| --color-text-muted | #6B7280 | 4.6:1 | — | ⚠ Solo large | ✓ Pasa |
| --color-secondary | #009866 | 4.8:1 | 7.4:1 | ✓ Pasa | ✓ Pasa |
03 — Tipografía
Escala tipográfica
Desktop-first expressive scale. Archivo Black para titulares y CTAs. Archivo para body. JetBrains Mono para tokens, código y labels técnicos.
Impacto
Encabezado principal
Sección importante
Subsección de contenido
Cuerpo de texto principal. Legible en pantalla y en mobile.
ETIQUETA TÉCNICA · TOKEN
04 — Componentes
Botones
El botón es el componente de acción principal. Mínimo 44px de altura para touch targets. Siempre usa font-family: var(--font-primary) para el label.
Variantes
Tamaños
/* Anatomía del botón primario */ .btn-primary { background: var(--color-primary); color: white; padding: 12px var(--space-6); font-family: var(--font-primary); /* MUST */ min-height: 44px; /* MUST — touch target */ border-radius: var(--radius-md); border: 2px solid var(--color-primary); } /* Estado focus-visible OBLIGATORIO */ .btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
| Estado | Visual | Token/Valor | Teclado |
|---|---|---|---|
| default | Fondo primary, texto blanco | --color-primary | Tab para foco |
| hover | Fondo -15% lightness + shadow-md | --color-primary-hover | — |
| focus-visible | Ring 3px primary + offset 2px | --color-focus-ring | Tab / Shift+Tab |
| active | Fondo -25% + translateY(0) | --color-primary-active | Space / Enter |
| disabled | opacity: 0.38, cursor not-allowed | — | No focusable |
| loading | Spinner + label "Cargando..." | aria-busy="true" | No activable |
05 — Componentes
Badges y etiquetas
Activo
Completado
Pendiente
Error
Archivado
Pro
WCAG AA
No usar color como único indicador
Badges deben incluir siempre texto o icono además del color. El punto de estado (badge-dot) es decorativo y debe ir acompañado de label de texto.
06 — Componentes
Cards
Automatización
Agentes de IA para ventas
Automatiza seguimiento, calificación de leads y CRM con agentes de IA entrenados en tu negocio.
Contenido
Generación de contenido
Posts, newsletters y copies optimizados para tu audiencia generados con IA y revisados por expertos.
Premium
Dashboard inteligente
Monitoriza KPIs, alertas automáticas y reportes IA en un solo panel personalizado.
07 — Componentes
Formularios
Nombre legal o comercial de tu empresa.
✗ Formato de email no válido. Incluye dominio completo.
08 — Componentes
Navegación
09 — Componentes
Alertas y callouts
Información
Tu plan actual incluye 5 agentes activos. Para ampliar, actualiza a Enterprise.
Agente desplegado
El agente "Calificador de leads B2B" está activo y procesando conversaciones.
Límite de uso al 80%
Has consumido 4.000 de 5.000 créditos este mes. Revisa tus automatizaciones.
Error de autenticación
La conexión con HubSpot CRM ha fallado. Verifica tus credenciales de API en Ajustes.
10 — Accesibilidad
Criterios WCAG 2.2 AA
Cada criterio es testeable en code review. No admitir excepciones estéticas que violen los umbrales.
| Criterio | Regla | Cómo testar |
|---|---|---|
| Contraste texto | Mínimo 4.5:1 texto normal, 3:1 texto grande (≥18px bold o ≥24px) | axe DevTools, WebAIM Contrast Checker |
| Focus visible | outline 3px solid --color-focus-ring con offset ≥2px en todos los elementos interactivos | Tab por la página, verificar ring visible |
| Touch target | Mínimo 44×44px para botones, links y controles de formulario | DevTools → bounding box del elemento |
| Movimiento reducido | @media (prefers-reduced-motion: reduce) elimina transform y transition | OS accessibility → reduce motion → verificar |
| Labels | Todo input con label o aria-label explícito. Placeholder no reemplaza label. | axe, NVDA/VoiceOver test |
| Color solo | No usar color como único indicador de estado. Añadir texto o icono. | Screenshot en escala de grises |
| Orden de foco | Tab order sigue orden visual. No usar tabindex positivo. | Tab desde inicio, verificar secuencia lógica |
| Contraste no-texto | Bordes de input y iconos UI mínimo 3:1 sobre fondo | Contrast Analyzer en elementos no-texto |
11 — Anti-patrones
Qué evitar
✓ HACER
✓ Usar tokens semánticos:
var(--color-primary)✓ Escala de espaciado 4/8/12/16/24/32px
✓ Jerarquía tipográfica: Archivo Black para títulos
✓ Focus-visible en todos los interactivos
✓ Labels en todos los inputs de formulario
✓ Touch target ≥44px en móvil
✗ NO HACER
✗ HEX directos:
#0077BC en componentes✗ Espaciado arbitrario: margin: 11px, 17px, 23px
✗ Texto claro sobre fondo claro (ratio <4.5:1)
✗ Eliminar outline/focus ring por estética
✗ Placeholder como sustituto de label
✗ Color como único diferenciador de estado
12 — QA
Checklist de code review
Ejecutar en cada PR que modifique componentes de UI. Cada ítem debe tener un aprobado explícito del revisor.
- Todos los colores usan tokens CSS var(--color-*)
- Espaciado en múltiplos de 4 (4/8/12/16/24/32)
- Contraste verificado con axe DevTools (0 errores AA)
- Tab order probado manualmente (secuencia lógica)
- focus-visible presente en todos los interactivos
- Touch targets ≥44px en todos los botones y links
- Labels en todos los inputs (no solo placeholder)
- Test con prefers-reduced-motion habilitado
- Sin valores HEX directos en componentes
- Test NVDA/VoiceOver en formularios nuevos
- Títulos usan font-family: var(--font-primary)
- Screenshot grayscale: estados distinguibles sin color
- Botones con min-height: 44px
- Imágenes con alt text descriptivo (no vacío)
- Estados hover/focus/active implementados
- Revisión mobile 375px (iPhone SE breakpoint)
CULTIVA IA — Bold Design System v1.0.0
WCAG 2.2 AA
MIT License
skill: sistema-diseno-bold