Sistema de Diseño Refined

01 — Foundations

Design Tokens

Primary & Accent

primary

#1A1A2E

primary-hover

#16213E

primary-subtle

#F0EFF8

accent

#7C6D9A

accent-light

#E8E4F3

Semantic

success

#16A34A

warning

#D97706

danger

#DC2626

Surface & Text

surface

#FFFFFF

surface-alt

#FAFAF9

surface-raised

#F5F4F0

text

#111827

text-secondary

#4B4B5E

text-muted

#9B9BAA

Type Scale — Playfair Display (serif) + Inter (sans) + JetBrains Mono

--text-4xl

56px / Playfair Display 400

La elegancia

--text-3xl

40px / Playfair Display 500

Precisión y forma

--text-2xl

32px / Playfair Display 600

Sistema de Diseño

--text-xl

24px / Inter 400

Herramientas de inteligencia artificial

--text-base

16px / Inter 400, line-height 1.6

El texto de cuerpo usa Inter a 16px con interlineado 1.6 para máxima legibilidad en párrafos largos.

--text-sm (mono)

14px / JetBrains Mono

const token = 'refined-v1';

Spacing Scale — base 4px

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

--space-16 · 64px

02 — Components

Componentes Principales

Navegación principal

CULTIVA IA

Altura fija 60px · fondo blanco · sombra XS · logo Playfair Display · links Inter 400

Button — variantes y tamaños

Todos los botones: focus-visible con outline 2px accent · transición 200ms ease-refined · letra 500

IA

Automatización

Agentes de contenido para tu marca

Genera artículos, newsletters y guiones de vídeo con el tono exacto de tu marca, sin supervisión constante.

Branding-Diseno · 2026 Disponible

SEO

Marketing Digital

Estrategia SEO programática

Análisis de intención de búsqueda y generación masiva de contenido semántico indexable en 48 h.

Marketing · 2026 Beta

Datos & Reporting

Dashboard de KPIs en tiempo real

Conecta tus fuentes y visualiza el rendimiento de campañas con alertas automáticas vía Slack.

Analytics · 2026 Próximamente

Form Inputs — estados

Nombre de la empresa *

Email de contacto

Email verificado correctamente.

Servicio de interés

⚠ Selecciona un servicio válido de la lista.

Mensaje (desactivado)

Completa los campos anteriores para habilitar.

Badges — semántica y estado

Nuevo Destacado Activo Pendiente Error Archivado Publicado

Padding 3px 12px · border-radius full · font-size 12px · badge-dot usa ::before con background: currentColor

ℹ

Actualización disponible

El módulo de automatización v2.1 incluye integración directa con HubSpot y Notion.

✓

Campaña publicada

Tu secuencia de email marketing ha sido enviada a 1.240 contactos correctamente.

⚠

Límite de API próximo

Has consumido el 84% del plan mensual. Considera actualizar antes del día 20.

✕

Error de autenticación

Las credenciales de Google Analytics han expirado. Reconecta la integración.

03 — Reference

Tabla de Tokens CSS

variables CSS — extracción lista para código

Token	Valor	Uso
--color-primary	`#1A1A2E`	Fondo header, botón primario, texto navbar activo
--color-accent	`#7C6D9A`	Highlights, overlines, nombres de tokens, focus ring
--color-success	`#16A34A`	Confirmaciones, inputs válidos, badges activos
--color-warning	`#D97706`	Alertas no críticas, badges beta
--color-danger	`#DC2626`	Errores, validaciones fallidas, acciones destructivas
--font-serif	`Playfair Display`	Headings h1–h3, logo, display blocks
--font-sans	`Inter`	Cuerpo, UI labels, botones, inputs
--font-mono	`JetBrains Mono`	Código, tokens, metadatos técnicos
--shadow-sm	`0 1px 4px …`	Cards en reposo, navbars
--shadow-md	`0 4px 16px …`	Cards en hover, modales, dropdowns
--duration-base	`200ms`	Transiciones estándar de componentes
--ease-refined	`cubic-bezier(…)`	Curva de easing para todas las animaciones

04 — Accessibility

Requisitos WCAG 2.2 AA

Ratios de contraste mínimos

PASS 14.5:1 #111827 sobre blanco

PASS 10.2:1 #1A1A2E sobre blanco

PASS 5.8:1 #7C6D9A sobre blanco

FAIL 2.1:1 #9B9BAA sobre blanco — solo decorativo

Interacción teclado — must

✓ Todos los elementos interactivos son alcanzables por Tab
✓ :focus-visible obligatorio: outline 2px accent + offset 2px
✓ Botones activables con Enter y Space
✓ Modales y dropdowns cierran con Escape
✓ Menús de navegación usan role="navigation" + aria-labels
✗ Nunca usar outline: 0 sin alternativa visible

05 — Anti-Patterns

Prohibiciones Explícitas

✕ No hacer

Usar valores de color hardcoded — siempre usar token CSS
Mezclar Playfair Display con otra serif sin razón justificada
Usar sombras en elementos inline o texto
Espaciado fuera de la escala 4px (ej. 15px, 22px)
Botones sin estado :focus-visible
Texto muted (#9B9BAA) como contenido semántico principal
Bordes radius distintos a los tokens definidos
Animaciones >350ms sin preferencia prefers-reduced-motion

✓ Siempre hacer

Referenciar tokens antes de componentes en cada PR
Usar font-display: swap en Google Fonts
Testear con VoiceOver/NVDA antes de merge
Preferir tokens semánticos sobre tokens primitivos
Documentar trade-offs cuando un componente tiene variantes
Incluir estado disabled, loading y error en todo form control
Respetar jerarquía h1>h2>h3 sin saltar niveles
Mantener el cursor pointer solo en elementos clicables

06 — Quality Gates

Checklist de QA

Ejecutar en cada code-review de componente nuevo

✓
Tokens CSS: Ningún valor de color, tipografía ni spacing hardcodeado. Todos usan variables CSS del sistema.
✓
Contraste: Texto sobre fondo supera ratio 4.5:1 (normal) o 3:1 (grande). Verificado con herramienta automatizada.
✓
Focus visible: Cada elemento interactivo muestra outline 2px accent con offset 2px al navegar con teclado.
✓
Estados completos: default, hover, focus, active, disabled (y loading/error para form controls).
Responsive: Componente revisado en 375px, 768px y 1280px. Sin overflow horizontal en ningún breakpoint.
Reduced motion: Animaciones envueltas en @media (prefers-reduced-motion: reduce) con fallback instantáneo.
Semántica HTML: Roles ARIA correctos, landmarks usados, no div-soup en zonas críticas de navegación.
Longtext: Labels de 60+ caracteres, campos vacíos y overflow probados sin ruptura de layout.
✓
Fuentes: Playfair Display en headings, Inter en UI/body, JetBrains Mono en código/tokens. Sin mezclas.
✓
Sombras: Usar sólo --shadow-xs/sm/md/lg. No box-shadow custom. No sombras en elementos inline.