DAT360 — Master Design Prompt

Sección 01

Design System Global

Todos los dashboards comparten un sistema de diseño unificado. Este Design System define los tokens atómicos irrevocables: paleta cromática, tipografía, espaciado, elevación, motion y principios de accesibilidad WCAG 2.1 AA. Ningún componente puede existir fuera de este marco.

Paleta Cromática

Ink / Primary Text

--color-ink: #0E0E14

Surface / Background

--color-surface: #FAFAF7

White / Card surface

--color-white: #FFFFFF

Gold / Premium accent

--color-gold: #B8955A

DAT Fuchsia / Brand CTA

--color-fuchsia: #C9175D

DAT Magenta / Secondary

--color-magenta: #E8528A

Wellness Green / Positive

--color-positive: #1D9E75

Alert Coral / Warning

--color-warning: #D85A30

Tipografía

typography.tokens.ts
// DAT360 Typography System — Cormorant + DM Sans + JetBrains Mono
// Regla: Cormorant = headings (elegancia editorial), DM Sans = body/UI (legibilidad moderna)
// JetBrains Mono = código, datos técnicos, valores numéricos de métricas

export const typography = {
  fonts: {
    display: 'Cormorant Garamond, Georgia, serif',
    body:    'DM Sans, system-ui, sans-serif',
    mono:    'JetBrains Mono, Fira Code, monospace',
  },
  scale: {
    // Display — usado SOLO en H1 de páginas principales
    display: { size: 'clamp(2.5rem, 5vw, 4.5rem)', weight: 300, tracking: '-0.02em', family: 'display' },
    // H1 sección — títulos de dashboard
    h1:      { size: 'clamp(1.75rem, 3vw, 2.5rem)', weight: 400, tracking: '-0.01em', family: 'display' },
    // H2 card titles
    h2:      { size: '1.25rem',  weight: 500, tracking: '0',      family: 'body'    },
    // H3 subsections
    h3:      { size: '1rem',     weight: 500, tracking: '0',      family: 'body'    },
    // Body copy — legibilidad en contexto clínico
    body:    { size: '0.9375rem', weight: 400, lineH: '1.7',    family: 'body'    },
    small:   { size: '0.8125rem', weight: 400, lineH: '1.6',    family: 'body'    },
    // Labels / eyebrows — uppercase tracking 2px
    label:   { size: '0.6875rem', weight: 500, tracking: '0.125rem', transform: 'uppercase', family: 'body' },
    // Numeric metrics — JetBrains para alineación tabular
    metric:  { size: 'clamp(1.5rem, 3vw, 2.75rem)', weight: 300, family: 'display', tracking: '-0.02em' },
    code:    { size: '0.8125rem', weight: 400, family: 'mono' },
  },
} as const;

Espaciado · Radii · Shadows · Motion

tokens.design.ts
export const spacing = {
  // Sistema 4pt base — todos los márgenes y paddings son múltiplos de 4
  xs:  '4px',   sm:  '8px',   md: '16px', lg: '24px',
  xl:  '32px',  xxl: '48px',  section: '80px',
  // Layout containers
  containerMax: '1280px', containerPad: 'clamp(1rem, 4vw, 3rem)',
}

export const radii = {
  xs: '4px',  sm: '8px',  md: '12px', lg: '20px',
  xl: '28px', pill: '9999px', full: '50%',
}

export const elevation = {
  // Ningún shadow tiene color negro puro — always tinted
  sm:   '0 1px 3px rgba(14,14,20,0.06), 0 1px 2px rgba(14,14,20,0.04)',
  md:   '0 4px 16px rgba(14,14,20,0.08), 0 1px 3px rgba(14,14,20,0.04)',
  lg:   '0 12px 40px rgba(14,14,20,0.10), 0 4px 12px rgba(14,14,20,0.06)',
  gold: '0 8px 32px rgba(184,149,90,0.18), 0 2px 8px rgba(184,149,90,0.08)',
  glow: '0 0 0 3px rgba(201,23,93,0.12)', // focus ring fuchsia
}

export const motion = {
  // Curvas de easing personalizadas — nada de ease-in-out genérico
  spring:    'cubic-bezier(0.34, 1.56, 0.64, 1)',  // spring with overshoot
  smooth:    'cubic-bezier(0.25, 0.46, 0.45, 0.94)', // content fade-in
  decelerate:'cubic-bezier(0.00, 0.00, 0.20, 1.00)', // modal enter
  accelerate:'cubic-bezier(0.40, 0.00, 1.00, 1.00)', // modal exit
  durations: { instant: 100, fast: 200, normal: 300, slow: 500, page: 700 },
}

export const blur = {
  // Glassmorphism controlado — NO usar en elementos críticos de lectura
  sm: 'backdrop-filter: blur(8px) saturate(1.5)',
  md: 'backdrop-filter: blur(20px) saturate(1.8)',
  lg: 'backdrop-filter: blur(40px) saturate(2.0)',
}

Principios de Diseño

Claridad sobre creatividad: cada elemento justifica su presencia con información accionable. Sin decoración vacía. El espacio negativo es un instrumento de jerarquía, no de pereza.

Privacidad por diseño (Privacy-by-Design): los datos individuales sensibles NUNCA se muestran en pantallas compartidas. Los dashboards de RR.HH. solo exhiben cohortes de ≥5 personas. Cada visualización agrupada lleva un tooltip de contexto de anonimato.

Progressive disclosure: la UI muestra el estado de resumen por defecto; el detalle requiere interacción explícita. Reduce la carga cognitiva en profesionales de salud y RR.HH. bajo presión de tiempo.

Respuesta en 100ms para interacciones críticas: feedback visual inmediato (skeleton loaders, optimistic UI) en toda acción. Latencia percibida <200ms para acciones secundarias.

