DocsDiseñoSistema de Diseño

Sistema de Diseño

Cómo Draftly genera sistemas de diseño únicos — temas, variables CSS y tipografía.

Cómo Se Genera el Diseño

Draftly no aplica una plantilla fija — genera un sistema de diseño único a partir de tu prompt. La fase de planificación extrae dos señales clave:

•Estado de ánimo de color — inferido de tu descripción ("rústico cálido" → ámbar/marrón; "cinematográfico oscuro" → azul marino profundo con acentos turquesa)
•Estado de ánimo tipográfico — emparejado con la voz de marca ("editorial" → serif; "startup tecnológica" → sans geométrico)

Estos se convierten en propiedades CSS personalizadas aplicadas en todo el sitio. El resultado es una identidad visual coherente, no un tema genérico.

Estados de Ánimo de Tema

Estado de ÁnimoColoresTipografíaAdecuado Para
Cinematográfico OscuroAzul marino profundo, negro, turquesaSans de trazo anchoTecnología, SaaS, entretenimiento
Rústico CálidoÁmbar, marrón, blanco rotoSerif sueltoComida, hospitalidad, artesanía
Mínimo LimpioBlanco, gris claro, negroSans geométricoPortafolio, servicios profesionales
Negrita VibrantePrimarios de alta saturaciónDisplay pesadoModa, marcas de consumo
Lujo OscuroNegro, dorado, cremaSerif delgadoBienes y servicios de alta gama
Orgánico NaturalVerde bosque, tonos tierraSans humanistaBienestar, sostenibilidad

Propiedades CSS Personalizadas

Todos los sitios generados usan un conjunto estándar de variables CSS:

css
:root {
  --bg: #0a0a0f;            /* Fondo de página */
  --surface: #111118;       /* Fondo de tarjeta / superficie */
  --accent: #3B82F6;        /* Color de acento primario / CTA */
  --accent-2: #6366F1;      /* Acento secundario */
  --text: #E5E7EB;          /* Texto del cuerpo */
  --text-muted: #6B7280;    /* Texto secundario / silenciado */
  --heading: #FFFFFF;       /* Encabezados */
  --border: rgba(255,255,255,0.08); /* Bordes */
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

Para cambiar colores, edita estos en la pestaña de Código o usa el chat: "Cambia --accent a #FF6B35".

Tipografía

Draftly genera tipografía fluida y responsive usando CSS clamp() para una escala perfecta:

•Titular hero — clamp(2.5rem, 6vw, 5rem) — escala desde móvil hasta escritorio grande
•Encabezados de sección — clamp(1.75rem, 3.5vw, 2.5rem)
•Texto del cuerpo — 1rem (16px) con altura de línea 1.6
•Leyenda — 0.875rem (14px)

Las fuentes se cargan vía Google Fonts. Pares comunes generados por estado de ánimo: - Inter + Inter — limpio, universal, la mayoría de SaaS - Playfair Display + Lato — editorial, lujo, restaurantes - Space Grotesk + DM Sans — tecnología, geométrico, startups - Cormorant Garamond + Karla — refinado, servicios de alta gama

AnteriorPublicaciónSiguientePresets y Plantillas