Sistema de Diseño · v1.0.0

Verba AI

Fundaciones visuales, tokens y componentes. Estilo: moderno editorial. WCAG 2.2 AA.

IBM Plex Serif JetBrains Mono LegalTech SaaS v1.0 · Jun 2026 Modern Design System
§ 01

Contexto y objetivo

Verba AI analiza contratos legales complejos en segundos. El sistema de diseño garantiza que cada elemento visual refuerza confianza, precisión y claridad — sin decoración superflua que reste autoridad al contenido.

Intención de diseño: Construir una interfaz con la sobriedad tipográfica de una publicación legal de referencia, pero con la fluidez de interacción de un producto digital moderno.

§ 02

Tokens de color

color-primary
#553F83
primary-dark
#3D2D6B
primary-light
#7A64A8
color-secondary
#111111
color-bg
#FAFAF8
bg-subtle
#F2F0EC
color-success
#16A34A
color-warning
#D97706
color-danger
#DC2626
color-muted
#7A7670
color-border
#E5E2DB
color-text
#FFFFFF
/* CSS Design Tokens — Verba AI */ :root { /* Brand */ --color-primary: #553F83; --color-secondary: #111111; /* Semantic */ --color-success: #16A34A; --color-warning: #D97706; --color-danger: #DC2626; /* Surface */ --color-bg: #FAFAF8; --color-bg-subtle: #F2F0EC; --color-border: #E5E2DB; --color-muted: #7A7670; }
§ 03

Escala tipográfica

display 3rem · 200
IBM Plex Serif

Lee menos. Decide más.

h1 2.5rem · 300
IBM Plex Serif

Análisis de contratos

h2 2rem · 400
IBM Plex Serif

Revisión automática de cláusulas

h3 1.5rem · 500
IBM Plex Serif

Riesgo detectado en Cláusula 4.2

body-lg 1.25rem · 300
IBM Plex Serif

Verba AI extrae obligaciones, penalizaciones y fechas clave de cualquier contrato en menos de 30 segundos.

body 1rem · 400
IBM Plex Serif

El contrato incluye una cláusula de exclusividad (§ 8.3) con penalización del 15% sobre el valor total en caso de incumplimiento. Se recomienda revisión por asesor legal.

body-sm 0.875rem · 400
IBM Plex Serif

Última actualización · 14 Jun 2026 · Procesado por Verba AI v3.1.2

label-caps 0.75rem · 500
JetBrains Mono

Estado del contrato · Riesgo alto · Pendiente de firma

mono 0.875rem · 400
JetBrains Mono

contrato_proveedor_2026-06-14_v3.pdf · sha256:a4b9c3...

§ 04

Escala de espaciado

space-1 · 4px
space-2 · 8px
space-3 · 12px
space-4 · 16px
space-6 · 24px
space-8 · 32px
space-10 · 40px
space-12 · 48px
space-16 · 64px
§ 05

Componentes — Button

Variantes

Tamaños

Estados

/* Button — regla: padding siempre con token, nunca valores raw */ .btn { padding: 10px var(--space-6); /* ✓ usa tokens */ font-family: var(--font-mono); /* ✓ mono para CTAs */ border-radius: var(--radius-sm); /* ✓ 4px — editorial sharp */ } /* ANTI-PATRÓN: padding:10px 20px — NO usar raw */
§ 06

Componentes — Badge

Sin revisar En análisis Aprobado Revisión requerida Riesgo alto
Firmado Pendiente Vencido Procesando
§ 07

Componentes — Input

Nombre interno para identificación rápida.
Separa múltiples partes con punto y coma.
Formato de fecha inválido. Usa YYYY-MM-DD.
Separa con comas para mejorar la búsqueda.
§ 08

Componentes — Card

Contrato Marco NDA

Activo

TechServ S.A. · 12 cláusulas · Firmado 01 Ene 2026

Vigencia: 12 meses · Sin penalización por rescisión anticipada tras 6 meses.

Vence 01 Ene 2027

Acuerdo de Servicios

Revisión

Logística Total S.L. · 28 cláusulas · Borrador v3

Detectadas 3 cláusulas con ambigüedad en penalizaciones. Requiere confirmación legal.

3 alertas

Contrato de Distribución

Riesgo

DistriMax EU · 44 cláusulas · Vence en 8 días

Cláusula de exclusividad territorial detectada. Penalización: 18% valor anual.

Acción urgente
247
Contratos activos
↑ 12 este mes
98.4%
Precisión análisis
↑ 0.3% vs anterior
23s
Tiempo medio análisis
↓ 4s más rápido
8
Riesgos detectados
↑ 3 sin resolver
§ 09

Componentes — Table

Contrato Partes Tipo Fecha firma Vencimiento Riesgo Estado
Marco NDA 2026
VRB-2026-0041
 TechServ S.A. NDA 2026-01-01 2027-01-01 Bajo Activo
Acuerdo Servicios v3
VRB-2026-0058
 Logística Total S.L. Servicios — — Medio Borrador
Distribución EU
VRB-2026-0063
 DistriMax EU GmbH Distribución 2025-06-22 2026-06-22 Alto Urgente
SLA Infraestructura
VRB-2026-0071
 CloudBase Iberia SLA 2026-03-15 2027-03-15 Bajo Activo
§ 10

Componentes — Toast

Análisis completado
Contrato Marco NDA procesado en 19s. Sin riesgos detectados.
Cláusula ambigua detectada
§ 8.3 del contrato DistriMax requiere revisión manual por asesor.
Error al procesar archivo
El PDF está protegido con contraseña. Sube una versión desbloqueada.
Nuevo contrato disponible para revisión
Tu equipo legal subió "Renovación SLA 2027" a la cola de análisis.
§ 11

Vista previa de layout — Dashboard

Dashboard

Sistema activo
247
Contratos activos
↑ 12 este mes
8
Riesgos pendientes
↑ 3 sin resolver
23s
Tiempo medio
↓ 4s optimizado

Contratos recientes

Distribución EU · DistriMax
VRB-2026-0063 · Vence 22 Jun 2026
Urgente
Acuerdo Servicios · Logística Total
VRB-2026-0058 · 3 alertas
Revisión
Marco NDA · TechServ
VRB-2026-0041 · Firmado
Activo
§ 12

Accesibilidad — WCAG 2.2 AA

Contrastes verificados

Aa
#553F83 sobre #FAFAF8
Ratio 5.8:1 ✓ AA
Aa
#111111 sobre #FAFAF8
Ratio 18.9:1 ✓ AAA
Aa
#7A7670 sobre #FFFFFF
Ratio 4.6:1 ✓ AA
Aa
#FFFFFF sobre #553F83
Ratio 5.8:1 ✓ AA

Criterios obligatorios

✓ Focus ring visible: 3px solid con offset 2px en color primario
✓ Estados de error no dependen solo del color (icono + texto)
✓ Navegación completa por teclado en todos los componentes
✓ aria-label en botones con solo iconos
✓ Área de tap mínima 44×44px en mobile (touch targets)
✓ Mensajes de error asociados al input via aria-describedby
⚠ Animaciones: respetar prefers-reduced-motion (pendiente v1.1)
§ 13

Anti-patrones — Qué no hacer

No hacer

Texto gris claro sobre fondo blanco

Este texto no supera ratio 3:1 — ilegible para usuarios con visión reducida.

Correcto

Texto con contraste suficiente

Usar --color-muted (#7A7670) — ratio 4.6:1 sobre blanco.

No hacer

Spacing raw: padding: 10px 20px

Rompe el ritmo de la cuadrícula de 4px. Dificulta refactors futuros.

Correcto

Usar tokens: padding: 10px var(--space-6)

El valor 10px no tiene token (entre space-2 y space-3); usar 12px (--space-3) o 8px.

No hacer

Tipografía sans-serif en el cuerpo

El estilo editorial depende de IBM Plex Serif. Sans-serif rompe la identidad de Verba AI.

Correcto

Siempre var(--font-serif) en cuerpo

Reservar JetBrains Mono solo para labels, código, metadatos y badges.

§ 14

QA Checklist — Code Review

Tokens y fundaciones
¿Se usan tokens CSS en lugar de valores raw?
¿El espaciado sigue la escala 4/8/12/16/24/32px?
¿Los tamaños de texto están en la escala tipográfica?
¿IBM Plex Serif en cuerpo, JetBrains Mono solo en labels?
Componentes
¿Todos los estados (hover, focus, disabled) están implementados?
¿Los bordes usan border-radius con tokens (4px / 8px)?
¿Las transiciones usan las variables de timing definidas?
¿Los botones tienen área mínima de 44×44px en mobile?
Accesibilidad
¿Contraste de texto ≥ 4.5:1 (AA) verificado con herramienta?
¿Focus ring visible (3px outline, 2px offset)?
¿Errores comunicados con icono + texto (no solo color)?
¿Inputs con aria-describedby apuntando al mensaje de error?
Contenido y tono
¿Los labels de botones son verbos de acción claros?
¿Los mensajes de error indican qué hacer, no solo el error?
¿Sin jerga técnica innecesaria en mensajes visibles al usuario?
¿Tono: conciso, seguro, útil (nunca alarmar sin solución)?