DocumentationConceptionSystè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 couleur — déduite de votre description ("rustique chaleureux" → ambre/marron ; "cinématique sombre" → bleu marine profond avec des accents sarcelle)
•Ambiance typographique — adaptée à la voix de la marque ("éditorial" → serif ; "startup tech" → sans géométrique)

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

Ambiance des Thèmes

AmbianceCouleursTypographieAdapté pour
Cinématique SombreBleu marine profond, noir, sarcelleSans à espacement largeTech, SaaS, divertissement
Rustique ChaleureuxAmbre, marron, blanc casséSerif lâcheAlimentation, hôtellerie, artisanat
Minimal PropreBlanc, gris clair, noirSans géométriquePortfolio, services professionnels
Vif et AudacieuxPrimaires à haute saturationAffichage lourdMode, marques grand public
Luxe SombreNoir, or, crèmeSerif finBiens et services haut de gamme
Nature OrganiqueVert forêt, tons terreSans 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;            /* 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;
}

Pour changer les couleurs, modifiez-les dans l'onglet Code ou utilisez le chat : "Changer --accent en #FF6B35".

Typographie

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

•Titre principal (Hero) — clamp(2.5rem, 6vw, 5rem) — s'adapte du mobile au grand écran
•Titres de section — clamp(1.75rem, 3.5vw, 2.5rem)
•Texte courant — 1rem (16px) avec une hauteur de ligne de 1.6
•Légende — 0.875rem (14px)

Les polices sont chargées 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 et modèles