Telling a designer you want something minimal and warm can lead to ten different results. A written website design brief narrows that down. Website Design Brief turns your preferences and audience into a concrete direction, with colors, fonts, layout and imagery written out, so the conversation starts from decisions rather than adjectives.
The brief opens with a short summary and three to five defining adjectives, then sets out the palette, the typography, the layout, the imagery and components, and three things to avoid for your audience. Body text colors are paired with backgrounds aiming for WCAG AA contrast, at least 4.5 to 1.
It differs from UX Improvement Ideas, which starts from problems on an existing site. Both belong to the Website copy family.
What you get
- Five or six colors in hex with their role, built around any brand colors you give
- The text and background pairs to use for readable text
- A heading and body font pairing from Google Fonts, with desktop and mobile sizes
- Home page section order, navigation, grid, spacing and mobile notes
- Guidance on imagery, icons, buttons, cards and forms
What you fill in
- Website name and purpose required
-
The name and what the site is for, such as a portfolio, a shop or a booking site.
- Style preferences and audience required
-
Mention brand colors or a logo you already have, sites you like and what you want to avoid.
How to use it, step by step
-
Name the site and its purpose
For example Studio Rossi, portfolio of an architecture firm. A portfolio, a shop and a booking site need different layouts.
-
Describe style, audience and limits
Give the look you want, who visits and what to avoid. Add brand colors as hex codes and sites you like, with the reason.
-
Choose the language and generate
The brief comes in Markdown with one heading per part, ready to paste into a document.
-
Check before building
Test the text pairs in a contrast checker and preview the fonts at the suggested sizes, then hand the brief over or apply it in your builder.
Example, input and output
Input
- website_name
- Studio Rossi, portfolio of an architecture firm
- design_preferences
- Minimal and warm, plenty of white space, natural materials, for private clients aged 35 to 60. No dark themes.
Output
A calm, material-led portfolio that lets the projects speak. Minimal, warm, precise, quiet, tactile.
## Color palette
- Background #FAF8F5, warm off-white
- Text #2B2826, warm near-black
- Primary #7D634C, oak brown for links and buttons
- Accent #C9B8A6, sand for section backgrounds
- Borders #E4DED7, light stone
Body text #2B2826 on #FAF8F5, white text on #7D634C buttons.
## Typography
Headings in Cormorant Garamond, 48 px desktop, 32 px mobile. Body in Inter, 18 px desktop, 16 px mobile.
## Layout
Full-width project image, studio statement, project grid, approach, contact. Four-item top navigation, full-screen menu on mobile.
## Avoid
- Dark themes
- Busy animations
- Small light-gray text
Illustrative example written by the editorial team, shortened for the page.
Tips for better results
- Give brand colors as hex codes. The palette is built around them instead of replacing them.
- Say why you like a site. Plenty of white space is more useful than a link alone.
- State what to avoid. A clear no removes whole directions at once.
Who uses it, and for what
Owner hiring a freelancer
Arrive at the first meeting with a written direction, so the quote and first draft share the same expectations.
Freelance designer at kickoff
Turn the client's notes into a starting brief to correct together.
Owner building the site alone
Apply the palette, fonts and section order directly in your site builder's theme settings.
Agency pitching a redesign
Ask for two results to present two clearly different directions.
Limits and good practice
- The tool writes a brief, not a mockup. It produces no images, design files or code.
- Hex codes are suggestions. Verify every text pair with a contrast checker before launch.
- Each brief uses credits from your plan, and asking for two directions produces twice the text. Compare plans on the pricing page or create an account.
Frequently asked questions
What does a website design brief include?
A summary of the direction with defining adjectives, a hex palette with roles, a heading and body font pairing with sizes, the home page section order and navigation, guidance on imagery and components, and three things to avoid. Each part has its own heading.
Are the color combinations accessible?
The tool pairs body text and backgrounds aiming for WCAG AA, which means at least 4.5 to 1 for normal text, and says which pairs to use. Treat the codes as a proposal and check every pair with a contrast checker before launch.
Can I keep my existing brand colors?
Yes. Write them in the preferences, ideally as hex codes, and the palette is built around them. The tool adds supporting colors for background, text, accents and borders, and says which combinations are safe for body text and which only for large headings or decoration.
Which fonts does it suggest?
A heading font and a body font available on Google Fonts, chosen for the style and audience you describe, with sizes for desktop and mobile. Google Fonts work in most site builders and in custom code, but confirm the weights you need are available before you build.
How is this different from UX Improvement Ideas?
The design brief starts from your preferences and defines how a new or refreshed site should look. UX Improvement Ideas starts from problems on an existing site and ranks fixes by impact and effort. Many projects use the brief first and the fixes after launch.
Try it in your workspace
Start free, no credit card needed. When you need more, one suite grows with you, from Lite to Agency.
Sign in or create a free account, the tool opens in your workspace.