DocumentaciónDiseñ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, sino que genera un sistema de diseño único a partir de su prompt. La fase de planificación extrae dos señales clave:

•Estado de ánimo del color — inferido de su descripción ("rústico cálido" → ámbar/marrón; "cinemático oscuro" → azul marino profundo con acentos verde azulado)
•Estado de ánimo de la fuente — adaptado a la voz de la marca ("editorial" → serif; "startup tecnológica" → sans geométrica)

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

Estados de Ánimo de los Temas

Estado de ánimoColoresTipografíaAdecuado para
Cinemático OscuroAzul marino profundo, negro, verde azuladoSans de pista anchaTecnología, SaaS, entretenimiento
Rústico CálidoÁmbar, marrón, blanco rotoSerif sueltaAlimentación, hostelería, artesanía
Minimalista LimpioBlanco, gris claro, negroSans geométricaPortafolio, servicios profesionales
Vibrante y AudazPrimarios de alta saturaciónDisplay pesadaModa, marcas de consumo
Lujo OscuroNegro, oro, cremaSerif finaBienes y servicios de alta gama
Naturaleza OrgánicaVerde bosque, tonos tierraSans humanistaBienestar, sostenibilidad

Propiedades Personalizadas de CSS

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

css
:root {
  --bg: #0a0a0f;            /* Page background */
  --surface: #111118;       /* Card / surface background */
  --accent: #3B82F6;        /* Primary accent / CTA color */
  --accent-2: #6366F1;      /* Secondary accent */
  --text: #E5E7EB;          /* Body text */
  --text-muted: #6B7280;    /* Secondary / muted text */
  --heading: #FFFFFF;       /* Headings */
  --border: rgba(255,255,255,0.08); /* Borders */
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

Para cambiar los colores, edítelos en la pestaña Código o use el chat: "Cambiar --accent a #FF6B35".

Tipografía

Draftly genera tipografía fluida y responsiva utilizando clamp() de CSS para un escalado sin interrupciones:

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

Las fuentes se cargan a través de 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ónSiguientePreajustes y plantillas