Flow — Librería de Componentes UI

01 — Botones

Botones

El sistema de botones de Flow usa 4 variantes jerárquicas, 3 tamaños y estados consistentes. El botón primario siempre usa green-500 con texto charcoal — oscuro sobre brillante.

Variantes

Variante	Background	Texto	Borde	Uso
Primary	`green-500`	`charcoal`	—	CTA principal, una por sección
Secondary	transparent	`charcoal`	`charcoal 1.5px`	Acción secundaria junto a primary
Ghost	transparent	`green-600`	—	Acciones terciarias, links en contexto
Danger	`#e84545`	`#fff`	—	Eliminar, cancelar — solo acciones destructivas

Tamaños

Tamaño	Padding	Font Size	Radius
Small	`8px 16px`	`13px`	`6px`
Default	`12px 24px`	`15px`	`8px`
Large	`16px 32px`	`17px`	`10px`

Con íconos

Regla de ícono: Los íconos en botones usan 18px (default) con stroke-width 1.5px. Siempre del lado izquierdo excepto flechas de navegación (→ derecha).

Estados

Estado	Cambio visual	Token / valor
Hover	Bg → green-600, translateY(-1px), shadow-md	`--green-600` `--shadow-md`
Focus	Ring 3px green-500 α25%	`rgba(59,235,100,0.25)`
Active	translateY(0), sin shadow	—
Disabled	Bg → border, texto → tertiary	`--border` `--tertiary`

Sobre fondo oscuro

Nota: El botón primario no cambia en dark — green-500 con texto charcoal mantiene contraste AAA. El secundario invierte a borde offwhite.

02 — Cards

Cards

Las cards son el contenedor principal de información. Siempre con borde sutil, fondo offwhite, y transición a green en hover. Nunca dependas del shadow para crear jerarquía — usa borde.

Card estándar

Employee XP

Diseñamos experiencias que transforman la relación empleado-empresa.

Leader XP

Líderes que inspiran desde la claridad, no desde la presión.

Sales XP

Procesos comerciales que se sienten naturales y generan resultados.

Propiedad	Token	Valor
Background	`surface.secondary`	`#f0eee9`
Border	`border.default`	`#cfd5d3 1px`
Border Hover	`border.active`	`#3beb64`
Radius	`radius.medium`	`12px`
Padding	`spacing.scale-4`	`24px`
Shadow Hover	`elevation.md`	`0 4px 12px rgba(15,44,36,0.08)`

Card de estadística

94%

Satisfacción

3.2x

ROI Promedio

+47

eNPS Lift

Card oscura

Metodología propia

No somos consultores genéricos. Cada solución nace del contexto real de tu empresa.

Data-driven

Medimos cada intervención. Si no mueve indicadores, no lo hacemos.

03 — Formularios

Formularios

Inputs claros, feedback inmediato, y focus ring verde. El fondo del input es cream (no blanco) para mantener la calidez de marca. El estado de error usa #e84545 sin ambigüedad.

Campos de texto

Nombre completo

Email corporativo

Usaremos este email para toda la comunicación.

Teléfono (error)

Formato inválido. Usa: +52 55 1234 5678

Empresa (disabled)

Estado	Border	Background	Extra
Default	`#cfd5d3 1.5px`	`cream (#f7f5f3)`	—
Focus	`green-500 1.5px`	`cream`	Ring: `0 0 0 3px rgba(59,235,100,0.12)`
Error	`#e84545 1.5px`	`cream`	Ring: `0 0 0 3px rgba(232,69,69,0.12)`
Disabled	`#cfd5d3 1.5px`	`offwhite`	color: tertiary, cursor: not-allowed

Select & Textarea

Servicio de interés

¿Qué desafío enfrentas?

Checkbox, Radio & Toggle

Acepto términos y condiciones

Deseo recibir novedades

Plan Essentials

Plan Growth

Modo oscuro

Notificaciones activas

Accent color: Tanto checkbox como radio usan accent-color: var(--green-500) para el color nativo del browser. El toggle es custom con transición de 150ms.

04 — Tablas

Tablas

Tablas limpias con header offwhite, row hover sutil en green α3%, y bordes de 1px. No usar zebra-striping — el hover es suficiente para tracking visual.

Tabla de datos

Programa	Participantes	Satisfacción	Estado
Onboarding XP	342	96%	Activo
Leader Sprint Q1	48	91%	Activo
Sales Bootcamp	125	88%	En revisión
Service Design Lab	67	—	Borrador

