Sistema de diseño¶

Normas visuales y reglas de uso para la APK Android. Cuando entren nuevos componentes, deben pasar por las verificaciones listadas al final.

Principios¶

Claridad operativa antes que decoración. El usuario debe entender qué pasará antes de tocar.
Una acción primaria por pantalla. Las demás son secundarias o destructivas.
Mostrar estado, causa y siguiente paso. Ninguna pantalla debe insinuar sin afirmar.
No ocultar que un dato es demo, estimado o pendiente. Usar la banda global cuando aplique.
Divulgación progresiva. Solo pedir datos cuando se necesitan.

Token canónico	Valor	Uso
`primary`	`#001129`	Botones primarios y texto destacado.
`onPrimary`	`#FFFFFF`	Texto sobre `primary`.
`secondary`	`#BB0016`	Acentos y errores de marca.
`onSecondary`	`#FFFFFF`	Texto sobre `secondary`.
`tertiary`	`#0E1112`	Texto casi-negro y soporte.
`onTertiary`	`#FFFFFF`	Texto sobre `tertiary`.
`background`	`#F8F9FF`	Fondo principal.
`surface`	`#F8F9FF`	Igual a `background`.
`surfaceContainer`	`#E5EEFF`	Cards.
`error`	`#BA1A1A`	Mensajes de error.
`outline`	`#74777E`	Bordes y campos inactivos.

Los hex listados son los observados en ui/theme/Color.kt. Cualquier cambio debe pasar por la migración a tokens semánticos descrita más abajo.

Familia: FontFamily.SansSerif como placeholder de Inter. Empaquetar res/font/Inter.ttf antes de release pública.
Estilo M3 completo. Tamaños funcionales:

Sin valores literales Color(0x…) en pantallas de producto. Definir tokens semánticos y consumirlos desde el tema.
Tamaño mínimo para texto funcional: 14 sp. No usar 8–11 sp en controles primarios.
Touch targets ≥ 48×48 dp en controles interactivos.
Un campo por fila en formularios para pantallas < 600 dp de ancho.
Errores: texto + icono opcional; nunca depender sólo del color.
Glass / blur (ver LiquidGlassBackground): decorativo, evaluar rendimiento y contraste WCAG.
Modo oscuro: el prototipo actual lo declara pero su esquema replica el claro. Hasta corregirlo, solo tema claro en release.
Iconos: cualquier IconButton debe llevar contentDescription no nulo, salvo icono puramente decorativo (en ese caso, marcar explícitamente con null y role = ImageRole.Decorative).

Componente	Propósito
`DemoModeBanner`	Banda persistente cuando los datos son demo.
`StatusBanner`	Severidad, mensaje y CTA explícito.
`KycGateCard`	Bloqueo KYC con motivo, beneficio y próxima acción.
`PriceBreakdown`	Desglose único con `estimado \| final`.
`AsyncStateContainer`	Loading / vacío / error / contenido.
`ResultScreen`	Confirmación con entidad creada y próximo paso.
`FormStepHeader`	Encabezado de paso con indicador de progreso.
`InlineErrorSummary`	Resumen de errores con foco al primer campo.