DocsDesignSistema de Design

Sistema de Design

Como o Draftly gera sistemas de design únicos — temas, variáveis CSS e tipografia.

Como o Design É Gerado

O Draftly não aplica um template fixo — ele gera um sistema de design único a partir do seu prompt. A fase de planejamento extrai dois sinais-chave:

•Humor de cores — inferido da sua descrição ("quente e rústico" → âmbar/marrom; "cinematográfico escuro" → azul marinho profundo com detalhes teal)
•Humor tipográfico — combinado com a voz da marca ("editorial" → serif; "startup de tecnologia" → sans geométrico)

Isso se torna propriedades CSS personalizadas aplicadas em todo o site. O resultado é uma identidade visual coerente, não um tema genérico.

Humores de Tema

HumorCoresTipografiaAdequado Para
Cinematográfico EscuroAzul marinho profundo, preto, tealSans de traço largoTecnologia, SaaS, entretenimento
Rústico QuenteÂmbar, marrom, off-whiteSerif soltoAlimentação, hospitalidade, artesanato
Minimalista LimpoBranco, cinza claro, pretoSans geométricoPortfólio, serviços profissionais
Ousado VibrantePrimárias de alta saturaçãoDisplay pesadoModa, marcas de consumo
Luxo EscuroPreto, dourado, cremeSerif finoProdutos e serviços de alto padrão
Orgânico NaturalVerde floresta, tons terrososSans humanistaBem-estar, sustentabilidade

Propriedades CSS Personalizadas

Todos os sites gerados usam um conjunto padrão de variáveis CSS:

css
:root {
  --bg: #0a0a0f;            /* Fundo da página */
  --surface: #111118;       /* Fundo do card / superfície */
  --accent: #3B82F6;        /* Cor de destaque principal / CTA */
  --accent-2: #6366F1;      /* Destaque secundário */
  --text: #E5E7EB;          /* Texto do corpo */
  --text-muted: #6B7280;    /* Texto secundário / suave */
  --heading: #FFFFFF;       /* Títulos */
  --border: rgba(255,255,255,0.08); /* Bordas */
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

Para mudar as cores, edite-as na aba Código ou use o chat: "Mude --accent para #FF6B35".

Tipografia

O Draftly gera tipografia fluida e responsiva usando CSS clamp() para escalonamento contínuo:

•Título do hero — clamp(2.5rem, 6vw, 5rem) — escala de mobile a desktop grande
•Títulos de seção — clamp(1.75rem, 3.5vw, 2.5rem)
•Texto do corpo — 1rem (16px) com altura de linha 1.6
•Legenda — 0.875rem (14px)

As fontes são carregadas via Google Fonts. Pares comuns gerados por humor: - Inter + Inter — limpo, universal, a maioria de SaaS - Playfair Display + Lato — editorial, luxo, restaurantes - Space Grotesk + DM Sans — tecnologia, geométrico, startups - Cormorant Garamond + Karla — refinado, serviços de alto padrão

AnteriorPublicaçãoPróximoPresets e Templates