← Brief · MCDS Full

DS completo · v0.1 congelado

Todo el sistema, lámina por lámina.

Este es el design system íntegro tal como fue documentado: 70 láminas de marca, color, forma, componentes, patrones y pantallas — más los UI kits y los tokens como CSS. Cada lámina se abre sola, en claro y oscuro.

Volver al brief

Marca y voz

4 láminas

Identidad, iconografía, tono.

Ícono de app MiCapi (definitivo) 06h·H3A·C — capital apilado + brote · light primario, dark alterno 1240x1500 Iconography — Lucide outline 30 íconos clave — stroke 1.75 uniforme 700x240 Logo MiCapi (provisional) Wordmark + sobre oscuro + monograma — pendiente brand oficial 700x180 Voz — buenos vs malos ejemplos Tono institucional sin hype cripto 700x230

Color

4 láminas

Paleta primaria, neutrales, semánticos, modos.

Modo claro vs oscuro Surface, fg y CTA en ambos modos 700x180 Colors — Neutrales Neutrales 900 → 200 + surface 700x130 Colors — Primary (Verde Petróleo) Paleta primaria aprobada — primary 100/300/500/700 700x170 Colors — Semánticos Success / warning / error con uso en chips 700x200

Espacio y forma

4 láminas

Escala, radios, elevación, superficies.

Elevación elev-1/2/3 — sombras tintadas con primary.700 700x160 Radios sm / md / lg / xl / pill 700x160 Spacing — Escala 4px space-1 → space-10 700x280 Surfaces — canvas vs. contained Directiva v0.2: lienzo blanco por default · cards como excepción 700x320

Fundaciones

4 láminas

Motion y principios transversales.

foundations-motion Motion · Flutter Curves + Duration + Haptics + Reduced motion 1280x4200 Type — Familias Inter (UI) + JetBrains Mono (datos) 700x230 Type — Mono en uso Montos tabulares + tratamiento de direcciones (agrupado en 4, no truncado) 760x460 Type — Escala 12 → 36px · uso por nivel 700x310

Componentes

18 láminas

Cada pieza con anatomía, variantes y estados.

Alerts Info / éxito / advertencia / error 700x280 components-balance-card Balance Card · 6 variants + dual balance + responsive + dashboard composition 1280x5200 Bottom Nav (flotante) Navegación inferior definitiva · flotante scroll-aware · 4 tabs MVP 1180x900 components-bottom-sheet Bottom Sheet · anatomy + 3 behaviors + slots + 3 examples + edge cases 1280x5400 Buttons Primary · secondary · ghost · destructive — estados · light + dark 900x640 Chips & Badges Status · token · cumplimiento 700x240 components-empty-states Empty States · 7 context variants + sizes + vs error/skeleton + copy rules 1280x5400 Inputs Texto · focus · error · monto con prefijo 700x280 Component — KYC Capture Captura documento + selfie liveness · aviso legal UIAF 314/2021 · estados de resultado · permiso denegado 1320x4600 components-money-input Money Input · anatomy + 3 flows + 6 states + errores de tope inline + precision · es-CO · Flutter 1280x5980 Component — OTP Input Código de 6 dígitos · 6 estados · reenvío + lockout · autofill SMS · light/dark 1280x4200 components-price-chart Price Chart · línea/área informativa · anatomy + timeframes + scrub + states + USDT depeg + motion + dark + Flutter 1280x5400 Aviso de privacidad — (i) popover Patrón aprobado: checkbox + enlace inline · descripción tras (i) 700x220 components-skeleton Skeleton loader · anatomy + 9 variants + 3 compositions + states + Flutter notes 1280x4400 Estados — loading / empty / error Tratamiento obligatorio para datos cripto 700x250 Component — Stepper / Progress Indicador de onboarding · 2 variantes (segmentada + dots) · estados de avance · light/dark 1280x3600 components-top-app-bar Top App Bar · 4 variants + scroll behavior + edge-to-edge + Flutter 1280x5200 Lista de transacciones Lista + opciones de ícono para compra y retiro 700x380

Patrones

7 láminas

Flujos completos: comprar, retirar, swap, depósitos.

patterns-bank-withdrawal Bank Withdrawal · canvas-first refactor · lienzo blanco continuo 1280x6000 patterns-buy-crypto Buy Crypto · canvas-first refactor · lienzo blanco continuo, sin cards anidadas 1280x6800 Component — ConfirmationSheet (canónico) Fuente de verdad · 3 variantes (compra/venta/swap) · persistente · 4 estados · light+dark 1280x6200 Pattern — Deposit Crypto Recibir cripto · QR + dirección + advertencias de red críticas (3 tablas) · estados confirmación · light/dark 1320x3900 Pattern — Filtros y export del historial A11 · sheet de filtros + chips activos + sin-resultados · export CSV/PDF con estados de generación · Flutter 1280x4420 Pattern — Comprobante de operación (PDF) A12 · plantilla del documento PDF · formato carta · desglose comisión + IVA · pie legal MICAPI S.A.S. · Flutter 1280x4160 Pattern — Withdraw Crypto Retiro a wallet externa · flow map + gate dirección + Travel Rule verbatim + heavyImpact · estados blockchain · light/dark 1480x3500

Pantallas

29 láminas

Las láminas de pantalla del DS v0.1.

