DocsDesignDesign-System

Design-System

Wie Draftly einzigartige Design-Systeme generiert — Themen, CSS-Variablen und Typografie.

Wie Design generiert wird

Draftly wendet keine feste Vorlage an — es generiert ein einzigartiges Design-System aus Ihrem Prompt. Die Planungsphase extrahiert zwei Schlüsselsignale:

•Farbstimmung — aus Ihrer Beschreibung abgeleitet ("warmes Rustikales" → Bernstein/Braun; "dunkles Kinematisches" → tiefes Marine mit Türkis-Akzenten)

•Schriftstimmung — an die Markenstimme angepasst ("editorial" → Serifen; "Tech-Startup" → geometrisches Sans)

Diese werden zu CSS-benutzerdefinierten Eigenschaften, die auf der gesamten Website angewendet werden. Das Ergebnis ist eine kohärente visuelle Identität, kein generisches Thema.

Thema-Stimmungen

Stimmung	Farben	Typografie	Geeignet für
Dunkles Kinematisches	Tiefes Marine, Schwarz, Türkis	Weitstreckiges Sans	Tech, SaaS, Unterhaltung
Warmes Rustikales	Bernstein, Braun, Gebrochenes Weiß	Lockere Serifen	Essen, Gastgewerbe, Handwerk
Sauberes Minimales	Weiß, Hellgrau, Schwarz	Geometrisches Sans	Portfolio, professionelle Dienste
Lebhaftes Fett	Hochgesättigte Primärfarben	Schwere Schrift	Mode, Verbrauchermarken
Luxus Dunkel	Schwarz, Gold, Creme	Dünne Serifen	Hochwertige Güter und Dienste
Natur Organisch	Waldgrün, Erdtöne	Humanistisches Sans	Wellness, Nachhaltigkeit

CSS-Benutzerdefinierte Eigenschaften

Alle generierten Websites verwenden einen Standardsatz von CSS-Variablen:

css

:root {
  --bg: #0a0a0f;            /* Seitenhintergrund */
  --surface: #111118;       /* Karten- / Oberflächenhintergrund */
  --accent: #3B82F6;        /* Primärer Akzent / CTA-Farbe */
  --accent-2: #6366F1;      /* Sekundärer Akzent */
  --text: #E5E7EB;          /* Fließtext */
  --text-muted: #6B7280;    /* Sekundärer / gedämpfter Text */
  --heading: #FFFFFF;       /* Überschriften */
  --border: rgba(255,255,255,0.08); /* Rahmen */
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

Um Farben zu ändern, im Code-Tab bearbeiten oder Chat verwenden: "--accent auf #FF6B35 ändern".

Typografie

Draftly generiert flüssige, responsive Typografie mit CSS clamp() für nahtlose Skalierung:

•Hero-Überschrift — clamp(2.5rem, 6vw, 5rem) — skaliert von Mobil bis großem Desktop

•Abschnittsüberschriften — clamp(1.75rem, 3.5vw, 2.5rem)

•Fließtext — 1rem (16px) mit 1.6 Zeilenhöhe

•Beschriftung — 0.875rem (14px)

Schriftarten werden über Google Fonts geladen. Häufige nach Stimmung generierte Paare: - Inter + Inter — sauber, universell, die meisten SaaS - Playfair Display + Lato — editorial, Luxus, Restaurants - Space Grotesk + DM Sans — Tech, geometrisch, Startups - Cormorant Garamond + Karla — verfeinert, hochwertige Dienste

ZurückVeröffentlichen WeiterVorlagen & Templates