Web design & AI
Mood Board: What It Is and How to Make One for Your Brand or Website
A tool-neutral method that works on paper or in any app, plus the part almost nobody covers: turning the board into a palette people can actually read on screen.
A mood board is a board of images, colors, fonts and textures that defines how your brand or website should look and feel before you design anything. You can make one in an afternoon: pick 3 to 5 brand words, collect references, cut down to 8 to 15 pieces and pull your color palette and fonts from what's left.
Most of what ranks on Google comes from Canva, Milanote or Figma showing you their own tool. This guide is tool-neutral and covers the part they skip: how to turn the board into a palette that passes contrast checks on screen, using the real Notablia brand palette as the case. It's the first step of any web design or branding project.
On this page
What Is a Mood Board and What Is It For
A mood board gets everyone picturing the same thing before design starts: you, your designer and your client, looking at one board.
A mood board is a visual board that brings together images, colors, typography, textures and words to set the style of a project before it's designed. It turns vague adjectives like modern or approachable into concrete references, so the team and the client make design decisions against the same standard.
What it's not: it isn't a decorative collage, a Pinterest board with 300 unsorted pins or your brand guidelines. The mood board comes first and sets the direction; the guidelines come later and set the rules. As the Nielsen Norman Group puts it in its UX guide, the point is to agree on visual style before prototyping.
What is the difference between a vision board and a mood board?
A vision board is personal and motivational: photos of goals you want to reach, like a house or a trip. A mood board is a working tool for a project: it defines how a brand, room or collection should feel so others can design from it. Same format, different job.
How to Make a Mood Board Step by Step
To make a mood board, write your brand words, collect references without judging, keep the best ones and pull colors and fonts from them.
-
Write the goal and 3 to 5 brand words
What the board is for (logo, website, store or photo shoot) and how your customer should feel. "Warm, handmade, neighborhood" filters better than "nice". NN/g recommends starting from 4 or 5 mood words.
-
Collect references without judging
Interiors, materials, type, packaging, websites and posters. Look outside your industry: a bakery can borrow from a pottery studio. If any photo will end up on your site, get it from free stock photos with a clear license, not from Google Images.
-
Cut down to 8 to 15 pieces
Remove anything that doesn't match your words or contradicts the rest. If you're torn between two directions, make two boards: mixing them makes both unreadable.
-
Arrange the board by hierarchy
One or two large anchor images, the rest around them and a strip with colors, fonts and words. Add a small not this corner with what your brand should never look like.
-
Pull the palette and the fonts
Use the eyedropper on colors that repeat, keep 3 to 5 and give each one a job. Choose one font for headings and one for body text.
-
Test it on someone outside the project
Show it to someone who doesn't know the brief and ask for three adjectives. If they match your words, the board works.
-
Turn it into written decisions
Write down HEX codes, fonts, photo style and what's off-limits. That sheet is the bridge between the digital mood board and the final design.
How many images should a mood board have?
Around 8 to 15 pieces in total, counting colors and fonts, is what reads best at a glance. Fewer than 6 gives no direction; more than 20 turns it back into a Pinterest board. Every AI tool gave us a different number, so we tested it.
What Should a Brand Mood Board Include?
A brand mood board has six blocks: brand words, anchor images, photo style, fonts, textures and colors, plus a not this corner.
- Brand words. 3 to 5, written on the board itself.
- One or two anchor images. The ones you'd show if you could only show one.
- Photo style. Light, framing, background and whether people appear.
- Fonts. With a sample sentence, not just the font name.
- Textures. Kraft paper, linen or brushed metal say a lot about your price point.
- Colors. Flat swatches with their codes.
If the board is for a logo, add references from the main types of logos so you decide early which family you want. And if you're a designer, keep every approved board: it explains your process better than anything when you learn how to make a portfolio that wins clients.
Brand Board: What It Is and How It Differs From a Mood Board
A brand board is a single page that sums up a brand you've already chosen: logo, color palette with codes, fonts, voice and a couple of example applications. The mood board searches for the direction. The brand board shows the direction you picked.
| Mood board | Brand board | Brand guidelines | |
|---|---|---|---|
| When | At the start | During design | At the end |
| Job | Explore directions | Confirm the identity with the client | Set the rules of use |
| Contains | Other people's references and notes | Logo, colors, fonts, voice and examples | Everything above plus misuse examples |
| Size | One board | One page | Several pages |
For a small business the rule is simple. If you only need to hand your brand to a web developer, a printer or a sign maker, a good brand board is enough and saves you the long guidelines document. If several people will touch the brand for years, or you plan to franchise, write the full guidelines.
To build it in Canva or Figma in half an hour, put the logo on a light and a dark background at the top. Add the palette with HEX codes and each color's job in the middle. At the bottom, put two fonts with a sample sentence and three lines that sound like your brand. Close with one yes and one no for photo style, taken from your mood board.
From Website Mood Board to Color Palette and Pages
A website mood board becomes decisions: 3 to 5 colors with a job, two fonts, a photo and button style, and contrast you've checked.
The board inspires; the palette has to work. So you don't copy every color from the board. You assign roles: a primary (logo, links, buttons), one or two secondaries, an accent for what you want clicked, a light neutral for backgrounds and a dark one for text. Our color palette generator helps you build the harmony and copy the codes.
Then comes the check most people skip: contrast. Under the W3C's WCAG 2.2 guidance, normal text needs a contrast ratio of at least 4.5:1 against its background, and large text (about 24 px, or 18.5 px bold) needs 3:1.
Which mood board colors can you use for website text?
Only the ones that pass 4.5:1 on your background. Notablia's own brand shows why. Its brand guide (2026) turns the idea of "the marketing bible with a bookmark" into five colors with a job. Here is each one's contrast on white, calculated by us with the WCAG formula:
| Color | Code | Job | Contrast on white | Normal text (4.5:1) |
|---|---|---|---|---|
| Indigo | #3D3AE0 | Primary and links | 7.29:1 | Yes |
| Violet | #7C3AED | AI and details | 5.70:1 | Yes |
| Coral | #FF5A36 | Accent | 3.10:1 | No, large text only |
| Text coral | #D93A16 | Accent in small text | 4.60:1 | Yes |
| Ink | #14161C | Text and logo | 18.08:1 | Yes |
Coral has the most personality on the board and is also the one color that fails in a paragraph. The fix isn't to drop it: it's to create a darker version for text and keep the bright coral for big buttons, icons and details. Do the same with your accent.
Mood Board Maker Options: Canva, Pinterest, Figma or Paper
For a free mood board, Pinterest to collect plus Canva or Figma to build is enough; paper still wins for interiors and materials.
| Tool | Best for | Free plan | Watch out |
|---|---|---|---|
| Collecting references on secret boards | Yes | Doesn't filter for you | |
| Canva | Building the board from a mood board template | Yes | Overused templates |
| Figma or FigJam | Website boards and teamwork | Yes | Steeper start |
| Milanote | Creative projects with notes and links | Yes, limited | Made for creatives |
| Miro | Live workshops with the client | Yes, limited | Fills up with sticky notes |
| Foam board | Real materials, interiors and fashion | Almost free | No shareable link |
A pinterest mood board is a great collecting drawer, rarely the final board. A canva mood board is the fastest clean layout. For a website, Figma wins: board and design live in one file.
Can AI make a mood board?
Yes, for two things: generating references you can't find (a specific texture or setting) and sorting your ideas before you search. Adobe Firefly and Canva already offer AI mood board features. Use them for inspiration, not for final site images: each tool has its own terms of use.
Act as an art director. My business is [what you sell] in [city], for [type of customer], and I want it to feel [how it should feel]. Give me: 1) five brand words, 2) twelve specific Pinterest searches that fit those words, 3) three things my brand should never look like and 4) a 5-color palette with each color's job and HEX code. Don't make up facts about my business: if something is missing, ask me.
Mood Board for a Photoshoot: What to Include and How to Share It
A photoshoot mood board tells the photographer which light, angles, props and attitude you want, so nobody guesses on shoot day. It avoids reshoots, because disagreements show up on the board instead of on the invoice.
Build it in five blocks:
- The goal. Where the photos will live: homepage banner, product pages or Instagram. Each one needs a different crop and orientation.
- Six to ten references. Group them by light, angle, styling and, if people appear, pose and expression.
- A short note on each reference. Write what you like about it, such as "soft window light from the left". Otherwise the photographer copies the subject instead of the look.
- Backgrounds, props and colors. Flat swatches with their codes.
- A not-this strip. The shots your brand should never resemble.
Add a shot list with the frames you need. Here is an invented example for an online ceramics shop:
- Hero: a mug on an oak table, window light from the left, horizontal for the homepage.
- Product page: the mug on a cream background, vertical.
- Detail: a close-up of the glaze texture.
- In use: hands pouring coffee, no faces.
Send the board as a PDF and ask the photographer to mark which references they can recreate with their gear and budget.
Mood Board Examples for Brands, Websites, Interiors and Fashion
Each kind of board focuses on something different: brands on feelings, websites on interface, interiors on materials and fashion on the season.
| Type | Mostly includes | Illustrative example |
|---|---|---|
| Brand | Words, mood photos, type and colors | Austin bakery: "warm, handmade"; wood, kraft, cream and olive green |
| Website | Fonts, buttons, photos and icons | Physical therapy clinic: "calm, trust"; natural light, rounded buttons |
| Interior design mood board | Materials, furniture and light | Coffee shop: oak, green tile and brass |
| Fashion mood board | Fabrics, seasonal colors and poses | Knitwear line: raw wool and earth tones |
These mood board examples are illustrative, not client cases. For real ones, Behance has thousands: notice how few pieces the clearest boards use.
Frequently asked questions about mood boards
How does a mood board help?
A mood board helps everyone agree on the look and feel of a project before anyone spends money on design, photos or furniture. It turns vague words like modern or friendly into concrete references, so feedback becomes specific: this photo, not that one. It also saves revision rounds, because the client approves the direction early and the designer works toward something already agreed. For a small business, that usually means fewer surprises when the logo, website or store is finished.
How do you make a wedding mood board?
To make a wedding mood board, start with three or four words for the day, such as relaxed, coastal and candlelit, then collect references for the venue, flowers, table setting, dress, stationery and lighting. Keep 10 to 15 pieces and add the color palette as flat swatches. Share it with your florist, planner and photographer so they all work from the same picture, and date each version.
What's one thing that shouldn't appear on a mood board?
Anything that contradicts your mood words should not appear on a mood board, even if you love it. A single off-brand image, like a neon street photo on a board for a calm spa, confuses everyone about the direction. Screenshots of a competitor's website are another classic: they push the team to copy. To show what to avoid, use a small, labeled not this corner.
Can ChatGPT make a mood board?
Yes, ChatGPT can make part of a mood board. It can write your brand words, suggest Pinterest searches, propose a palette with HEX codes and generate single reference images with its image tool. What it does badly is assemble a clean board from real, sourced photos or keep ten generated images in one consistent style. The practical route is to let ChatGPT do the thinking and the first batch of references, then arrange and filter them yourself in Canva or Figma.
How do I make a mood board in Canva?
To make a mood board in Canva, search for mood board in the templates, pick a grid layout and delete the placeholder images you don't need. Upload your references, drag them in and make one or two of them larger as anchor images. Add flat color squares with the HEX code of each color and type your brand words in the fonts you're considering. When you're done, download it as a PDF or share a view-only link so your client can comment.
Where can I find a free mood board template?
You can find free mood board templates in Canva, Milanote, Figma Community and Notion, and all of them offer free plans. Pick a template with a clear hierarchy: one or two large cells for anchor images, smaller ones for supporting shots and a strip for colors and fonts. Avoid templates with 30 tiny cells, because they push you to add too much. If you work on paper, a sheet of foam board and a printed grid do the same job.
What's the difference between a website mood board and a style tile?
A website mood board sets the feeling of the site with images, colors and type, while a style tile goes one step further and shows actual interface pieces: buttons, headings, form fields and icons in the chosen style. The mood board answers how it should feel; the style tile answers how the components should look. Most small sites need the mood board first and a simple style tile right before design starts, so the developer gets exact colors and fonts.