Screen — Detalle de activo Pantalla interior · price-chart + tu posición + acciones + acerca de + tus operaciones · BTC (saldo+historial) · USDT (depeg) · sin saldo · cargando · light+dark · Flutter notes 1280x4560 Screen — Registrar cuenta bancaria Agregar cuenta COP · titular=titular SAGRILAFT · inputs + alerts + privacy-popover · lista + estados · light/dark 1320x3600 Screen — Dashboard (Inicio) Screen de validación · compone balance-card + tx-list + bottom-nav · 3 estados + dark 1280x4600 Screen — Actualizar mis datos (habeas data) A10 · desde Privacidad · Ley 1581/2012 · selector de dato + valor propuesto + soporte · 10/15 días hábiles · Flutter 1280x4060 Screen — Declaraciones y activación (Paso 6) Onboarding cierre · declaraciones juramento verbatim (variantes PEP) · 3 ramas resultado + pre-prompt notificaciones · light/dark 1320x4400 Screen — Flujo Compra end-to-end Validación de recorrido · Dashboard→Comprar→Confirmar→Procesando→Éxito→Dashboard · transiciones anotadas 1480x3200 Screen — Flujo Retiro end-to-end Validación de recorrido · Dashboard→Vender→Confirmar→Procesando→Éxito→Dashboard · hero=COP al banco · comisión 5% 1480x3200 Screen — Flujo Swap end-to-end Validación de recorrido · Dashboard→Intercambiar→Confirmar→Procesando→Éxito→Dashboard · sin COP · el más corto 1480x3100 Screen — Historial Validación tab Historial · lista agrupada + filtros + detalle sheet + 4 estados screen + 4 estados tx + dark 1280x5200 Screen — KYC Datos (Pasos 4 y 5) Onboarding pasos 4+5 · datos personales + financieros · campos condicionales PEP/residencia fiscal · aviso UIAF/DIAN verbatim · light/dark 1320x4200 Screen — KYC Identidad (Paso 3) Onboarding paso 3 · storyboard reusa KYC Capture · aviso legal + cámara + 3 ramas de resultado · light/dark 1480x3000 Screen — Nivel de verificación y límites Niveles KYC + límites + consumo + ampliación · mensaje de límite verbatim · N2/N3 conservador · estados + dark 1320x3600 Screen — Ampliación de límite N1→N2 A7 · flujo KYC upgrade · requisitos + carga de documentos + estado de solicitud · 1–3 días hábiles · Flutter 1280x4640 Screen — Visor de documentos legales A9 · visor genérico TyC + Política de datos · versión y vigencia visibles · TOC · solo lectura · Flutter 1280x4260 Screen — Login A2 · estados frío/caliente · celular +57 · anti-enumeración · offline · light/dark · Flutter 1280x5080 Screen — Mercado Tab Mercado · overview informativo de 3 activos · precio de referencia + variación 24h + sparkline sobria · estados · light+dark · Flutter notes 1280x3260 Screen — Notificaciones Validación /notifications · centro in-app · lista agrupada + anatomía de fila + 9 tipos + 4 estados + deep-links + dark 1280x4760 Screen — Verificación OTP (Paso 2) Onboarding paso 2 · reusa OTP Input + stepper · countdown + bloqueo · light/dark 1280x2400 Screen — Cambiar contraseña A4 · desde Seguridad · clave actual + nueva + confirmación · requisitos visibles · cierre de sesiones · Flutter 1280x3560 Screen — Recuperar contraseña A3 · flujo 3 pasos · celular → OTP → nueva clave · retiros bloqueados 48h · anti-enumeración · Flutter 1280x4900 Screen — Formulario PQRS A8 · desde Soporte · Petición/Queja/Reclamo/Sugerencia · radicado + 15 días hábiles · copy borrador Erika · Flutter 1280x4380 Screen — Privacidad y mis datos Habeas data + cierre de cuenta · textos legales verbatim · bloqueo por saldo · estados + dark 1320x3500 Screen — Perfil / Ajustes Tab Perfil · hub de navegación · cabecera usuario + chip KYC + list items agrupados · estados de nivel + dark 1280x3400 Screen — Registro (Paso 1) Onboarding paso 1 · inputs + stepper + privacy-popover · declaraciones juramento verbatim · light/dark 1280x3400 Screen — Seguridad de la cuenta A13 · hub en Perfil · cambiar clave + sesiones + cooldown de retiro a destinos nuevos (piso no-negociable, step-up OTP) · Flutter 1280x4480 Screen — Dispositivos y sesiones A5 · desde Seguridad · lista de sesiones · sesión actual protegida · revocar con confirm sheet · estados · Flutter 1280x4340 Screen — Ayuda y PQRS Centro de ayuda + FAQ accordion + contacto + formulario PQRS · tiempos de respuesta · estados + dark 1320x3500 Screen — Registrar wallet externa Agregar wallet cripto · titularidad obligatoria UIAF/Travel Rule · inputs+alerts+popover · lista + estados · light/dark 1320x3700 Screen — Bienvenida A1 · pre-auth · carrusel 3–4 slides + CTAs persistentes + footer legal · light/dark · Flutter 1280x4560

UI kits

Los kits de la época

Exports React del DS (referencia histórica: hoy los componentes viven en Flutter).

UI kit móvil Pantallas de la app en React, marco iOS incluido. ui_kits/mobile ICONOGRAPHY.md El canon de iconografía: Lucide, stroke 1.75, tamaños. assets colors_and_type.css Los tokens como CSS variables — la fuente original de la que nació todo. css