What Is a Mood Board? The Decisions It Settles in a Design Project

A mood board is a collage of reference material (photographs, screenshots, color swatches, type specimens, textures) put together to agree on how something should look and feel before anyone produces it. In product design the job is the same: give a team a shared picture of a visual direction while changing that direction is still cheap.

Most mood boards get made and then admired. The useful ones get made and then used up. Somebody looks at the board, picks a direction, writes down what was chosen, and the board goes into the archive. A board nobody has used up is still a draft.

It belongs with the other UX deliverables because it settles a question, and the question is tone. When a person opens this product, what should it feel like, and which visual choices produce that feeling?

What is a mood board made of

One canvas, digital or physical, with a few dozen references at most. Photography shows the lighting, subject matter, and framing the brand would use. Screenshots of existing interfaces are cropped down to the one detail being referenced. Color swatches are pulled from the references or proposed alongside them. Type is shown as real headings and body text, since a specimen sheet of the alphabet says little about how a face reads at 14px. Textures cover the rest: paper grain, glass, matte against gloss, hand-drawn against geometric.

Then there are the words. Three or four adjectives, agreed with whoever owns the brief and placed on the board itself. The adjectives let a reviewer ask whether one particular photo supports "calm" or works against it, and pull it if it doesn't.

The five decisions a board can settle

1. Color range. Warm or cool, saturated or muted, one accent or several. No final hex values yet, but whole families get ruled out.
2. Type character. Geometric sans, humanist sans, serif, mono. Editorial headings or technical ones.
3. Image style. Photography or illustration. If photography, staged or candid, people or objects. If illustration, flat, textured, or 3D.
4. Spacing. How much air sits around things: generous margins and quiet pages, or tight and compact. This is visual rhythm, and it is separate from how many elements a screen holds, which the wireframe decides. It gets forgotten, and it's the one that shows up in every component later, from card padding to table row height.
5. Surface. Flat color, soft gradients, grain, shadow and depth, or none of those.

A project that reaches mockups with all five open argues about taste in every screen review.

What a board can't settle

Structure, content, and behavior belong to other artifacts. What goes on a page, and in what order, is a wireframe question. Who the product is for comes out of research. How an interaction moves is for a prototype.

Boards do overreach into structure, usually by accident. A reference screenshot with a big hero image and three cards under it carries that layout along with its palette and type. Unless someone writes next to it which part is being referenced, the layout gets adopted without anyone deciding to adopt it. Crop tightly, or label it.

Mood board vs. style tile vs. style guide

All three are about visual design, and they commit to very different amounts:

Artifact	When it's made	What it commits to	What it's made of
Mood board	Before any visual design	A direction: tone, range, character	Other people's images, collected and arranged
Style tile	While a direction is being narrowed and confirmed	Specific type, color, and UI elements	Original design elements, not yet laid out as a page
Style guide / design system	Once the design is established	Exact values, components, usage rules	Documented, reusable components and tokens

Style tiles come from Samantha Warren, as a step between a mood board and a full mockup for web projects. A mood board uses found material; a style tile uses material your team made. Once you are drawing your own buttons and headings, you have moved past the board. When the choices harden into rules, they go into a design system.

Building one, with an example

Say the brief is a scheduling tool for small clinics, and the adjectives are calm, clear, dependable.

Collect outside the category first. A board made only from other scheduling tools will look like every scheduling tool. Hospital wayfinding signage, pharmacy packaging, hotel lobbies, and printed appointment cards all say something about calm and clear that software screenshots don't.

Then build two boards. One board gets approved or rejected as a whole and nobody learns why. Two give the room something to compare.

Board A reads calm as quiet: cool blue-greys, a geometric sans, wide margins, flat surfaces, photography of empty, well-lit rooms. Board B reads calm as unhurried: warm off-whites with a muted terracotta accent, a humanist sans, moderate spacing, a light paper grain, candid photography of staff at a front desk.

Both fit "clear." They split on what "calm" means, and a team has to pick one. Tag every reference on both boards with what it contributes ("the grey-green," "the loose letterspacing on the headings") so the review argues about those choices instead of about which board is prettier.

Suppose the team picks B. The written decision, pasted onto the board file:

Warm neutral palette, one muted accent. Humanist sans for UI and headings. Moderate spacing. Candid photography of people, no illustration. Matte surfaces with a light paper grain, no drop shadows.

That closes all five. The board is now used up, and the next artifact is a style tile built from that paragraph.

Tools for making a mood board

Any canvas that holds images works. Figma and FigJam are the default for product teams because the board sits next to the design files. Milanote and similar board apps are built for collecting. Pinterest is good for gathering and bad for presenting, because it arranges the references for you. Paper on a wall still works in a workshop room, where nobody can zoom in on one image and lose the whole.

FAQ

What is a mood board used for in UX design?

To agree on a visual direction (color range, type character, image style, spacing, and surface) before designing screens. Designers, stakeholders, and developers get one shared reference, so later reviews are about the work.

What is a mood board supposed to include?

Reference images, color swatches, type samples, textures, and the three or four adjectives the direction should express. A short label on each reference saying what it contributes makes the board far easier to review.

How many images should a mood board have?

Enough to show a direction once. If two images make the same point, keep the clearer one.

What's the difference between a mood board and a style tile?

A mood board collects existing images to set a direction. A style tile shows original design elements (real type, color, buttons, form fields) in that direction. The board comes first.

What does a mood board hand to the wireframe?

Nothing directly. The board's written decision waits until the wireframe's structure is settled, then gets applied at the mockup.

Is a mood board useful if there's already a brand guide?

For a new product or a redesign, yes. Brand guides cover logo, core colors, and typefaces. They rarely say anything about spacing inside a data-heavy screen or which photography belongs in the product as opposed to the ads. A board fills that in, inside the brand's limits.