Warm Human Design System for AI Websites

Break free from generic AI website templates with this complete design system that replaces purple gradients and Inter fonts with warm, human-centered aesthetics.

🤖 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 unique, non-generic websites with AI by providing a specific design system that overrides default template patterns.

How to use it

1. Paste the design system prompt before your website building request
2. Add your specific request (e.g., 'build a booking page for a massage therapist')
3. Run the audit prompt afterward to catch any remaining generic elements

Curated from the community via Reddit.