Accesibilidad WCAG 2.1 AA: contraste mínimo 4.5:1 texto/fondo, 3:1 para UI components. Navegación completa por teclado. Landmarks ARIA correctos. Screen reader testing con VoiceOver (iOS) y TalkBack (Android).

Mobile-first, adaptive-after: la app mobile es el canal primario del colaborador. Los paneles web (HR + Maestro) son desktop-first. El diseño no es responsive-only: cada viewport tiene su composición óptima.

Sección 02 · Dashboard 01

App Móvil del Colaborador

La app móvil es la interfaz más crítica del ecosistema. Es el punto de contacto diario del colaborador con su bienestar — red social interna, telemedicina, asistente IA, meditación, ergonomía y retos. Debe sentirse tan fluida como Instagram pero tan confiable como la app de tu banco. React Native + Expo EAS. Target: iOS 16+ / Android 13+.

Collaborator Mobile App

React Native + Expo EAS · iOS 16+ · Android 13+

Mobile First Colaborador Real-time HL7 FHIR

Filosofía de diseño: La app debe romper la barrera psicológica entre el colaborador y la empresa. El tono es cálido, no clínico. Los colores de bienestar (salvia, crema, lavanda suave) dominan el 90% de la app; el fuchsia DAT #C9175D aparece SOLO en CTAs y notificaciones de alta prioridad.

Onboarding + Biometric Setup

5 pantallas de onboarding con animaciones Lottie. Configuración de HealthKit/Health Connect. Foto de perfil opcional. Mini-test de bienvenida PHQ-2 (2 preguntas, 30 segundos). Establecimiento de metas personales de bienestar.

Componentes

LottieView HealthKit Auth PHQ-2 Widget GoalSetter

Home · Wellness Score Hub

Pantalla principal. Anillo de Wellness Score animado SVG (0-100). 3 sub-anillos: Mente, Cuerpo, Finanzas. Streak diario. Feed de nudges personalizados por IA. Quick actions: Meditar, Conectar, Agendar consulta.

Componentes

WellnessRing SVG StreakCounter NudgeFeed QuickActions

Comunidad · Red Social Interna

Feed de actividad de la empresa (logros anónimos, retos grupales, eventos). Sistema de reactions sin "likes" negativos. Publicación de logros de bienestar. Grupos por interés (runners, meditadores, nutrición). Stories de bienestar de 24h.

Componentes

ActivityFeed ChallengeCard WellnessStory GroupExplorer

Mente · Salud Mental + Meditación

Test psicológicos gamificados (PHQ-9, GAD-7, Maslach, Bienestar PERMA). Player de meditaciones (audio nativo). Diario de emociones (wheel of emotions). Tracker de estado de ánimo 7 días. Acceso a contenido de psicoeducación.

Componentes

AssessmentFlow AudioPlayer MoodTracker EmotionWheel

Cuerpo · Salud Física + Wearables

Sincronización de wearables (Apple Watch, Garmin, Fitbit). Gráficas de pasos, sueño, frecuencia cardiaca y HRV. Retos físicos grupales. Módulo de ergonomía (análisis postural con cámara + recordatorios de pausas activas). Historial de brigadas médicas.

Componentes

WearableSync ActivityChart PostureAnalyzer BrigadeHistory

Telemedicina · Consultas on-demand

Directorio de especialistas DAT360 (psicólogos, médicos ocupacionales, asesores financieros, nutriólogos). Agenda en tiempo real. Video-consulta Twilio WebRTC nativo. Chat asíncrono post-consulta. Histórico de consultas y recetas. Sistema de triage IA previo.

Componentes

SpecialistDirectory RTCVideoCall SchedulerCalendar AIChatTriage

Asistente IA · "Detecta"

Chat conversacional 24/7 powered by Claude API. Pantalla con burbujas estilo chat pero con tipografía editorial. Flujos guiados para: reportar malestar emocional, consultar derechos laborales, solicitar ajuste de jornada, preguntas de nómina básica. Escalación humana con un toque. Red flags → notificación a especialista.

Componentes

ConversationBubble GuidedFlow TypingIndicator EscalationAlert

Finanzas · Salud Financiera

Módulo de educación financiera gamificada (micro-lecciones de 3 min). Calculadora de estrés financiero. Acceso a salario on-demand (integración Minu API o propia). Asesor financiero vía telemedicina. Score de salud financiera propio.

Componentes

MicroLesson FinStressCalc EWAWidget FinScoreRing

Desconexión Digital · NOM-035

Configuración de horario laboral digital personal. Alertas de desconexión ("Tu jornada terminó hace 30 minutos"). Contador de comunicaciones recibidas fuera de horario. Reporte descargable para el colaborador. Buzón anónimo de reporte NOM-035.

Componentes

DisconnectTimer AfterHoursCounter AnonymousReport

Notificaciones · Smart Nudges

Centro de notificaciones con categorización visual. Nudges inteligentes basados en patrones de uso y datos biométricos. Do Not Disturb automático respetando jornada configurada. Deep links a acciones específicas dentro de la app.

Componentes

NotificationCenter NudgeCard DnDSchedule

Backend Connections · App Móvil

