El design system open-source para Bricks.

Tokens CSS en formato Tailwind v4, componentes listos y guía de uso. Gratis, MIT, sin build step.

Descargar FDSVer tokens
theme.css
tokens.css
@theme {
  --color-sa-brand-500: #ff9700;
  --color-sa-brand-600: #e68600;
  --color-ink-950: #0f172a;
  --font-display: 'Lexend', sans-serif;
  --spacing-4: 1rem;
  --radius-md: 0.5rem;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
}

Introducción

FDS — Flowtitude Design System

Sistema de diseño open-source para Bricks Builder y cualquier proyecto WordPress. Tokens CSS en formato Tailwind v4, componentes base y guías de uso. Gratis, MIT.

Instalación

Importa FDS en tu proyecto vía CSS, npm o copy-paste. Sin build step obligatorio.

Tokens

Colores, tipografías, espaciado y sombras como variables CSS listas para usar.

Componentes

Bloques HTML+CSS probados: botones, cards, forms, navegación, heroes.

Bricks Builder

Cómo usar tokens FDS dentro del editor visual de Bricks sin fricción.

Por qué existe FDS

Construir con Bricks es rápido, pero sin sistema de diseño cada página acaba con spacing arbitrario, colores parecidos-pero-no-iguales y tipografías inconsistentes. FDS aporta el andamiaje: decisiones ya tomadas, tokens nombrados, componentes de referencia.

Se usa tal cual o se extiende. Todo en CSS estándar, sin dependencias.

Lo esencial

Qué incluye

  • Tokens CSS en @theme v4 (colores, tipo, spacing, sombras, radios).
  • Componentes HTML+CSS listos para copiar o importar.
  • Guía de uso con Bricks y Tailwind.
  • Changelog y versionado semántico.

Licencia

MIT. Úsalo en proyectos personales, clientes, SaaS. Sin atribución obligatoria.

Empieza

Instalar FDS →

Next
Filosofía