Design Atlas
한국어
⟳ Design process

Moodboard

무드보드

A collage of colors, textures, images, and type fragments that shows a felt direction before it has a name.

Also known as: 영감 보드Inspiration board
···
html
<div class="stage">
  <div class="board" id="board">
    <div class="tile t1"></div>
    <div class="tile t2"></div>
    <div class="tile t3 type">Aa</div>
    <div class="tile t4"></div>
    <div class="tile t5"></div>
    <div class="tile t6 type">Ag</div>
  </div>
</div>
css
.stage{width:94%;height:88%}
.board{position:relative;width:100%;height:100%}
.tile{position:absolute;border-radius:8px;opacity:0;transform:scale(.85) rotate(0deg);
  transition:opacity .6s ease,transform .6s ease;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.t1{left:2%;top:8%;width:26%;height:46%;background:linear-gradient(160deg,var(--accent),var(--accent-2))}
.t2{left:30%;top:4%;width:20%;height:26%;background:var(--accent-3)}
.t3{left:30%;top:32%;width:20%;height:22%;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;font:800 20px serif;color:var(--fg)}
.t4{left:52%;top:8%;width:24%;height:34%;background:repeating-linear-gradient(45deg,var(--line) 0 6px,var(--surface) 6px 12px)}
.t5{left:78%;top:4%;width:20%;height:50%;background:linear-gradient(200deg,var(--accent-2),var(--accent))}
.t6{left:52%;top:44%;width:24%;height:18%;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;font:400 18px sans-serif;color:var(--fg)}
.tile.on{opacity:1;transform:scale(1) rotate(var(--r,0deg))}
.t1.on{--r:-2deg}.t2.on{--r:1deg}.t4.on{--r:2deg}.t5.on{--r:-1deg}
js
const tiles = Array.from(document.querySelectorAll('.tile'));
let i = 0;
function reveal() {
  if (i < tiles.length) { tiles[i].classList.add('on'); i++; return; }
  tiles.forEach((t) => t.classList.remove('on'));
  i = 0;
}
setInterval(reveal, 450);

A moodboard communicates "this kind of feeling" through images instead of words. Reference photos, color swatches, textures, and type samples are arranged freely as a collage — not on a grid — to build a shared sense of an as-yet-undefined mood: cold or warm, luxurious or playful, between a team and a client.

It's often confused with a style tile, but the two belong to different stages. A moodboard belongs early, while still exploring direction — it doesn't need to answer "so what's the actual hex code?" yet. Once a moodboard narrows the direction down, the next step is a style tile that pins down the real hex codes and font names.

A moodboard itself isn't a deliverable — it's a conversation tool. Its job is to let a client point at a photo and say "that one, more like that."

When to use

Use it early, when a brand's tone or visual direction is hard to agree on in words alone. Once you need actual color and font decisions, move on to a style tile.