Método	Endpoint	Servicio	Descripción · Payload notable
GET	/api/v1/user/wellness-score	wellness-score-service	Score actual (0-100), sub-scores, tendencia 30d, anillos SVG data
POST	/api/v1/assessments/submit	assessment-service	Envía resultados PHQ-9/GAD-7/Maslach. Body: `{type, responses[], userId_anon}`
GET	/api/v1/community/feed	community-service	Paginado (cursor-based). Filtra por empresa y grupos del usuario
POST	/api/v1/community/post	community-service	Publicación de logro. Moderación automática NLP antes de publicar
WS	wss://rt.dat360.mx/community	realtime-service	WebSocket para actualizaciones del feed en tiempo real. Auth: JWT Bearer
GET	/api/v1/telemedicine/specialists	telemedicine-service	Lista con disponibilidad real. Query: `?specialty=&date=&lang=`
POST	/api/v1/telemedicine/appointments	telemedicine-service	Agenda cita. Body: `{specialist_id, slot_id, reason_encrypted}`
POST	/api/v1/telemedicine/rooms	telemedicine-service (Twilio)	Crea Twilio Room. Devuelve `room_sid + access_token` con TTL 1h
POST	/api/v1/ai-assistant/message	ai-assistant-service	Streaming SSE. PII redaction antes de enviar a Claude. Body: `{session_id, message, context_type}`
POST	/api/v1/wearables/sync	wearables-service	Ingesta batch de métricas. Normaliza a FHIR Observation. Body: `{source: 'healthkit'\|'garmin', metrics[]}`
POST	/api/v1/mood/log	wellness-score-service	Registro de estado de ánimo. Actualiza score en tiempo real
GET	/api/v1/brigades/history/{userId}	brigades-service	Historial de tamizajes. Datos clínicos cifrados, solo accesibles al usuario
POST	/api/v1/nom035/report-anonymous	assessment-service	Reporte anónimo NOM-035. No incluye userId en payload. Almacena solo empresa_id + timestamp
GET	/api/v1/notifications	notifications-service	Lista con paginación. Incluye deep_link_path para cada notificación
POST	/api/v1/disconnect/settings	wellness-score-service	Guarda horario laboral digital. Configura Do Not Disturb automático

Sección 04 · Dashboard 03

Panel RR.HH. · Privacidad Primero

El panel de Recursos Humanos es el corazón del valor B2B de DAT360. Muestra SOLO métricas agregadas de cohortes ≥5 personas. Nunca datos individuales. El diseño debe inspirar confianza institucional — paleta tonal sobre blanco, tipografía Cormorant para los grandes números, datos presentados con autoridad de consultoría McKinsey.

HR Analytics Dashboard

Next.js 14 · Recharts + D3 · Privacy-by-Design · SSO/SAML

HR Admin Privacidad Total NOM-035 Compliance Predictive AI

REGLA ABSOLUTA DE PRIVACIDAD: El panel HR NUNCA debe mostrar datos de un colaborador individual identificable. Todo dato debe pasar por un servicio de anonimización antes de llegar al frontend. Si el filtro de departamento resulta en un grupo de personas menor a 5 (cohort threshold), el sistema debe mostrar "Grupo insuficiente para mostrar datos de forma anónima" y NO revelar ninguna métrica. Este threshold se configura por empresa cliente (mínimo 5, máximo 20).

Overview · Executive Summary

KPIs hero en bento grid: Wellness Score promedio empresa, participación activa %, riesgo psicosocial por área, tendencia de rotación proyectada, consultas telemedicina del mes, multas NOM-035 evitadas (calculado en MXN).

NOM-035 · Compliance Tracker

Estado de cumplimiento en tiempo real. Porcentaje de cuestionarios completados vs. total de plantilla. Factores de riesgo detectados por dominio (carga de trabajo, violencia, liderazgo). Generador automático de Plan de Acción en PDF. Expediente digital para inspección STPS.

Riesgo Predictivo · Attrition Map

Mapa de calor organizacional por área con nivel de riesgo de rotación (verde/ámbar/rojo). Modelo predictivo 90 días. Número de colaboradores en riesgo alto (sin identificar). Retention Brief automático por área. Trigger de intervención de especialista.

Bienestar · Wellness Score por Área

Score agregado por departamento, turno, género y antigüedad (con cohort threshold). Tendencia 12 meses. Comparativo vs. benchmark de industria (datos del ecosistema DAT360 anonimizados). Desglose por pilar: Mente, Cuerpo, Finanzas.

Telemedicina · Utilización y ROI

Consultas del mes (total, por especialidad). Tiempo promedio de atención. Satisfacción post-consulta (NPS agregado). Cálculo de ROI: costo de consultas vs. costo evitado de ausentismo y rotación. Tendencia 6 meses.

Desconexión Digital · LFT 2026

Horas de comunicación digital fuera de jornada por área (agregado). Tendencia de mejora post-implementación de política. Estado del protocolo de empresa: activo/pendiente de actualización. Generador de evidencia para STPS.

Brigadas · Tamizaje y Prevención

Próximas brigadas agendadas. Cobertura histórica (% de plantilla tamizada). Indicadores agregados de salud por brigada: prevalencia de hipertensión, glucosa elevada, obesidad (por área, sin identificar individuos). Comparativo pre/post brigada.

ROI Report · Generador Ejecutivo

Generador de reporte mensual en PDF/PPT powered by Claude API. Calcula automáticamente: ahorro en rotación evitada, reducción de ausentismo, multas NOM-035 evitadas, mejora en productividad proyectada. Listo para presentar a CFO/Consejo.

Backend Connections · Panel RR.HH.

Método	Endpoint	Servicio	Privacy Note
GET	/api/v1/hr/wellness-score/aggregate	analytics-service	Cohort threshold enforced server-side. Params: `?dept&period&gender`
GET	/api/v1/hr/nom035/compliance	assessment-service	Porcentajes globales. SIN datos individuales. SOC 2 audit log
POST	/api/v1/hr/nom035/action-plan	assessment-service + Claude	Genera plan de acción IA. Retorna PDF firmado digitalmente
GET	/api/v1/hr/attrition/risk-map	analytics-service	Solo devuelve `count_at_risk` por área. NUNCA IDs. 90-day prediction
GET	/api/v1/hr/telemedicine/utilization	analytics-service	Métricas de uso agrupadas. Especialidades más solicitadas sin datos de paciente
GET	/api/v1/hr/roi/summary	analytics-service	Cálculo ROI basado en modelos actuariales parametrizables por empresa
POST	/api/v1/hr/reports/generate	analytics-service + Claude	Async job. Returns job_id. Poll `GET /reports/{job_id}/status`. PDF streaming
GET	/api/v1/hr/brigades	brigades-service	Agenda, cobertura y resultados agregados de tamizaje
GET	/api/v1/hr/disconnect/stats	wellness-score-service	Comunicaciones fuera de jornada por área (count, no content)
WS	wss://rt.dat360.mx/hr/alerts	realtime-service	Alertas de riesgo crítico en tiempo real (burnout masivo, incidente). Auth: SAML session

