Todo lo reutilizable de la UI de Phlou: tokens y componentes, listos para portar. Para usarlo: importa la fuente, copia el bloque :root y las clases que necesites. Para re-skinear a otra marca, cambia solo los tokens de marca (el resto es estructura neutra). Es HTML + variables CSS, así que funciona en React, Vue o HTML plano.
La identidad de Phlou: tres azules, dos verdes/salvia y un beige. Cámbialos y toda la app cambia de marca sin tocar la estructura.
Roles derivados: botón primario y acentos = --brand; IA y gráficos = --brand-2; conectores de flujo = --sage; marco de selección = --brand-3.
Tintados sobre el beige base. Dan el "aire" minimalista; se mantienen igual en cualquier marca.
Para estados de datos, evitando los semáforos saturados: verde musgo, ocre y terracota — afinan con la paleta en vez de gritar.
Una sola familia, pesos 400/500/600/700. Jerarquía por tamaño, no por exceso de negrita.
Línea moderna y consistente (estilo Lucide: caja 24×24, esquinas redondeadas, color heredado del contexto). Los de navegación son los del rail; el resto cubre acciones y estados comunes. Copia el <path> que necesites.
El patrón de tarjeta de Deals/contactos: título + subtítulo + filas etiqueta/valor + pie con métrica y monto.
| Name | CEO | Type | Source | |
|---|---|---|---|---|
NNothing | Carl Pei | Subscribed | Inbound | |
AAugmental | Tomás Vega | Subscribed | Outreach |
Línea suave periwinkle + área tenue + tooltip flotante. Aquí un mini-ejemplo estático con los mismos tokens.
Para canvas/DAG: grid de puntos, nodos con conectores naranja, y marco de selección.
La firma de item: rail lateral de 62px + panel blanco con esquinas superiores redondeadas que “flota” sobre el fondo gris. Es el contenedor de casi todas las pantallas.
Una pantalla real (Integrations) dentro de un shell tipo sistema operativo. El botón Atrás aparece solo cuando entras a una opción dentro de otra (profundidad > 1). La X arriba a la derecha te devuelve al dashboard desde cualquier punto. Pruébalo: Home → engranaje (Settings) → clic en una integración → aparece Atrás. O abre Companies y clic en una empresa.
El sistema escala a móvil con reglas claras: el rail se vuelve tab bar inferior, las tablas se vuelven listas apiladas, los grids pasan a una columna y el panel ocupa toda la pantalla. El modelo OS se mantiene: la X→dashboard del desktop equivale a la pestaña Home, y el Atrás sigue arriba a la izquierda, apareciendo solo en pantallas anidadas. Toca una empresa o una integración para ver el Atrás; toca Home para volver.