DocumentaçãoDesignSistema 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 cor — inferido da sua descrição ("rústico quente" → âmbar/marrom; "cinemático escuro" → azul marinho profundo com detalhes em verde-azulado)
•Humor de fonte — correspondente à voz da marca ("editorial" → serif; "startup de tecnologia" → sans geométrica)

Estas se tornam 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
Cinemático EscuroAzul marinho profundo, preto, verde-azuladoSans com espaçamento amploTecnologia, SaaS, entretenimento
Rústico QuenteÂmbar, marrom, branco-sujoSerif soltaAlimentação, hotelaria, artesanato
Minimalista LimpoBranco, cinza claro, pretoSans geométricaPortfólio, serviços profissionais
Vibrante e OusadoPrimárias de alta saturaçãoDisplay pesadoModa, marcas de consumo
Luxo EscuroPreto, dourado, cremeSerif finaBens e serviços de alto padrão
Natureza OrgânicaVerde floresta, tons terrososSans humanistaBem-estar, sustentabilidade

Propriedades Personalizadas CSS

Todos os sites gerados usam um conjunto padrão de variáveis 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 mudar as cores, edite-as na aba Código ou use o chat: "Mudar --accent para #FF6B35".

Tipografia

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

•Título principal — clamp(2.5rem, 6vw, 5rem) — escala de dispositivos móveis para desktops grandes
•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)

Fontes carregam via Google Fonts. Pares comuns gerados por humor: - Inter + Inter — limpo, universal, a maioria dos 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óximoPredefinições e Modelos