Método	Endpoint	Servicio	Descripción
GET	/api/v1/specialist/appointments/today	telemedicine-service	Agenda del día con datos de paciente anonimizados hasta join
POST	/api/v1/specialist/appointments/{id}/join	telemedicine-service	Genera Twilio Access Token para el especialista. Desvela datos del paciente
GET	/api/v1/fhir/r4/Patient/{id}	clinical-service (FHIR)	FHIR Patient resource. Auth: bearer + specialist_id claim
POST	/api/v1/fhir/r4/Encounter	clinical-service (FHIR)	Crea Encounter post-consulta. Vincula con Appointment resource
PUT	/api/v1/fhir/r4/Observation/{id}	clinical-service (FHIR)	Actualiza observación clínica (notas, diagnóstico funcional)
GET	/api/v1/specialist/metrics/summary	analytics-service	KPIs propios del especialista: NPS, consultas, ingresos
POST	/api/v1/specialist/availability	telemedicine-service	Configura slots de disponibilidad semanal recurrente

Sección 06 · Dashboard 05

Panel Maestro DAT360

El cerebro operativo de la plataforma. Solo accesible para el equipo interno de Detéctalo a Tiempo AC. Gestión multi-tenant de empresas, licencias, contenido, brigadas, especialistas, facturación, IA, observabilidad y crecimiento. Diseño denso y eficiente — inspirado en Vercel Dashboard y Linear.

DAT360 Master Operations Panel

Next.js 14 · Multi-tenant · Observabilidad · Billing · AI Ops

Equipo DAT360 Only Multi-tenant AI Ops Observabilidad

Acceso: MFA obligatorio + IP allowlist + audit log de cada acción. Roles internos: Super Admin, Operations Manager, Medical Director, Customer Success, Finance, AI Engineer. Cada rol tiene permisos atómicos configurables (RBAC con 42 permisos distintos).

Command Center

Vista de estado global: empresas activas, usuarios totales, consultas en curso (live), alertas críticas, uptime API, costo Claude API del mes, ARR proyectado. Layout bento 4×4 con widgets redimensionables.

Gestión de Clientes (Tenants)

CRM interno. Lista paginada de empresas cliente con filtros avanzados. Vista de cuenta: licencias, paquete, facturación, onboarding progress, NPS, riesgo de churn (modelo predictivo). Acción: pausar, cancelar, upgrade.

Licencias y Onboarding

Gestión de asignación de licencias por empresa. Flujo de onboarding de empresa cliente (8 pasos). Estado de integración SSO/SAML. Bulk upload de colaboradores (CSV/SFTP). Progreso de configuración NOM-035.

Brigadas · Dispatch Center

Mapa interactivo de brigadas programadas (Mapbox GL). Calendario multi-empresa. Asignación de equipo médico. Checklist de equipamiento biométrico. Captura de resultados en campo (tablet). Dashboard post-brigada.

Red de Especialistas

Directorio de toda la red. Onboarding de nuevos especialistas (verificación de cédula IMSS). Gestión de disponibilidad global. Calidad: NPS por especialista, tasas de completitud. Pagos y liquidaciones.

Gestión de Contenido

CMS interno para: meditaciones (audio + metadata), micro-lecciones financieras, psicoeducación, retos de bienestar. Editor con preview en tiempo real. A/B testing de contenido. Métricas de consumo por tenant.

AI Operations Center

Monitor de llamadas a Claude API: tokens usados, costo por tenant, latencia, errores. Gestión de prompts y system messages por módulo. Test playground para nuevos prompts. Guardarrieles: rate limits por user, red flag triggers, PII detection logs.

Facturación y Revenue

MRR/ARR live. Cohort analysis de retención. Facturas generadas (Stripe + Conekta MX). Dunning management. Métricas SaaS: LTV, CAC, NRR, churn. Proyección financiera 12 meses. Integración con contabilidad (API SAT para CFDI).

Observabilidad y Salud del Sistema

Dashboards Datadog embebidos. SLO por servicio. Error rate, latencia P50/P95/P99. Alertas activas. Log explorer. Trace distribuido de requests críticos (telemedicina, IA). Runbooks de incident response.

Growth y Analytics Internos

Funnel de conversión de leads a clientes. Activación por feature (DAU/MAU por módulo). Métricas de retención por cohorte. A/B test manager. Export a Google Analytics 4 / Mixpanel. Heatmaps de uso por pantalla.

Backend Connections · Panel Maestro

