Vela es una plataforma SaaS B2B de gestión financiera para pymes. Su sistema de diseño transmite
precisión, confianza y modernidad mediante un lenguaje visual minimalista inspirado en Apple.
Todas las reglas se definen en tokens reutilizables; ningún componente debe usar valores en bruto.
Usar tokens semánticos; nunca valores hexadecimales en línea
La accesibilidad es no negociable: WCAG 2.2 AA mínimo
Jerarquía visual explícita en cada pantalla
Estados de interacción documentados en todos los componentes
Espaciado siempre múltiplo de 4px
Transiciones suaves (≤ 200ms) para mantener fluidez
Tokens de Diseño · Paleta de Color
Color Tokens
Cada color tiene una versión base, hover, subtle y border. Usar exclusivamente estos tokens en implementación.
Primary
#3B82F6
Secondary
#8B5CF6
Success
#16A34A
Warning
#D97706
Danger
#DC2626
Surface
#F9FAFB
Text
#111827
Token CSS
Valor
Color
Uso
--color-primary
#3B82F6
Botón CTA, links, foco
--color-primary-hover
#2563EB
Estado hover del primary
--color-primary-subtle
#EFF6FF
Badges, backgrounds informativos
--color-success
#16A34A
Estados positivos, pagado
--color-warning
#D97706
Alertas, pendiente
--color-danger
#DC2626
Errores, acciones destructivas, vencido
--color-surface-2
#F9FAFB
Fondo de página, áreas secundarias
--color-text-secondary
#6B7280
Labels, descripciones de apoyo
Tokens de Diseño · Tipografía
Typography Scale
Fuente principal Inter para toda la UI. JetBrains Mono para cantidades, tokens y código. Nunca mezclar con otras familias.
Escala base de 4px. Todo el espaciado intra-componente y entre secciones debe ser múltiplo de este valor.
--space-1
4px — micro gaps, icon padding interno
--space-2
8px — gap entre icono y label, badge padding
--space-3
12px — padding interior inputs, separadores
--space-4
16px — padding interno de cards, celdas tabla
--space-6
24px — padding KPI card, gap entre elementos
--space-8
32px — padding sección principal, márgenes de página
Componentes · Botones
Button
El botón debe comunicar claramente su intención. La variante primary debe existir una sola vez por vista como acción principal. El anillo de foco visible es obligatorio.
Variantes
Tamaños
Estados
✓ DO — Reglas obligatorias
→ Mínimo 44×44px de área táctil (WCAG 2.5.5)
→ focus-visible ring de 2px + 4px offset
→ Ratio de contraste ≥ 4.5:1 texto/fondo
→ Atributo type="button" en todos los <button>
→ Texto descriptivo: "Guardar cambios", no "OK"
✗ DON'T — Prohibido
→ Varios botones primary en la misma vista
→ Ocultar el estado focus con outline:none
→ Texto de botón en mayúsculas sin letter-spacing
→ Usar <div> o <a> para acciones de formulario
→ Colores de marca custom en variantes de sistema
Componentes · Formularios
Form — Emisión de Facturas
Anatomía de campo: label + input + hint/error. El hint es siempre visible; el mensaje de error reemplaza al hint y añade un aria-describedby al input.
Nombre fiscal del receptor
CIF de la empresa receptora
⚠ Introduce un importe válido
Aplicable a servicios digitales: 21%
Estado disabled
Asignado automáticamente por el sistema
Componentes · Estado
Badge — Estado de Transacciones
Los badges comunican estado semántico. Siempre deben ir acompañados de texto descriptivo; nunca depender del color como único indicador.
PagadoPendienteVencidoEn revisiónBorrador
En contexto — tabla de transacciones
Nº Factura
Cliente
Fecha
Importe
Estado
VEL-2026-0041
TechStart Madrid S.L.
01 jun 2026
€ 4.840,00
Pagado
VEL-2026-0040
Grupo Mediterráneo S.A.
22 may 2026
€ 12.100,00
Pendiente
VEL-2026-0038
Construcciones Vera
10 may 2026
€ 2.420,00
Vencido
VEL-2026-0037
Consultoría Andrade
05 may 2026
€ 968,00
En revisión
Componentes · Notificaciones
Alert & Toast
Las alertas inline son persistentes y contextuales. Los toasts son transitorios (≤ 5s) y aparecen en la esquina inferior derecha. Ambos deben tener role="alert".
✓
Factura emitida correctamente
VEL-2026-0042 enviada a TechStart Madrid S.L. · Importe: € 4.840,00 IVA incluido
⚠
Conciliación pendiente
3 movimientos bancarios de mayo no tienen asiento asociado. Revísalos antes de cerrar el periodo.
✕
Error al conectar con la pasarela bancaria
La sincronización con BBVA falló (error 503). Reintenta en unos minutos o contacta con soporte.
ℹ
Cierre de periodo activado
El periodo de mayo 2026 se cerrará automáticamente el 15 de junio. Completa los asientos pendientes.
Componentes · Dashboard
KPI Cards + Navigation Sidebar
Los KPI cards muestran una métrica, su cambio respecto al periodo anterior y una etiqueta en uppercase mono. El sidebar en fondo oscuro (#111827) crea contraste con el contenido principal.
Vela
Principal
Dashboard
Facturas
Tesorería
Contabilidad
Ajustes
Configuración
Facturación (mes)
€ 89.240
↑ 12,4% vs mes anterior
Cobros pendientes
€ 24.890
↓ 3 facturas vencidas
Gastos operativos
€ 31.460
↑ 4,1% — dentro de presupuesto
Resultado neto
€ 57.780
↑ 18,7% vs junio 2025
Accesibilidad · WCAG 2.2 AA
Criterios de Aceptación
Cada componente debe superar estas pruebas antes de mergearse. El contraste y el foco visible son los dos fallos más frecuentes en auditorías.
Contraste mínimo requerido
Texto blanco sobre primary — 3.1:1 ✓ (texto grande)
Texto blanco sobre primary-active — 5.9:1 ✓✓
Texto #111827 sobre surface-2 — 19.1:1 ✓✓✓
Texto secundario #6B7280 — 4.6:1 ✓
Interacción teclado
→ Tab navega todos los controles interactivos en orden DOM
→ Enter activa botones y envía formularios
→ Escape cierra modales, dropdowns y toasts
→ Flechas navegan dentro de grupos de radio, tabs y listas
→ Focus nunca se pierde al abrir/cerrar capas modales
→ aria-live="polite" en alertas y mensajes de error dinámicos
→ Inputs con error tienen aria-invalid="true" + aria-describedby
Anti-Patterns · Implementaciones Prohibidas
Qué no hacer nunca
✗ DON'T — Bajo contraste
Texto claro sobre fondo claro: ilegible e inaccesible.
Importe pendiente de pago
color:#D1D5DB sobre #F9FAFB — ratio 1.1:1 FAIL
✓ DO — Contraste correcto
Usar --color-text-secondary (#6B7280) mínimo.
Importe pendiente de pago
color:#6B7280 sobre #F9FAFB — ratio 4.6:1 PASS
✗ DON'T — Botón mal implementado
Fuente serif, color semántico incorrecto, border-radius inconsistente.