Warm human design system for AI websites

Replace generic AI website templates with this complete design system that creates warm, approachable, human-centered interfaces with specific colors, fonts, and components.

🤖 Works with: Any

The Prompt

Copy and paste — replace anything in [brackets].

Use this design system for everything you build. Follow it precisely. AESTHETIC: Soft, human, approachable, calm. Warm tones, gently rounded forms, welcoming, never clinical. COLOURS (use these exact values as CSS variables): - Background: #FBF7F2 (warm cream, never pure white) - Surface: #FFFFFF - Primary text: #3A342E (warm charcoal) - Secondary text: #8A8178 - Accent: #E07856 (warm coral) - Secondary accent: #7BA88F (soft sage green) - Border: #EDE6DD TYPOGRAPHY: - Headings: "Fraunces" (serif, from Google Fonts), weight 600 - Body: "Source Sans 3" (from Google Fonts) - Never use Inter, Roboto, or system fonts - Type scale: 14 / 15 / 16 / 22 / 56px, line height 1.7 SPACING: 4px base. Scale: 8 / 16 / 22 / 34 / 56px. Generous, never cramped. COMPONENTS: - Asymmetric hero: reassuring copy on one side, a functional card on the other, not centered - Rounded everything: cards, inputs, tags (12 to 24px radius) - Buttons: sage green pill for nav, solid coral for primary actions - Pill tags with a hairline border AVOID: purple, gradients, pure white backgrounds, sharp corners, cold greys, clinical blues, Inter font.

What it’s good for

Create warm, human-centered website designs that avoid generic AI templates with purple gradients and Inter font, perfect for service businesses, wellness brands, or any project needing approachable aesthetics.

How to use it

1. Paste the entire design system prompt before requesting website generation
2. Specify your project needs after the system (e.g., 'using the system above, build a booking page for a massage therapist')
3. The AI will apply the exact color values, fonts, spacing, and component rules to create a custom design

Curated from the community via Reddit.