Método	Endpoint	Servicio	Descripción
GET	/api/admin/v1/tenants	identity-service	Lista paginada multi-tenant con métricas resumidas. Roles: SUPER_ADMIN, OPS_MANAGER
POST	/api/admin/v1/tenants	identity-service	Crea nuevo tenant. Provisiona DB schema, S3 bucket, workspace de observabilidad
GET	/api/admin/v1/tenants/{id}/health	analytics-service	Health score del cliente: uso, NPS, riesgo churn, facturas pendientes
POST	/api/admin/v1/licenses/assign	identity-service	Asigna licencias a colaboradores. Bulk: acepta CSV. Envía invitación por email
GET	/api/admin/v1/brigades	brigades-service	Todas las brigadas multi-tenant con filtros geográficos y de estado
POST	/api/admin/v1/brigades	brigades-service	Programa brigada. Body: `{tenant_id, date, location, team[], equipment[]}`
GET	/api/admin/v1/specialists	telemedicine-service	Red completa de especialistas con métricas de calidad y liquidaciones pendientes
GET	/api/admin/v1/ai-ops/usage	ai-assistant-service	Tokens Claude consumidos por tenant/periodo. Costo proyectado. Anomalías
GET	/api/admin/v1/revenue/metrics	billing-service	MRR, ARR, churn, LTV:CAC, NRR. Filtros por período y paquete
POST	/api/admin/v1/content	content-service	Crea/actualiza contenido. Validación de audio, metadata y permisos por tenant
GET	/api/admin/v1/observability/slo	observability-service	Estado de SLOs por microservicio. Error budget restante
POST	/api/admin/v1/ai-ops/prompts	ai-assistant-service	Actualiza system prompts por módulo. Versionado semántico. Rollback automático si error rate >5%

Sección 07 · El Artefacto Principal

Master Design Prompt

Este es el prompt ejecutable, diseñado para ser copiado directamente en Claude Code o Claude Design. Está estructurado en bloques semánticos que Claude puede parsear y ejecutar secuencialmente. Copiar desde el bloque negro a continuación.

Prompt Maestro · DAT360 Platform Design · Versión 1.0

