Design System v1.0 — Generado con CULTIVA IA

Leafo Design System

Sistema completo de design tokens para la plataforma SaaS de gestión de campañas de marketing. Listo para handoff a desarrollo.

#2D6A4FColor primario
Estilo ModernInter · 8pt grid · r8px
WCAG AAContraste verificado
CSS · SCSS · JSONExports listos

Categoría 01

Paleta de Colores

Primary
50
100
200
300
400
500
DEFAULT
600
700
800
900
Secondary
50
100
200
300
400
500
DEFAULT
600
700
800
900
Neutral
50
100
200
300
400
500
600
700
800
900
950
Colores Semánticos
Success
#10B981 · light: #34D399 · dark: #059669
Warning
#F59E0B · light: #FBBD24 · dark: #D97706
Error
#EF4444 · light: #F87171 · dark: #DC2626
Info
#3B82F6 · light: #60A5FA · dark: #2563EB

Categoría 02

Escala Tipográfica · Ratio 1.25×

H1 / 5xl
48px · w700 · lh1.2
Leafo Platform
H2 / 4xl
36px · w700 · lh1.3
Campaign Analytics
H3 / 3xl
28px · w600 · lh1.4
Marketing Dashboard
H4 / 2xl
24px · w600 · lh1.4
Gestión de Activos
H5 / xl
20px · w600 · lh1.5
Planificación de Campañas
Body / base
16px · w400 · lh1.5
Leafo ayuda a tu equipo de marketing a planificar campañas, gestionar activos digitales y medir resultados desde un único panel centralizado.
Small / sm
13px · w400 · lh1.5
Última actualización: hace 2 minutos · 24 campañas activas · 3 pendientes de revisión
Caption / xs
10px · w400 · lh1.5
FUENTE: GOOGLE ANALYTICS 4 · EXPORTADO EL 12 JUN 2026
Mono
Fira Code · 14px
--color-primary: #2D6A4F; → ROI: +247% · CTR: 3.8%
Sans-Serif
Inter
system-ui, -apple-system
Serif
Merriweather
Georgia, serif
Monospace
Fira Code
Monaco, monospace

Categoría 03

Sistema de Espaciado · Grid 8pt

xs / 1
4px
sm / 2
8px
3
12px
md / 4
16px
5
20px
lg / 6
24px
7
32px
xl / 8
40px
9
48px
2xl / 11
64px
3xl / 16
128px

Categoría 04

Border Radius

none
0px
sm
4px
DEFAULT
8px
md
12px
lg
16px
full
9999px

Categoría 05

Sombras

none
none
sm
y1 blur2 5%
DEFAULT
y1 blur3 10%
md
y4 blur6 10%
lg
y10 blur15 10%
2xl
y25 blur50 25%

Categoría 06

Librería de Componentes

Botones
Badges & Estados
Activa En revisión Pausada Programada Borrador
+24% CTR ROI: 147% -8% Conv. A/B Test
Formularios
Usa un nombre descriptivo para identificarla fácilmente
✓ Email verificado correctamente
Introduce un importe numérico válido (ej. 5000)
Cards de Métricas
📊
Campañas activas
Campañas en ejecución este mes en todos los canales.
24
+3 vs. mes anterior
💰
ROI Medio
Retorno sobre inversión promedio de todas las campañas.
247%
+18pp vs. Q2
🎯
CTR Global
Tasa de clics media en campañas display y email.
3.8%
Objetivo: 3.5% ✓
⚡
Activos digitales
Imágenes, vídeos y copies gestionados en la plataforma.
1.842
128 subidos esta semana

Categoría 07

Verificación de Accesibilidad WCAG AA

Texto grande
Texto normal de cuerpo
Texto pequeño de caption
#2D6A4F → #FFFFFF
Ratio: 7.12:1
AA AAA
Texto grande
Texto en blanco con color primario
Caption sobre fondo blanco
#FFFFFF → #2D6A4F
Ratio: 7.12:1
AA AAA
Texto grande
Texto cuerpo sobre fondo oscuro
Caption modo dark
#111827 → #FFFFFF
Ratio: 18.3:1
AA AAA
Texto grande
Texto primario sobre primary-50
Fondo tenue de tarjetas
#c3f2dd → #2D6A4F
Ratio: 4.8:1
AA AAA
Texto grande
Body text on neutral-50 bg
Uso en paneles laterales
#F9FAFB → #374151
Ratio: 9.4:1
AA AAA
Success Message
Campaña publicada correctamente
Toast / Alert de éxito
#10B981 → #FFFFFF
Ratio: 3.0:1
AA lg AA sm

Categoría 08

Tokens de Animación

instant
0ms
fast
150ms
default
250ms
slow
350ms
slower
500ms
linear — linear
easeOut — ease-out
spring — cubic-bezier(0.68, -0.55, 0.265, 1.55)

Categoría 09

Breakpoints Responsivos

xs
480px Teléfonos grandes
sm
640px Tablets portrait
md
768px Tablets landscape
lg
1024px Laptops pequeños
xl
1280px Escritorios
2xl
1536px Pantallas grandes
Tipografía Fluid
--fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem);
--fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem);
--fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
--fluid-body: clamp(1rem, .95rem + .2vw, 1.125rem);

Categoría 10

Sistema de Capas Z-Index

-1hide
0base
1000dropdown
1020sticky
1030overlay
1040modal
1050popover
1060tooltip
1070notification

Categoría 11

Exports para Desarrollo

CSS Custom Properties
/* leafo-tokens.css */ :root { --color-primary: #2D6A4F; --color-primary-50: #c3f2dd; --color-primary-900: #08150f; --font-sans: Inter, system-ui; --font-size-base: 16px; --space-4: 16px; --radius: 8px; --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10); }
JSON — Figma Tokens Studio
{ "colors": { "primary": { "DEFAULT": "#2D6A4F", "50": "#c3f2dd", "500": "#3f6a57" } }, "typography": { "fontFamily": { "sans": "Inter" } } }
Tailwind Config · JS
// tailwind.config.js const tokens = require('./leafo-tokens.json'); module.exports = { theme: { colors: tokens.colors, fontFamily: tokens.typography .fontFamily, spacing: tokens.spacing, borderRadius: tokens.borders.radius } };