Sistema de diseño TAV

Marca 01

El isotipo es un hexágono de nodos con una planta al centro: red y crecimiento. En la app se usa completo solo en splash y bienvenida; dentro de la aplicación basta el hexágono o el monograma.

Color 02

El blanco y el gris son los fondos. El azul se reserva para acciones, el navy para superficies de dinero, y el verde, ámbar y rojo son exclusivamente semánticos: nunca decorativos. Cada muestra indica su ratio de contraste real y si cumple WCAG AA (4.5:1 para texto normal, 3:1 para gráficos y texto grande).

Superficies y texto

Marca y acción

Semánticos

Semáforo de crédito 03

Es el componente propio de TAV y la razón de ser de la app: toda operación sale a crédito y el negocio se juega en cuántos días lleva un cliente sin pagar. El umbral es de 7 días, tomado directo de la operación actual.

El color nunca viaja solo: siempre acompañado del número de días y de una etiqueta escrita. Un cliente con daltonismo debe poder leer su situación sin ver el color.

Tipografía 04

Una sola familia: Inter (o la del sistema como respaldo). Las cifras de dinero usan font-feature-settings: 'tnum' para que las columnas de montos queden alineadas.

Espaciado y radios 05

Escala base de 4 px. El margen lateral de pantalla es siempre 20 px; nada toca el borde.

Elevación 06

Dos niveles y nada más. La sombra es sutil y azulada, nunca gris neutro.

Iconografía 07

Trazo de 1.8 px sobre grilla de 24 px, extremos y uniones redondeadas, sin relleno. Tamaños: 16 px en línea, 20 px estándar, 26 px destacado.

Los iconos de significado (coin, cash, up, down, alert) van dentro de un cuadrado de 42 px con radio 12 y fondo tintado del color semántico correspondiente.

Botones 08

Un solo botón primario por pantalla. Si hay dos acciones que compiten, la segunda va como contorno o texto.

Campos 09

Altura 50 px, radio 12, etiqueta encima siempre visible. El anillo de foco son 3 px del tinte del color.

Chips y estados 10

Cada estado de una operación tiene un color fijo en toda la app. El operador y el cliente ven exactamente el mismo código.

Listas y tarjetas 11

La fila de lista es el componente más repetido de la app: operaciones, movimientos, beneficiarios y notificaciones son todos la misma pieza con distinto contenido.

En una fila de movimiento, el signo y el color siempre coinciden: + es lo que el cliente debe, − es lo que ya pagó. El saldo resultante va debajo del monto, en gris.

Navegación 12

Cuatro destinos fijos más un botón central de acción. El botón central no es un destino: abre el flujo de nueva operación.

Los flujos de varios pasos (nueva operación, abono) usan barra de progreso segmentada arriba y botón de retroceso a la izquierda. Nunca se cierra un flujo sin confirmación si ya hay datos escritos.

Números y moneda 13

Formato venezolano: punto para miles, coma para decimales. Esto no es un detalle estético — un monto mal formateado en una app de dinero destruye la confianza.

Tono de voz 14

Directo, sin tecnicismos financieros y sin adornos. El cliente de TAV opera hoy por WhatsApp: la app debe sonar igual de humana, pero más precisa.

Regla práctica: si la frase no se la dirías por WhatsApp a un cliente que conoces, no va en la app.

Notas para Flutter 15

Los tokens de esta página trasladados a ThemeData. La idea es que nadie escriba un color en línea dentro de un widget.

// lib/theme/tav_colors.dart
class TavColors {
  static const navy      = Color(0xFF0B1B33);
  static const blue      = Color(0xFF1F6FEB); // acción
  static const blue600   = Color(0xFF1558C7); // texto azul
  static const blue50    = Color(0xFFEAF2FE);
  static const green     = Color(0xFF4CAF50); // solo relleno
  static const green600  = Color(0xFF2E7D32); // texto y botón
  static const green50   = Color(0xFFEAF7EB);
  static const gold      = Color(0xFFD9A441);
  static const gold700   = Color(0xFF8A6010);
  static const gold50    = Color(0xFFFBF3E3);
  static const red       = Color(0xFFE5484D);
  static const red700    = Color(0xFFB42318);
  static const red50     = Color(0xFFFDECEC);
  static const bg        = Color(0xFFF4F5F7);
  static const surface   = Color(0xFFFFFFFF);
  static const line      = Color(0xFFE5E8EC);
  static const ink       = Color(0xFF101828);
  static const ink2      = Color(0xFF475467);
  static const ink3      = Color(0xFF667085);
  static const ink4      = Color(0xFF98A2B3); // nunca texto
}

// Radios y espaciado
class TavRadius { static const chip=10.0, field=12.0, card=14.0, sheet=20.0; }
class TavSpace  { static const xs=4.0, sm=8.0, md=12.0, lg=16.0, xl=20.0, xxl=24.0; }

// Sombra nivel 1
const tavCardShadow = [
  BoxShadow(color: Color(0x0D101828), blurRadius: 2, offset: Offset(0, 1)),
  BoxShadow(color: Color(0x0F101828), blurRadius: 24, offset: Offset(0, 8)),
];