Identidad Visual Native Boost CRM

Objetivo

Replicar el canon visual web de Boost CRM en mobile con adaptación controlada para ergonomía nativa.

Fuente de verdad

• Web define la identidad visual base.
• Native replica color, tipografía, jerarquía e iconografía.
• Prohibida la reinterpretación estética ad-hoc en mobile.

Tokens y equivalencias

• Header/top strip dashboard: #000000.
• Fondo principal app: #171717.
• Superficie principal (card): #1D1D1D.
• Borde principal (border-primary): #434343.
• Borde secundario (border-secondary): #383838.
• Texto primario: #FFFFFF.
• Texto secundario: #BCBCBC.
• Texto muted: #868686.
• Acento de acción: #24C9FC.

Tipografía y escala

• Familia: Poppins.
• Pesos: 400, 500, 600 y 700.
• Escala: equivalente a web con reducción proporcional para móvil.
• Mínimo legible: 12sp.

Baseline de medidas (obligatorio)

Usar esta base en nuevas pantallas y refactors para evitar drift visual:

• Padding horizontal de contenido: 28 (px-7).
• Espacio superior de contenido (después del topbar): 24 (pt-6).
• Barra de búsqueda principal: alto 64, radio 18, texto 12.
• Título de módulo (Cartera, Agenda, Kanban, Chats sin asignar, Campañas): 19.
• Título de sección/card: 16.
• Label de formulario: 14.
• Texto de input/select: 14.
• Texto secundario/metadato: 12.
• Radio de cards principales: 16 o 18 según densidad de tabla.
• Altura estándar de input/select de formulario: 48.
• Altura estándar de input/select de toolbar/filtro superior: 54 a 56.

Contrato técnico de implementación

• El baseline visual se implementa vía helper:
  • /Users/macuser/Desktop/crm-monorepo/apps/native/components/ui-identity.ts
• El helper es obligatorio para:
  • contenedor principal de página,
  • barra de búsqueda principal,
  • jerarquía base de títulos y metadatos.
• Evitar redefinir tamaños base por pantalla si ya existe token utilitario en el helper.

Patrón de formularios

• Filas label+control: label a la izquierda y input/select a la derecha cuando el diseño lo pida (ej: Tipo de evento, Columna, Prioridad).
• Evitar mezclar en una misma pantalla inputs de alturas distintas sin justificación funcional.
• Los chips de prioridad/estado conservan color web y se escalan, no se rediseñan.

Bottom nav (dashboard mobile)

• Fondo: #000000.
• Forma: pill redondeada.
• Sombra: solo inferior, equivalente visual a #FFFFFF14.
• Mapeo RN aplicado: shadowColor=#FFFFFF, shadowOpacity=0.08, shadowOffset={0,4}, shadowRadius=4.
• Orden de iconos: cartera (IconWallet), catálogo (SidebarInbox), agenda (SidebarContacts), interacciones (SidebarChatGroup).

Iconografía

• Mismos iconos canónicos entre web y native.
• Implementación por plataforma desde @repo/icons.
• Prohibido duplicar iconos ad-hoc en cada pantalla si ya existe versión canónica.
• Fuente única para dashboard: packages/icons/assets/dashboard.
• Si hay divergencia visual, corregir assets canónicos antes de tocar pantallas.

Motion

• Solo transform y opacity en animaciones frecuentes.
• Evitar animaciones de layout pesadas en listas.
• Transiciones de overlays/drawers/sheets: entrada 200-240ms, salida 160-200ms, easing cúbico.

Anti-patrones

• Reinterpretar visualmente componentes mobile respecto a web.
• Introducir paletas o jerarquías tipográficas no presentes en web.
• Duplicar iconos de forma local cuando ya existen en @repo/icons.
• Silenciar warnings globales sin investigar causa raíz.