La plataforma madre del diseño Workmed
Una fuente de verdad replicable: tokens, componentes y patrones que cualquier plataforma del ecosistema —Salud Mental, Producción, Cliente, Flowmed— puede reconstruir leyendo un solo lugar.
design_system.md
Todo lo que ves aquí nace de un único documento de diseño y una hoja de estilos canónica portable.
- 01Tokens de color, tipografía y espacio →
- 02Botones, cards, pills, tablas, KPIs →
- 03Patrones de layout y shells de app →
Clínico, no hospitalario
Cinco principios gobiernan cada pantalla del ecosistema. El aire, el azul profundo y el rojo como señal puntual.
El rojo es señal, no decoración
El rojo #CC2D3B solo aparece en CTAs primarios, eyebrows y estados de alerta. Máximo un rojo prominente por pantalla.
Confianza por densidad controlada
El aire es parte del mensaje: 120px de padding vertical por defecto. Nunca se llenan los anchos al 100%.
Paneles oscuros para foco
Superficies normales blancas sobre #FAFBFD. Los bloques que requieren atención se invierten a azul oscuro.
Un lenguaje, seis familias de tokens
Replica literalmente estos nombres en proyectos hermanos. Cambia solo --wm-* para re-pintar a otra sub-marca.
Componentes listos para copiar
Cada componente vive con su preview en vivo y su snippet. Clases estables, agnósticas a la sub-marca.
Botones & CTAs
Primario rojo, oscuro, ghost y link. Pill, peso 500, flecha que se desplaza en hover.
Cards
Contenido, destacado y lista. Hover con lift, sombra azul e icono que se pinta de rojo.
Datos & estado
KPIs, tablas con avatar, pills de estado y badges. La paleta semántica compartida.
Una marca, muchas plataformas
Todas hablan el mismo lenguaje visual. Stacks distintos (Symfony, Laravel, estático), un solo sistema de diseño.
Portal Salud Mental →
13 evaluaciones psicolaborales con pre-informe IA y tableros multi-rol. Implementación de referencia de este sistema.
Portal Producción
Valorización: precios, descuentos por volumen y cierre de facturación.
Portal Cliente
Pre-agendamiento multi-empresa de exámenes ocupacionales.
Flowmed
Agendamiento clínico y confirmación de citas. El corazón operativo.
Flowmed · SuccessFactor
Sincronización con SAP SuccessFactor para datos de RR.HH.
AquilaScan
Tablero de drug-screening: 26.000+ tests, validez y positividad por equipo.
Construye tu próxima pantalla
sin reinventar el lenguaje
Copia ds-core.css, carga Poppins y reutiliza las clases. El checklist de cumplimiento te dice si está bien.