Elemento	Token	Valor
Header bg	`component.table.header-bg`	`#f0eee9`
Header border	`component.table.border`	`#cfd5d3 2px bottom`
Row border	`component.table.border`	`#cfd5d3 1px bottom`
Row hover	`green-500 α3%`	`rgba(59,235,100,0.03)`
Padding	`spacing.scale-3`	`12px 16px`

05 — Navegación

Navegación

Componentes de navegación con feedback visual a través de green-500 como indicador activo. Sin efectos llamativos — la claridad es la señal.

Tabs

Estado	Color texto	Border bottom
Default	`secondary (#768782)`	transparent
Hover	`charcoal (#0f2c24)`	transparent
Active	`green-600 (#2fd954)`	`green-500 2px`

Breadcrumbs

Paginación

Regla: La página activa usa green-500 como background con texto charcoal — mismo patrón que el botón primario. Máximo 5 números visibles + ellipsis.

06 — Badges & Tags

Badges y Tags

Badges para estado y categorización. Tags para filtrado y etiquetas removibles. Ambos siempre con border-radius completo (pill shape).

Badges de estado

Activo Borrador En revisión Cancelado

Variante	Background	Color	Uso
Green	`green-500 α12%`	`darkgreen`	Activo, completado, éxito
Charcoal	`charcoal α8%`	`charcoal`	Neutral, borrador, inactivo
Warning	`#f0a730 α12%`	`#b07a1e`	Pendiente, en revisión
Error	`#e84545 α10%`	`#e84545`	Error, cancelado, rechazado

Tags removibles

Employee XP Liderazgo Q1 2026

07 — Alertas

Alertas y Feedback

Cuatro niveles semánticos. Cada alerta abre con un ícono Lucide de 20px. Los colores de feedback están definidos en color.semantic.feedback.

Programa guardado. Los cambios se publicarán en la próxima sincronización.

Error al procesar. Revisa los campos marcados e intenta nuevamente.

Atención: Este programa tiene participantes activos. Editar afectará sus métricas.

Nota: Los reportes se generan automáticamente cada lunes a las 8:00 AM.

Tipo	Token color	Ícono	Background α
Success	`feedback.success (#2fd954)`	check-circle	`8%`
Error	`feedback.error (#e84545)`	alert-circle	`6%`
Warning	`feedback.warning (#f0a730)`	alert-triangle	`8%`
Info	`feedback.info (secondary)`	info	`4%`

08 — Modales

Modales y Diálogos

Fondo con overlay charcoal α40%. El modal usa surface.primary (cream) con shadow-lg. Máximo 440px de ancho. Siempre incluir acción de cierre.

Modal de confirmación

Elemento	Token	Valor
Overlay	`charcoal α40%`	`rgba(15,44,36,0.4)`
Background	`surface.primary`	`#f7f5f3`
Shadow	`elevation.lg`	`0 8px 24px rgba(15,44,36,0.12)`
Radius	`radius.large`	`16px`
Max width	—	`440px`
z-index	`zIndex.modal`	`400`

Tooltip

Tooltip specs: Background charcoal, text offwhite, 12px/500, padding 6px 12px, radius 6px. Aparece 8px arriba del trigger. z-index: 600 (zIndex.tooltip).

09 — Avatars

Avatars

Iniciales sobre fondo offwhite con borde sutil. Tres tamaños. En grupo, se solapan con margin negativo y borde cream para separación visual.

Tamaños

Tamaño	Dimensión	Font size
Small	`32×32px`	`12px`
Default	`40×40px`	`14px`
Large	`56×56px`	`20px`

Grupo de avatars

Overlap: margin-left: -10px para cada avatar después del primero. Border 2px con color cream para el recorte visual.

Librería de Componentes UI

Botones

Variantes

Tamaños

Con íconos

Estados

Sobre fondo oscuro

Cards

Card estándar

Card de estadística

Card oscura

Formularios

Campos de texto

Select & Textarea

Checkbox, Radio & Toggle

Tablas

Tabla de datos

Navegación

Tabs

Breadcrumbs

Paginación

Badges y Tags

Badges de estado

Tags removibles

Alertas y Feedback

Modales y Diálogos

Modal de confirmación

Tooltip

Avatars

Tamaños

Grupo de avatars

Barras de Progreso

Loading Skeletons

Card skeleton

Table skeleton