El sistema de alerta temprana para producción de confección. Volvemos visible tu cadena de producción en tiempo real y avisamos en el momento exacto en que el flujo se rompe — antes de que mate la entrega.
Posicionamiento
La categoría que nadie nombra
Todos venden “control total”, “eficiencia” y “reportes”. Phlou ocupa el espacio que ninguno nombra de frente: el momento — el instante entre que el flujo se rompe y que alguien todavía podría actuar. Ese intervalo es nuestro.
No es un ERPNo es automatizaciónNo es IANo es vigilancia del operarioNo es “industria 4.0”No mide velocidad individual
El Centinela Sereno: vigila sin alarmar. Está calmo justo porque está atento — y por eso, cuando alza la voz, se le cree. Habla en frases cortas, en el idioma del dueño de planta, no en el del software.
Color
Marca, estructura y datos
El color se organiza en tres niveles, exactamente como en el Design System. Marca (los azules y la salvia) es lo único que se cambia al re-skinear. Estructura (los neutros sobre beige) da el aire light-first y no se toca. Datos colorean estados sin gritar: musgo, ocre y terracota.
Marca · navy / salvia — re-skinea estos
Navy
#2B4260
Marca primaria, CTAs, navegación activa.
Marca
Steel
#4C6B8B
Azul medio: secundario y gráficos.
Marca
Sky
#7B99B1
Azul claro: marco de selección, acentos suaves.
Marca
Sage
#798976
Verde salvia: conectores de flujo.
Marca
Sage-beige
#BCBFB0
Verde-beige: superficies suaves.
Marca
Estructura · neutros sobre beige — no se tocan
Panel
#FFFFFF
Superficie principal, cards.
Estructura
Beige
#F6F7F3
Fondo base de la app.
Estructura
Tile
#E5E9DD
Superficies, avatares, hover.
Estructura
Line
#DEE2D7
Líneas, separadores, bordes.
Estructura
Ink
#1B2A3A
Tinta navy-slate, texto.
Estructura
Calificación de datos · estados — tonos no típicos
Positivo
Positivo
#DBE9D4 / #3F7A4E · musgo
Todo fluye.
Datos
Atención
Atención
#F3E4BD / #9C6A18 · ocre
Stock bajo, ritmo en riesgo.
Datos
Negativo
Negativo
#F1DACD / #AF4A30 · terracota
Rotura, detención, vencimiento.
Datos
Roles derivados: botón primario, navegación activa y acentos = Navy. Secundario y gráficos = Steel. Conectores de flujo = Sage. Marco de selección = Sky. Los estados de datos (musgo · ocre · terracota) afinan con la paleta en vez de saturar el semáforo — gritan solo cuando algo de verdad pasa.
Tipografía
Display · cuerpo · dato
Una sola familia humanista para voz y lectura; el monoespaciado entra solo donde hay números que importan. Igual que en el landing.
Display & cuerpo — Manrope · 500 / 600 / 700
El flujo, hecho visible.
AaAaAaAa
Cuerpo — Manrope · 400 / 500
Volvemos visible tu cadena de producción y te avisamos en el momento exacto en que el flujo se está rompiendo. Legible en frases largas, en tablas densas y en la UI de datos del producto, con buen soporte de acentos del español.
Mono — JetBrains Mono · 400 / 500 · el dato que es verdad medida
OP-1042 · SAM 2.50 · 340 / 560 · 61%
Escala de la UI — un solo tipo, jerarquía por tamaño (no por exceso de negrita)
Display · 30 / 700Órdenes
Título · 22 / 700Camisa Classic · OP-1042
Sección · 16 / 700Operaciones en riesgo
Cuerpo · 14 / 400Te avisamos en el momento exacto en que el flujo se rompe.
Etiqueta · 13.5 / 600Inventario calculado
Micro · 12.5 / 500Actualizado hace 2 min
Wordmark
Wordmark-first
“Phlou” en display — P mayúscula, resto minúscula. Nunca PHLOU, nunca phlou salvo en URLs. La o final porta un anillo navy: el punto donde el flujo no se corta.
Mayúscula correcta
Phlou — nunca PHLOU ni phlou salvo en handles.
El anillo navy
La o es un círculo Navy #2B4260: la firma visual del flujo continuo.
El producto
Sistema y señal, no decoración
La interfaz hereda la claridad de una herramienta de datos moderna — barra lateral fina, panel de esquinas redondeadas, pestañas y tabla densa pero legible — vestida con la paleta navy / salvia del Design System. El Navy vive en la estructura; los estados de datos (positivo, atención, negativo) entran solo cuando algo de verdad pasa.
Vista en vivo de una orden — cada operación, su avance, inventario calculado y señal. Delantero crítico: el ensamble está por pararse.
01
Light-first
Fondo beige, paneles claros, espacio en blanco generoso. El producto vive en claro, no en un dashboard negro.
02
Navy en la estructura
El navy marca pestaña activa, navegación y aristas activas — nunca un estado de información ni un dato.
03
Señal reservada
Warning y crítico aparecen solo cuando el flujo se rompe, siempre con ícono y texto. El mono lleva los números.
Voz
Pérdidas evitadas, no transacciones registradas
Te enteras mientras pasa, no al día siguiente.
“El cuello costaba un dólar. No enterarse costó dieciocho mil.”
“No te movemos la pieza. Te decimos que está ahí.”
“Tu ERP te dice qué facturaste el mes pasado. Nosotros, qué se va a parar en dos horas.”
Decimos
Nunca decimos
Te avisa cuando falten cuellos antes de que pare tu ensamble.
Registra el inventario de piezas en tiempo real.
Te enteras cuando está pasando, no al día siguiente.
Dashboard en tiempo real.
Sabes qué pasó con cada orden, sin preguntarle a nadie.
Trazabilidad.
El operario sigue ahí, mejor coordinado.
Automatización. IA. Industria 4.0.
Tokens del sistema
Radios, sombra y espacio
Las constantes que dan ritmo y profundidad, idénticas en toda la app: esquinas suaves pero no blandas, sombras de baja opacidad y una escala de espacio de base 4.
Un solo set: trazo redondeado, caja de 24×24, color heredado del contexto (currentColor). Los de navegación viven en Navy; el resto hereda la tinta navy-slate. Nunca íconos rellenos, nunca dos grosores en la misma pantalla.
Navegación — el rail
Inicio
Flujo
Alertas
Inventario
Ajustes
Acciones & estados
Volver
Cerrar
Buscar
Filtrar
Ordenar
Vista
Añadir
Desplegar
Avanzar
Reloj
Calendario
Riesgo
Listo
Editar
Mensaje
Enviar
Componentes
El kit de la interfaz
Los mismos componentes de la app, en la paleta navy / salvia. El Navy vive en la estructura interactiva — botón primario, pestaña activa, foco, switch encendido. Los estados (positivo · atención · negativo) entran solo cuando hay algo que reportar.
Botones.btn · .btn--clay · .icon-btn
Switch.toggle · .toggle.on
Avisar cuando el inventario caiga bajo el umbral
Tags, badge & estado en vivo.pilltag · .badge · .status
FluyeEn riesgoDetenidoConfecciónEnsambleOP-1042En vivo
Pills · pestañas · segmentado.pill · .tabx · .seg
HoyEsta semanaMes
Todas las operacionesEn riesgoDetenidas
Inputs.input · .input.select · textarea · :focus
OP-1042
Buscar orden, estilo o cliente…
Confecciones Norte
Rich select.select-rich
Confecciones NortePlanta principal · 3 líneas activas
Nodo & conector de flujo.node · .flow-connector · .flow-selection
El lienzo de Flujo: grid de puntos, nodos de operación y conectores en salvia. El marco verde marca el nodo seleccionado — el punto donde el flujo está por romperse.
Confección
418 / 560 piezas · ritmo −18% vs. plan.
Ensamble
Detenido — faltan cuellos. Sin acción, para en ~2 h.
Estructura
El shell de la app
El contenedor de casi toda pantalla: un rail fino de 58px sobre el fondo beige y un panel claro de esquinas superiores redondeadas que “flota”. El rail lleva la navegación; el panel, el contenido. Misma anatomía en escritorio y, plegada a tab bar inferior, en móvil.
Título de la página
Subtítulo · conteo
En vivo
TodasActivasCerradas
Aquí va el contenido — tabla, tablero, flujo o detalle de orden.
01
Rail · 58px
Navegación raíz. Ícono activo en Navy sobre superficie clara; el resto en tinta tenue.
02
Panel flotante
Esquinas superiores redondeadas y sombra suave: el contenido se eleva sobre el fondo cálido.
03
Light-first
Fondo beige, paneles claros, aire generoso. Nunca un dashboard negro.
Modelo de navegaciónstack · Atrás contextual · X → Inicio
Atrás→aparece solo dentro de una opción anidada (profundidad > 1).
