NexoFlow Design System — Tailwind CSS v4

01 — Foundation

Tokens de Diseño

Variables semánticas definidas con @theme en CSS. Colores en espacio OKLCH para percepción uniforme y mejor interpolación en animaciones.

Paleta Semántica

Primary

oklch(40% 0.18 260)

Secondary

oklch(93% 0.015 264)

Success

oklch(50% 0.16 145)

Destructive

oklch(52% 0.22 27)

Warning

oklch(72% 0.18 75)

Muted

oklch(93% 0.01 264)

Border

oklch(88% 0.015 264)

Background

oklch(98.5% 0.005 264)

Tabla de Tokens Clave

Token CSS	Valor OKLCH	Uso	Dark Mode
--color-primary	oklch(40% 0.18 260)	Botones, links, foco	oklch(62% 0.18 260)
--color-success	oklch(50% 0.16 145)	Estados positivos, validación	oklch(62% 0.16 145)
--color-destructive	oklch(52% 0.22 27)	Errores, acciones destructivas	oklch(65% 0.22 27)
--color-warning	oklch(72% 0.18 75)	Alertas, advertencias	oklch(78% 0.18 75)
--color-muted-foreground	oklch(50% 0.02 264)	Texto secundario, placeholders	oklch(62% 0.02 264)

Radio de Bordes

Tokens --radius-* escalables

sm
4px

md
6px

lg
8px

xl
12px

2xl
16px

full
9999px

Tipografía

Escala modular con razón 1.25

Aa

Inter — Sans

text-4xl / 2.25rem

xs El flujo de trabajo perfecto para tu equipo

sm El flujo de trabajo perfecto para tu equipo

md El flujo de trabajo perfecto

lg El flujo de trabajo

2xl NexoFlow 3.0

02 — Components

Botones

Construidos con el patrón CVA (Class Variance Authority). Variantes ortogonales para tipo y tamaño, más estados disabled y loading.

Variantes — tamaño default

Tamaños — variante default

Estados

/* CVA button — v4 pattern */
const buttonVariants = cva(
  'inline-flex items-center rounded-lg text-sm font-medium transition-colors',
  { variants: { variant: {
    default: 'bg-primary text-primary-foreground hover:bg-primary/90',
    outline: 'border border-border hover:bg-accent',
  }}}
)

03 — Components

Formularios

Inputs con soporte de error, helper text y states accesibles. Compatibles con React Hook Form + Zod.

Crear automatización

Configura un nuevo flujo de trabajo para tu equipo

Nombre del flujo Visible solo para tu equipo

Disparador

Email de notificación Introduce un email válido

Descripción

Activar inmediatamente

Estados del Input

Default

Con valor

Error state Este campo es obligatorio

Disabled

Contraseña

04 — Components

Badges y Alertas

Sistema de indicadores visuales y mensajes de estado con soporte completo para feedback al usuario.

Badges

Nuevo Draft Activo Error Pendiente Archivado

Marketing Premium CRM Verificado Beta

Filtros de chip (seleccionables)

Todo

Email

SMS

Push

CRM

Webhook

Slack

Alertas

Actualización disponible

NexoFlow 3.1 está disponible. Incluye mejoras de rendimiento y nuevos conectores.

Flujo activado correctamente

Lead Nurturing Q3 está ahora procesando 1.247 contactos.

Límite de envíos al 80%

Has usado 8.000 de tus 10.000 envíos mensuales. Considera actualizar tu plan.

Error de conexión con HubSpot

El token de API ha expirado. Reconecta la integración para continuar.

05 — Patterns

Dashboard Pattern

Ejemplo real de dashboard usando el sistema de diseño. Compound components Card + Grid + Stats.

Contactos activos

12.847

+18.3% vs mes anterior

Flujos ejecutados

3.291

+7.1% esta semana

Tasa de conversión

24.6%

-2.1% vs benchmark

Errores de entrega

47

-61% esta semana

Flujos activos

Rendimiento en tiempo real

Live

Lead Nurturing Q3 89%
Onboarding SaaS 72%
Re-engagement Inactivos 45%
Upsell Plan Pro 91%

Equipo

Miembros con acceso al workspace

AL

Ana López

ana@nexoflow.io

Admin

MR

Marc Roca

marc@nexoflow.io

Editor

SG

Sara García

sara@nexoflow.io

Designer

JP

Juan Pérez

juan@nexoflow.io

Viewer

06 — Configuration

CSS-First Config

En Tailwind v4 no existe tailwind.config.ts. Todo se define en CSS con la directiva @theme.

app.css — v4

              /* Tailwind CSS v4 — CSS-first */

              @import "tailwindcss";

              @theme {

                /* Colores semánticos OKLCH */

                --color-primary: oklch(40% 0.18 260);

                --color-success: oklch(50% 0.16 145);

                --color-destructive: oklch(52% 0.22 27);

                /* Radius tokens */

                --radius-lg: 0.5rem;

                --radius-xl: 0.75rem;

                /* Animaciones */

                --animate-fade-in: fade-in 0.2s ease-out;

                @keyframes fade-in {

                  from { opacity: 0; transform: translateY(-4px); }

                  to { opacity: 1; transform: translateY(0); }

                }

              }

              /* Dark mode con @custom-variant */

              @custom-variant dark (&:where(.dark, .dark *));

              .dark {

                --color-primary: oklch(62% 0.18 260);

                --color-background: oklch(14% 0.025 264);

              }

Migración v3 → v4

v3	v4
tailwind.config.ts	@theme en CSS
@tailwind base	@import "tailwindcss"
darkMode: "class"	@custom-variant dark
theme.extend.colors	@theme { --color-* }
tailwindcss-animate	@keyframes en @theme
forwardRef()	ref como prop (React 19)

Atajos de teclado

Abrir paleta de comandos

⌘K

Toggle dark mode

⌘⇧D

Nuevo flujo

⌘N

07 — Patterns

Loading States

Skeleton screens con animación shimmer usando gradientes CSS. Evitan layout shift y mejoran la percepción de velocidad.

Cargando dashboard...

Skeleton de tarjeta de flujo

Stats skeleton

Grid 4 columnas en carga