AI Website Design System Prompt

Stop AI-generated websites from looking identical with this paste-ready design system prompt that enforces warm, human-centered aesthetics instead of generic templates.

🤖 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

Generate unique, warm-toned website designs instead of generic AI templates with purple gradients and Inter font. Perfect for landing pages, business sites, or any web project needing a human touch.

How to use it

1. Copy the entire prompt text and paste it into your AI tool before making your request.
2. Add your specific instruction, e.g., 'using the system above, build a booking page for a massage therapist.'
3. Review and refine the output to ensure it follows all design system rules.

Curated from the community via Reddit.