# DAT360 PREDICTIVE WELLNESS PLATFORM — MASTER DESIGN PROMPT # Versión 1.0 | Mayo 2026 | Confidencial # Recompensa: $33,000 USD a la implementación ganadora ───────────────────────────────────────────────────────────────────────── ## CONTEXTO DE NEGOCIO ───────────────────────────────────────────────────────────────────────── Eres el mejor diseñador UI/UX y programador del mundo. Tu misión es diseñar y codificar los 5 dashboards del ecosistema DAT360 — la primera plataforma mexicana de bienestar corporativo predictivo con brigadas médicas físicas, telemedicina "super humana", IA conversacional (Claude API) y cumplimiento nativo de NOM-035/NOM-037/LFT-reforma-2026. La empresa cliente es Detéctalo a Tiempo A.C. (DAT360), con sede en Baja California, México. Paleta corporativa: Fuchsia #C9175D + Magenta #E8528A. El diseño debe proyectar: CONFIANZA INSTITUCIONAL + ELEGANCIA MINIMALISTA + CALIDEZ HUMANA. ───────────────────────────────────────────────────────────────────────── ## DESIGN SYSTEM — REGLAS ABSOLUTAS (NO NEGOCIABLES) ───────────────────────────────────────────────────────────────────────── ### Paleta Cromática ```tokens --color-ink: #0E0E14 /* Primary text — casi-negro cálido */ --color-surface: #FAFAF7 /* Background — blanco con temperatura cálida */ --color-white: #FFFFFF /* Cards, modals, panels */ --color-gold: #B8955A /* Premium accent — USAR CON PARSIMONIA */ --color-gold-pale: #F5EDD8 /* Gold tint backgrounds */ --color-fuchsia: #C9175D /* DAT Brand — CTAs y alertas críticas */ --color-magenta: #E8528A /* DAT Secondary — badges y highlights */ --color-positive: #1D9E75 /* Wellness indicators positivos */ --color-warning: #D85A30 /* Risk alerts */ --color-ink-80: rgba(14,14,20,0.80) --color-ink-40: rgba(14,14,20,0.40) --color-ink-10: rgba(14,14,20,0.07) --color-border: rgba(14,14,20,0.09) ``` REGLA DE USO DEL COLOR: - 70% superficie blanca/surface (#FAFAF7 / #FFFFFF) - 20% ink para texto y elementos estructurales - 8% gold como acento premium (borders, highlights, números clave) - 2% fuchsia/magenta — SOLO en CTAs, alertas y elementos de acción ### Tipografía ```typography Font Stack: Display/H1: "Cormorant Garamond", Georgia, serif — weight 300/400 Body/UI: "DM Sans", system-ui, sans-serif — weight 400/500 Monospace: "JetBrains Mono", monospace — métricas y código Scale: display: clamp(2.5rem, 5vw, 4.5rem) / weight 300 / tracking -0.02em h1: clamp(1.75rem, 3vw, 2.5rem) / weight 400 / tracking -0.01em h2: 1.25rem / weight 500 body: 0.9375rem / weight 400 / line-height 1.7 label: 0.6875rem / weight 500 / tracking 0.125rem / UPPERCASE metric: clamp(1.5rem, 3vw, 2.75rem) / Cormorant / weight 300 NUNCA usar: Inter, Roboto, Arial, system-ui directo, Poppins. ``` ### Espaciado — Sistema 4pt ```spacing xs: 4px | sm: 8px | md: 16px | lg: 24px | xl: 32px | xxl: 48px Border radius: xs:4 sm:8 md:12 lg:20 xl:28 pill:9999 Shadows: siempre tinted, NUNCA black rgba. Usar tintas del color de fondo. ``` ### Motion ```motion Easing: spring: cubic-bezier(0.34, 1.56, 0.64, 1) /* hover, appear */ smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94) /* content */ decelerate: cubic-bezier(0.00, 0.00, 0.20, 1.00) /* modal enter */ accelerate: cubic-bezier(0.40, 0.00, 1.00, 1.00) /* modal exit */ Durations: instant:100ms fast:200ms normal:300ms slow:500ms Regla: interacciones del usuario →200ms. Transiciones de página →500ms. Nunca animar más de 3 propiedades simultáneas. ``` ───────────────────────────────────────────────────────────────────────── ## DASHBOARD 1 — APP MÓVIL DEL COLABORADOR ───────────────────────────────────────────────────────────────────────── Stack: React Native 0.74 + Expo SDK 51 + EAS Build Target: iOS 16+ / Android 13+. Min SDK: iOS 16.0, Android 13 (API 33) State: Zustand + React Query (TanStack v5) Navigation: Expo Router v3 (file-based, typed routes) Styling: Tamagui (design tokens compilados a StyleSheet) Animations: React Native Reanimated 3 + Moti Icons: Phosphor Icons React Native (consistent, beautiful, 6 pesos) Video: Expo AV para meditaciones. Twilio Video React Native para telemedicina. Push: Expo Notifications + APNs + FCM Offline: WatermelonDB para sincronización offline-first Wearables: react-native-health (HealthKit) + react-native-health-connect (Android) ### Arquitectura de Pantallas (implementar en orden): PANTALLA A — Onboarding (5 screens, swipeable) - Fondo: gradiente muy sutil de #FAFAF7 a #F0EDE4 (warm cream) - Ilustraciones: Lottie animations de estilo "lineal orgánico" (no planas) - Fuente headline: Cormorant Garamond 300, italic en palabras clave - Botón primario: fuchsia #C9175D, border-radius 14px, height 56px - Screen 1: Bienvenida + nombre empresa - Screen 2: Configuración de wearable (HealthKit/Health Connect permission) - Screen 3: PHQ-2 (2 preguntas de bienestar inicial — gamificado, slider visual) - Screen 4: Selección de metas personales (iconos orgánicos, multi-select pills) - Screen 5: Foto de perfil opcional + PIN/biometric setup PANTALLA B — Home (Tab principal) Implementar el "Wellness Score Hub" con: ```jsx // Wellness Ring — SVG animado con React Native Reanimated 3 // Anillo principal 80vw centered. 3 sub-anillos concéntricos: // - Mente (azul-lavanda #8B7DB5) // - Cuerpo (verde salvia #7A9B76) // - Finanzas (dorado #B8955A) // Score numérico central: Cormorant Garamond 300, 4rem // Animación de fill al cargar: spring cubic-bezier(0.34,1.56,0.64,1), 800ms // Debajo del anillo: 3 metrics row con label + value // Streak Counter — diseño tipo Duolingo pero más refinado // Flame icon Phosphor "fill" + número + "días consecutivos" // Efecto: glow de #B8955A cuando streak >7 días // Nudge Feed — cards horizontales scrollables (SnapToItem) // Card size: 280×160px, border-radius 20px // Fondo: gradient unique por tipo (salud mental, física, financiera) // Máximo 5 nudges diarios, personalizados por IA // Quick Actions — 3 botones circulares 64px con glassmorphism suave // "Meditar" / "Conectar" (comunidad) / "Consulta" (telemedicina) // backdrop-filter: blur(12px) saturate(1.5) ``` PANTALLA C — Comunidad (Social Wellness Feed) Implementar como red social interna de bienestar: - Feed vertical con cards de altura variable - Tipos de post: Achievement (logro personal), Challenge (reto grupal), Story (bienestar story 24h circular), Event (brigada próxima) - Sistema de reactions: ⚡ Energía / 🌱 Apoyo / 🎯 Inspiración / 💙 Presente (Sin "me gusta" convencional para evitar presión social) - Composer minimalista en la parte superior: "¿Qué lograste hoy?" - Stories strip horizontal: círculos 64px con avatar + ring de color según tipo - GroupExplorer: categorías como Spotify (horizontal scroll, pills redondeadas) - PRIVACIDAD: Los posts son opcionales y el colaborador controla la visibilidad (Empresa / Mi equipo / Solo yo) PANTALLA D — Mente (Salud Mental y Meditación) - Assessment Flow: PHQ-9 / GAD-7 / Maslach gamificados - Diseño tipo "quiz" con progress bar suave - Sliders visuales en lugar de radio buttons - Paleta: lavanda suave #B5A9BE + crema #EEE6DA - Resultado al finalizar: número + interpretación en lenguaje humano - Registro en FHIR QuestionnaireResponse + actualización de WellnessScore - Audio Player de Meditaciones: - Player a pantalla completa con art cover de 400×400px - Forma de onda animada (waveform) sutilmente en fondo - Controles: -15s / Play-Pause / +15s / Velocidad / Favorito - Categorías: Respiración / Mindfulness / Sueño / Ansiedad / Energía - Mood Tracker Diario: - Rueda de emociones (Emotion Wheel de Plutchik, adaptada culturalmente) - Check-in rápido (30 segundos): tap en emoción + intensidad slider - Historial 7 días: chart de línea suave con colores emocionales - Insight semanal generado por IA: "Esta semana tu emoción dominante fue..." PANTALLA E — Telemedicina - Specialist Directory: Grid 2col de cards de especialistas - Avatar 80px, nombre, especialidad, rating (Phosphor Star icon), disponibilidad "Hoy" / "Mañana" / fecha próxima (badge verde/ámbar) - Filtros: Especialidad / Idioma / Disponibilidad hoy / Rating - Card hover: escala a 1.02, shadow elevada, gold border-left 3px - Scheduler: Calendar view (semana) con slots de 30/60 min - Slots disponibles: #E8F5E9 con punto verde - Slots ocupados: rgba(14,14,20,0.05) - Animación de selección: spring scale 1.0 → 1.08 → 1.0 - Pre-consulta IA Triage (Claude API): - Chat conversacional: "Antes de conectarte con el especialista..." - 3-5 preguntas para contextualizar al especialista - Si detecta red flag suicidal → INTERRUPCIÓN INMEDIATA → línea de crisis - Video Consulta (Twilio WebRTC): - Pantalla completa del video del especialista - Auto-preview pequeño (picture-in-picture) bottom-right - Controls bar bottom: Mute / Camera off / Chat / End / ... - Timer visible: duración de consulta - Modo blur de fondo automático PANTALLA F — Asistente IA "Detecta" - Chat conversacional con personalidad definida: - Nombre: "Detecta" - Tono: cálido, profesional, sin jerga médica - Avatar: símbolo abstrato DAT360 animado (Lottie, 48px) - Mensajes del asistente: fondo #F5EDD8 (gold pale), texto ink - Mensajes del usuario: fondo #0E0E14 (ink), texto blanco - Burbujas: border-radius 20px con "tail" solo en el primero del grupo - Flujos guiados disponibles (chips de acceso rápido en pantalla vacía): 🧠 "Siento estrés" → assessment + recursos + escalación si necesario ⚖️ "Tengo una duda laboral" → FAQ inteligente de NOM-035/LFT/IMSS 📅 "Quiero agendar una consulta" → deep link al scheduler 💰 "Pregunta de nómina" → FAQ + bot de RRHH (NOT datos privados) 🚨 "Necesito ayuda urgente" → escalación inmediata a especialista humano - Streaming de respuesta: texto aparece token a token (como ChatGPT) Implementar con SSE (Server-Sent Events) + animated cursor ───────────────────────────────────────────────────────────────────────── ## DASHBOARD 2 — PANEL RR.HH. ───────────────────────────────────────────────────────────────────────── Stack: Next.js 14 App Router + TypeScript strict + Tailwind CSS 3.4 Charts: Recharts 2.x + custom D3.js para visualizaciones avanzadas Tables: TanStack Table v8 (virtualized, sortable, filterable) Forms: React Hook Form 7 + Zod validation Date: date-fns con locale es-MX Export: react-pdf/renderer para PDF, SheetJS para Excel Auth: NextAuth.js v5 + SAML/SSO enterprise State: Zustand + React Query Icons: Phosphor Icons React (web) ### Layout Principal HR Dashboard: ```tsx // LAYOUT: 3 zonas // [Sidebar 240px collapsible] | [Main Content flex-1] | NO right panel // HEADER: sticky top-0, height 64px, bg white con blur // Contenido header: Logo empresa (tenant logo) + Search global // + Notification bell + User menu + "Ultima actualización: hace 2 min" // SIDEBAR: fondo #0E0E14 (ink), texto blanco // Logo DAT360 en top (blanco) // Nav items con iconos Phosphor peso "Regular" → "Fill" en activo // Items: Overview / NOM-035 / Riesgo Predictivo / Wellness / // Telemedicina / Brigadas / Desconexión Digital / ROI Report // Bottom: Configuración / Perfil admin // MAIN CONTENT: bg #FAFAF7, padding 32px // Bento grid system: 12-column CSS Grid con gap 20px // Widgets son draggable y resizable (react-grid-layout) ``` ### Componentes Críticos HR: ```tsx // WELLNESS SCORE CARD — Hero widget (span 8/12 columns) // Score promedio empresa: número gigante Cormorant Garamond 300, 5rem // Acompañado de: tendencia ↑↓ con porcentaje de cambio // Anillos: 3 sub-scores en semicírculo (Mente / Cuerpo / Finanzas) // Desglose por departamento: horizontal bar chart Recharts // - Cada bar colorizada según score (rojo<40 / ámbar 40-69 / verde≥70) // - Cohort threshold indicator: "Grupos con 65% // Cada celda = un departamento. Tamaño = número de personas (>cohort threshold) // Tooltip: "X personas en riesgo alto. Intervención recomendada." // CTA flotante en celdas rojas: "Ver Retention Brief →" (genera Claude PDF) // NOM-035 COMPLIANCE TRACKER (span 6/12) // Gauge chart semicircular custom D3: // - 0-40%: rojo (multa inminente) // - 40-80%: ámbar (riesgo) // - 80-100%: verde (seguro) // Debajo: 6 factores de riesgo NOM-035 con pills de nivel // CTA: "Generar Plan de Acción STPS" → Claude async + PDF // ROI CALCULATOR LIVE (span 6/12) // Inputs deslizables: rotación del mes, ausentismo días, salario promedio // Output en tiempo real: "Ahorro estimado: $X,XXX,XXX MXN" // Línea de tiempo: inversión DAT360 vs ahorro acumulado (crossover point) // Botón: "Exportar para CFO" → genera reporte ejecutivo Claude ``` ───────────────────────────────────────────────────────────────────────── ## DASHBOARD 3 — PANEL MAESTRO DAT360 (INTERNO) ───────────────────────────────────────────────────────────────────────── Stack: idéntico al HR Dashboard + Mapbox GL JS para mapa de brigadas Inspiración visual: Vercel Dashboard + Linear + Retool Densidad de información: alta (profesionales internos, no clientes) Dark mode: disponible y activado por defecto para el equipo tech ### Command Center (pantalla principal): ```tsx // Layout: 4-column bento grid, widgets de tamaño variado // Todos los widgets tienen: header con título + período selector + "⋮" menu // TOP ROW — 4 KPI cards (1-col each) // [Empresas Activas: N] [Usuarios Totales: N] [MRR: $XXK] [Uptime: 99.9%] // Cada card: número grande Cormorant + tendencia arrow + sparkline 7 días // MAIN ROW — 3 widgets grandes // [Mapa brigadas Mapbox 3-col] // Pins en ciudades con brigadas activas/próximas // Color del pin: verde=completada / ámbar=en progreso / azul=próxima // Click en pin: sidebar con detalles de brigada // [Consultas en curso LIVE 1-col] // Lista en tiempo real de videollamadas activas // Cada item: especialista → paciente (anonimizado) / duración / tipo // Refresh cada 5s via polling o WebSocket // BOTTOM ROW // [AI Ops: tokens Claude del mes, costo proyectado, latencia P95] // [Alertas activas: lista con severity y tiempo de resolución] // [Revenue chart: ARR/MRR trend 12 meses, Recharts AreaChart] ``` ───────────────────────────────────────────────────────────────────────── ## ESPECIFICACIONES TÉCNICAS TRANSVERSALES ───────────────────────────────────────────────────────────────────────── ### Seguridad Frontend - CSP headers estrictos: script-src 'self' + whitelisted CDNs - No inline scripts. No eval(). Strict mode React. - Sanitización de todo contenido renderizado (DOMPurify) - JWT con refresh rotation. Access token TTL: 15 min. Refresh: 7 días. - PKCE flow para auth. Never store tokens en localStorage. Usar httpOnly cookies con SameSite=Strict + Secure. - Rate limiting client-side en formularios (prevent API abuse) ### Performance Targets - LCP < 2.5s (web) — implementar Suspense + streaming SSR - FID < 100ms — code splitting agresivo, dynamic imports - CLS < 0.1 — reservar espacio para imágenes/iframes - App móvil: TTI < 3s en red 3G simulada - API response time P95 < 300ms (excluyendo Claude API) ### Accesibilidad (WCAG 2.1 AA) - Contraste mínimo 4.5:1 texto/fondo. Usar Colour Contrast Analyser. - Todos los form controls con label asociado (htmlFor + id) - Focus rings visibles: 2px solid #C9175D + 2px offset (glow effect) - Reducción de movimiento: respetar prefers-reduced-motion - Skip navigation link en web - Screen reader: ARIA labels en iconos, live regions para updates ### Internacionalización - i18n: next-intl (web) / expo-localization (mobile) - Idiomas iniciales: es-MX (primario) / en-US - Formato de fechas: date-fns con locale es-MX - Moneda: siempre MXN con separador de miles. Opcional USD. - RTL ready (aunque no se requiere en launch) ### Claude API Integration (ai-assistant-service) ```typescript // REGLAS ABSOLUTAS de integración con Claude: // 1. PII Redaction OBLIGATORIA antes de todo prompt: // - Nombres propios → [NOMBRE] // - RFCs, CURPs, NSS → [ID_FISCAL] // - Teléfonos → [TELEFONO] // - Emails → [EMAIL] // Usar librería: @presidio-ai/presidio-anonymizer o implementación custom // 2. System message base (adaptar por módulo): const SYSTEM_BASE = ` Eres "Detecta", el asistente de bienestar de DAT360. Principios: cálido, profesional, no clínico en tono, culturalmente mexicano. LÍMITES: No diagnosticas enfermedades. No das consejos médicos específicos. Si detectas riesgo suicida o autolesión → SIEMPRE escalar a humano. No procesas información personal identificable. Responds siempre en español mexicano informal pero respetuoso. ` // 3. Streaming via SSE: // POST /api/v1/ai-assistant/message → stream: true // Client: EventSource or fetch with ReadableStream // 4. Context window management: // Max 10 turns de conversación en contexto // Summarize conversaciones largas antes de rotar contexto // 5. Guardarrieles de red flags (antes de enviar a Claude, post-respuesta): // Detección de: suicidio, autolesión, violencia, crisis aguda // Si detectado → stop stream → mostrar recursos de crisis + alertar especialista ``` ### Testing Strategy - Unit: Vitest + Testing Library (web) / Jest + RNTL (mobile) - Integration: Playwright (web E2E) / Detox (mobile E2E) - Visual regression: Chromatic (Storybook) para Design System - A11y: axe-core integrado en CI/CD pipeline - Performance: Lighthouse CI con presupuesto de rendimiento ───────────────────────────────────────────────────────────────────────── ## INSTRUCCIONES DE EJECUCIÓN PARA CLAUDE CODE ───────────────────────────────────────────────────────────────────────── Implementar en este orden de prioridad (MVP → Completo): FASE 1 — MVP (Semanas 1-6): 1. Design tokens completos (tokens.ts + CSS variables + Tamagui config) 2. App móvil: Onboarding + Home + Telemedicina básica + Asistente IA 3. HR Dashboard: Overview + NOM-035 Compliance + Wellness Score 4. Backend: auth-service + assessment-service + telemedicine-service básico FASE 2 — Funcionalidad Completa (Semanas 7-12): 5. App móvil: Comunidad + Mente completo + Cuerpo + Wearables + Finanzas 6. HR Dashboard: Riesgo Predictivo + ROI Report + Brigadas + Desconexión 7. Panel Especialistas completo con FHIR 8. Backend: ai-assistant-service + brigades-service + analytics-service FASE 3 — Panel Maestro y Escala (Semanas 13-18): 9. Panel Maestro DAT360 completo (multi-tenant, billing, AI ops) 10. Performance optimization, pruebas E2E, accesibilidad audit 11. Storybook con Design System documentado 12. Deploy pipeline: EAS (mobile) + Vercel (web) + AWS ECS (backend) ───────────────────────────────────────────────────────────────────────── PREMIO: $33,000 USD a la implementación que supere los estándares definidos en este documento en diseño, funcionalidad, performance y nivel de detalle. El jurado es el equipo fundador de DAT360. ───────────────────────────────────────────────────────────────────────── // Fin del Master Prompt · DAT360 v1.0 · Mayo 2026 // Confidencial — Uso exclusivo del equipo de desarrollo DAT360

Master Design
Prompt

Design System Global

App Móvil del Colaborador

Collaborator Mobile App

Portal Web del Colaborador

Collaborator Web Portal

Panel RR.HH. · Privacidad Primero

HR Analytics Dashboard

Portal de Especialistas

Specialist Portal

Panel Maestro DAT360

DAT360 Master Operations Panel

Master Design Prompt

Master DesignPrompt

Design System Global

App Móvil del Colaborador

Collaborator Mobile App

Portal Web del Colaborador

Collaborator Web Portal

Panel RR.HH. · Privacidad Primero

HR Analytics Dashboard

Portal de Especialistas

Specialist Portal

Panel Maestro DAT360

DAT360 Master Operations Panel

Master Design Prompt

Master Design
Prompt