Design System — FlowKit Docs

Qué es el TDSM

El Theme Design System Manager (TDSM) es un editor visual integrado en el panel de administración de WordPress que permite definir y modificar los tokens de diseño del sitio sin tocar código.

Los tokens se guardan en el archivo flowtitude.css, que vive dentro de la carpeta de WindPress (uploads/windpress/data/theme/flowtitude.css). Este archivo es leído tanto por Tailwind CSS (vía WindPress) como por Bricks Builder, lo que garantiza consistencia entre el editor visual y el frontend.

Cambios en tiempo real Los cambios en los tokens se previsualizar inmediatamente en el panel. Solo se persisten en el archivo al pulsar Guardar.

Formas de acceso

El TDSM está disponible desde tres puntos:

Ubicación	Descripción
FlowKit > Design System	Página completa en el panel de administración de WordPress
Barra de admin	Botón "Design System" en la barra superior de WordPress (frontend y Bricks)
Bricks Builder (embed)	Panel embebido dentro del editor de Bricks vía AJAX, para editar tokens sin salir del editor

Secciones de tokens

El TDSM organiza los tokens en 9 secciones editables independientes:

Colores

Sistema de color basado en OKLCH (Oklab Lightness, Chroma, Hue), el espacio de color perceptualmente uniforme recomendado por CSS Color Level 4.

color-primary — Color primario de la marca. Se define como valor OKLCH
color-secondary — Color secundario complementario
ft-color-text — Color base del texto
ft-color-background — Color base del fondo

Para color-primary y color-secondary, el TDSM genera automáticamente una escala de 11 pasos (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950), calculada a partir del valor base. Esto produce una paleta completa y consistente desde un único color.

Color picker + OKLCH Cada color tiene un selector visual (color picker) y un campo de texto para el valor OKLCH. Al cambiar uno, el otro se sincroniza automáticamente.

Tipografía

Tokens para controlar las fuentes del sitio:

font-family — Familia tipográfica principal
font-heading — Familia para encabezados (si es diferente)
font-size-base — Tamaño base del cuerpo de texto

Espaciado

Escala de espaciado que genera variables CSS para márgenes, paddings y gaps:

Valores desde 3xs hasta 5xl
Se integran con Tailwind como @theme tokens

Contenedor

Dimensiones máximas para el contenedor principal del sitio:

max-width — Ancho máximo del contenedor
padding-inline — Espacio lateral interno

Auto-grid

Configuración para el sistema de grid automático basado en auto-fill / auto-fit:

min-column-width — Ancho mínimo de cada columna
gap — Separación entre celdas

Botones

Tokens específicos para botones del sitio:

Padding horizontal y vertical
Border radius específico para botones
Tamaño de fuente

Leading (line-height)

Valores de interlineado personalizados:

leading-tight, leading-normal, leading-relaxed

Radius

Escala de bordes redondeados:

Desde radius-sm hasta radius-xl

Aspect ratios

Proporciones predefinidas para imágenes y contenedores:

Ratios estándar: 1/1, 4/3, 16/9, 21/9
Ratios personalizados configurables

El archivo flowtitude.css

El TDSM lee y escribe en uploads/windpress/data/theme/flowtitude.css. Este archivo contiene:

css

@theme inline {
  --color-primary-50: oklch(0.97 0.01 267);
  --color-primary-100: oklch(0.93 0.02 267);
  /* ... escala completa ... */
  --color-primary-950: oklch(0.25 0.12 267);

  --ft-color-text: oklch(0.15 0.01 267);
  --ft-color-background: oklch(0.99 0.005 267);

  --font-family: 'Inter', sans-serif;
  --font-heading: 'Cabin', sans-serif;

  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  /* ... más tokens ... */
}

La directiva @theme inline es específica de Tailwind CSS v4 y registra estos valores como tokens extendidos del tema por defecto de Tailwind.

Permisos de archivo El servidor web necesita permisos de escritura en uploads/windpress/data/theme/. Si el TDSM muestra un error de permisos, verifica que el directorio sea escribible por el usuario del servidor (normalmente www-data o psacln).

Restaurar valores por defecto

El botón Reset a valores por defecto reemplaza todo el contenido de flowtitude.css con la plantilla original incluida en FlowKit. Esto es útil para:

Empezar de cero con un nuevo proyecto
Recuperar tokens eliminados accidentalmente
Probar la configuración por defecto

Acción destructiva El reset sobrescribe completamente el archivo. Los tokens personalizados que hayas definido se perderán.

Utilities Registry

Además de los tokens, FlowKit incluye un sistema de registro de utilities personalizadas que no forman parte del tema base de Tailwind.

Actualmente incluye:

Intersection Observer utilities — Clases para animaciones basadas en la visibilidad del viewport (aparecer al hacer scroll, fade-in, slide-up, etc.)

Estas utilities se escanean automáticamente y se documentan en la página de administración del Design System.