DocsDesignDesign System

Design System

How Draftly generates unique design systems — themes, CSS variables, and typography.

How Design Is Generated

Draftly doesn't apply a fixed template — it generates a unique design system from your prompt. The planning phase extracts two key signals:

•Color mood — inferred from your description ("warm rustic" → amber/brown; "dark cinematic" → deep navy with teal accents)

•Font mood — matched to brand voice ("editorial" → serif; "tech startup" → geometric sans)

These become CSS custom properties applied across the entire site. The result is a coherent visual identity, not a generic theme.

Theme Moods

Mood	Colors	Typography	Suited For
Dark Cinematic	Deep navy, black, teal	Wide-track sans	Tech, SaaS, entertainment
Warm Rustic	Amber, brown, off-white	Loose serif	Food, hospitality, craft
Clean Minimal	White, light gray, black	Geometric sans	Portfolio, professional services
Vibrant Bold	High-saturation primaries	Heavy display	Fashion, consumer brands
Luxury Dark	Black, gold, cream	Thin serif	High-end goods and services
Nature Organic	Forest green, earth tones	Humanist sans	Wellness, sustainability

CSS Custom Properties

All generated sites use a standard set of CSS variables:

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;
}

To change colors, edit these in the Code tab or use chat: "Change --accent to #FF6B35".

Typography

Draftly generates fluid, responsive typography using CSS clamp() for seamless scaling:

•Hero headline — clamp(2.5rem, 6vw, 5rem) — scales from mobile to large desktop

•Section headings — clamp(1.75rem, 3.5vw, 2.5rem)

•Body text — 1rem (16px) with 1.6 line height

•Caption — 0.875rem (14px)

Fonts load via Google Fonts. Common pairs generated by mood: - Inter + Inter — clean, universal, most SaaS - Playfair Display + Lato — editorial, luxury, restaurants - Space Grotesk + DM Sans — tech, geometric, startups - Cormorant Garamond + Karla — refined, high-end services

PreviousPublishing NextPresets & Templates