Designsystem

Wie Draftly einzigartige Designsysteme generiert – Themes, CSS-Variablen und Typografie.

Wie Design generiert wird

Draftly wendet keine feste Vorlage an – es generiert ein einzigartiges Designsystem aus Ihrem Prompt. Die Planungsphase extrahiert zwei Schlüsselsignale:

•Farb-Stimmung — abgeleitet aus Ihrer Beschreibung ("warm rustikal" → Bernstein/Braun; "dunkel filmisch" → tiefes Marineblau mit Türkis-Akzenten)

•Schrift-Stimmung — passend zur Markenstimme ("redaktionell" → Serif; "Tech-Startup" → geometrische Sans)

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

Theme-Stimmungen

Stimmung	Farben	Typografie	Geeignet für
Dunkel Filmisch	Tiefes Marineblau, Schwarz, Türkis	Breitlaufende Sans	Tech, SaaS, Unterhaltung
Warm Rustikal	Bernstein, Braun, Cremeweiß	Lockere Serif	Essen, Gastgewerbe, Handwerk
Sauber Minimal	Weiß, Hellgrau, Schwarz	Geometrische Sans	Portfolio, professionelle Dienstleistungen
Lebendig Kräftig	Hochgesättigte Primärfarben	Kräftige Display	Mode, Konsumgütermarken
Luxuriös Dunkel	Schwarz, Gold, Creme	Dünne Serif	Hochwertige Waren und Dienstleistungen
Natur Organisch	Waldgrün, Erdtöne	Humanistische Sans	Wellness, Nachhaltigkeit

Benutzerdefinierte CSS-Eigenschaften

Alle generierten Websites verwenden einen Standardsatz von CSS-Variablen:

css

:root {
  --bg: #0a0a0f;            /* Seitenhintergrund */
  --surface: #111118;       /* Karten- / Oberflächenhintergrund */
  --accent: #3B82F6;        /* Primäre 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); /* Ränder */
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

Um Farben zu ändern, bearbeiten Sie diese im Code-Tab oder verwenden Sie den Chat: „Ändern Sie --accent zu #FF6B35“.

Typografie

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

•Hero-Überschrift — clamp(2.5rem, 6vw, 5rem) — skaliert von Mobilgeräten bis zu großen Desktops

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

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

•Bildunterschrift — 0.875rem (14px)

Schriftarten werden über Google Fonts geladen. Häufige Paare, generiert nach Stimmung: - Inter + Inter — sauber, universell, die meisten SaaS - Playfair Display + Lato — redaktionell, luxuriös, Restaurants - Space Grotesk + DM Sans — Tech, geometrisch, Startups - Cormorant Garamond + Karla — raffiniert, High-End-Dienstleistungen

ZurückVeröffentlichen WeiterVoreinstellungen & Vorlagen