AI Prompts for Website Design
I’m building a website for [business or purpose, described specifically] with a [brand personality, e.g. "professional but approachable"] feel. Give me: a primary and accent color palette in hex codes, a heading and body font pairing with reasoning, and a spacing scale for consistent layout throughout the site.
A usable design system needs actual hex codes, a specific font pairing, and a defined spacing scale — not vague color adjectives — since “a nice color scheme” produces nothing you can directly hand to a developer or implement in code.
What this produces
A concrete design system: a primary and accent color palette in hex codes, a heading/body font pairing with reasoning, and a consistent spacing scale — ready to implement directly, not general design advice.
Variations
Two ready-to-copy versions for different brand personalities.
I’m building a website for [business/purpose, described specifically] with a [brand personality, e.g. “professional but approachable”] feel. Give me: a primary and accent color palette in hex codes, a heading and body font pairing with reasoning, and a spacing scale (in rem or px) for consistent layout spacing.
Give me a color palette in hex codes for a [brand personality, e.g. “minimal and modern” or “warm and playful”] website for [business type, described specifically]. Include a primary color, an accent color, and neutral tones for text and backgrounds, with brief reasoning for each choice.
If this is useful, you may also want AI Prompt for Expert Web Design or Good AI Prompts for Work.
FAQ
Can I get this as actual CSS variables?
Yes — ask explicitly for the output formatted as CSS custom properties (e.g. “–color-primary: #…”) once you have the palette, so it’s directly pasteable into a stylesheet.
How is this different from a general web design prompt?
This produces the concrete building blocks — colors, fonts, spacing values — rather than layout structure and UX reasoning; use both together for a complete direction.
What if I already have a logo or brand colors?
Paste your existing colors or describe your logo, and ask for an accent palette and font pairing that complements what you already have rather than replacing it.
