DocsDesignSystème de design

Système de design

Comment Draftly génère des systèmes de design uniques — thèmes, variables CSS et typographie.

Comment le design est généré

Draftly n'applique pas de modèle fixe — il génère un système de design unique à partir de votre prompt. La phase de planification extrait deux signaux clés :

•Ambiance colorée — déduite de votre description ("chaleureux rustique" → ambre/brun ; "sombre cinématique" → bleu marine profond avec accents teal)
•Ambiance typographique — accordée au ton de la marque ("éditorial" → serif ; "startup tech" → sans géométrique)

Ceux-ci deviennent des propriétés CSS personnalisées appliquées sur l'ensemble du site. Le résultat est une identité visuelle cohérente, pas un thème générique.

Ambiances de thèmes

AmbianceCouleursTypographieAdapté à
Sombre CinématiqueBleu marine profond, noir, tealSans à large chasseTech, SaaS, divertissement
Chaleureux RustiqueAmbre, brun, blanc casséSerif soupleRestauration, hôtellerie, artisanat
Propre MinimalBlanc, gris clair, noirSans géométriquePortfolio, services professionnels
Vibrant AudacieuxPrimaires haute saturationDisplay lourdMode, marques grand public
Luxe SombreNoir, or, crèmeSerif finProduits et services haut de gamme
Nature OrganiqueVert forêt, tons terreuxSans humanisteBien-être, durabilité

Propriétés CSS personnalisées

Tous les sites générés utilisent un ensemble standard de variables CSS :

css
:root {
  --bg: #0a0a0f;            /* Fond de page */
  --surface: #111118;       /* Fond de carte / surface */
  --accent: #3B82F6;        /* Accent principal / couleur CTA */
  --accent-2: #6366F1;      /* Accent secondaire */
  --text: #E5E7EB;          /* Texte de corps */
  --text-muted: #6B7280;    /* Texte secondaire / atténué */
  --heading: #FFFFFF;       /* Titres */
  --border: rgba(255,255,255,0.08); /* Bordures */
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

Pour modifier les couleurs, éditez-les dans l'onglet Code ou utilisez le chat : "Changez --accent en #FF6B35".

Typographie

Draftly génère une typographie fluide et responsive en utilisant CSS clamp() pour une mise à l'échelle transparente :

•Titre hero — clamp(2.5rem, 6vw, 5rem) — s'adapte du mobile au grand bureau
•Titres de sections — clamp(1.75rem, 3.5vw, 2.5rem)
•Texte de corps — 1rem (16px) avec hauteur de ligne 1.6
•Légende — 0.875rem (14px)

Les polices se chargent via Google Fonts. Paires courantes générées par ambiance : - Inter + Inter — propre, universel, la plupart des SaaS - Playfair Display + Lato — éditorial, luxe, restaurants - Space Grotesk + DM Sans — tech, géométrique, startups - Cormorant Garamond + Karla — raffiné, services haut de gamme

PrécédentPublicationSuivantPréréglages & Modèles