Identidad Visual Monorepo Boost CRM

Objetivo visual

Garantizar paridad visual entre web y native: web define el canon y mobile lo replica con adaptación de escala/densidad táctil, sin reinterpretación estética.

Principios de diseño

Tema oscuro utilitario con capas y bordes sutiles.
Acento de marca cian/azul consistente en ambas plataformas.
Tipografía Poppins (400/500/600/700) en web y native.
Motion funcional y discreto.

Regla principal de paridad

Web es la fuente de verdad visual.
Native debe mantener la misma semántica de color, jerarquía tipográfica e iconografía.
Se permite ajustar: tamaño, densidad, safe areas y hit targets.
No se permite “reinterpretación estética” de componentes al portar de web a native.

Reglas de continuidad

Cualquier nuevo componente debe mapear tokens semánticos equivalentes web/native.
Cualquier cambio de color de marca requiere actualización en canones web + native.
Iconos canónicos se centralizan en @repo/icons con wrappers por plataforma.
Cada cambio visual cross-platform debe actualizar docs + skills (boost-crm-visual-*) en el mismo PR.
La escala mobile base (títulos, labels, inputs, spacing) debe permanecer estable y documentada en visual-identity-native.
En native, la implementación operativa del baseline se centraliza en /Users/macuser/Desktop/crm-monorepo/apps/native/components/ui-identity.ts.

Qué cambiar / qué no cambiar

Sí cambiar: spacing, densidad y tamaño final para ergonomía móvil.
No cambiar: paleta semántica, familia tipográfica, iconografía canónica y tono visual.

Política de assets/iconos

Fuente canónica SVG en packages/icons/assets.
@repo/icons/web y @repo/icons/native son wrappers de render por plataforma.
Web y native deben consumir nombres de iconos equivalentes; la diferencia técnica de wrapper no debe alterar el resultado visual.
Para dashboard, web sincroniza apps/web/public/assets/dashboard desde la fuente canónica mediante script (sin edición manual local).