Design Atlas
한국어
⟳ Design process

Style tile

스타일 타일

One page of color swatches, type samples, and button states — an agreement on style, reached before drawing an actual screen.

Also known as: 스타일 가이드 타일
···
html
<div class="stage">
  <div class="tile">
    <div class="sec pal">
      <span class="sw" style="background:var(--accent)"></span>
      <span class="sw" style="background:var(--accent-2)"></span>
      <span class="sw" style="background:var(--accent-3)"></span>
      <span class="sw" style="background:var(--fg)"></span>
    </div>
    <div class="sec type">
      <div class="h">Heading</div>
      <div class="p">Body text sample</div>
    </div>
    <div class="sec ui">
      <button class="btn">Button</button>
      <span class="chip">Chip</span>
    </div>
  </div>
</div>
css
.stage{width:94%;height:88%}
.tile{width:100%;height:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden}
.sec{flex:1;display:flex;align-items:center;gap:10px;padding:0 6%;opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease;box-shadow:inset 0 -1px 0 var(--line)}
.sec:last-child{box-shadow:none}
.sec.on{opacity:1;transform:translateY(0)}
.sw{width:28px;height:28px;border-radius:6px}
.type{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.h{font:800 18px/1 serif;color:var(--fg)}
.p{font:400 12px/1 sans-serif;color:var(--muted)}
.btn{border:none;border-radius:20px;background:var(--accent);color:#fff;padding:6px 14px;font:700 11px/1 sans-serif}
.chip{border:1px solid var(--accent);color:var(--accent);border-radius:14px;padding:5px 12px;font:700 11px/1 sans-serif}
js
const secs = Array.from(document.querySelectorAll('.sec'));
let i = 0;
function reveal() {
  if (i < secs.length) { secs[i].classList.add('on'); i++; return; }
  secs.forEach((s) => s.classList.remove('on'));
  i = 0;
}
setInterval(reveal, 700);

A format proposed by Samantha Warren: color palette, heading and body type samples, and UI element samples like buttons, all on one page — with no actual screen layout. Where a moodboard uses a free collage to convey a mood, a style tile organizes real values (exact hex codes, font names and weights) into aligned sections to pin down "this is the style we're using."

It also differs from a mockup. A mockup renders one specific screen (say, the homepage) as a finished picture; a style tile is a set of materials that isn't tied to any screen at all. When you need to agree on tone before layout is even decided, it's faster to produce than a mockup.

Once approved, it becomes the reference other mockups and components are built against, and on larger teams it often grows directly into a design system's tokens and base styles.

When to use

Use it when tone (color, font, button style) needs agreement before layout does, or when it's still too early to draw a full mockup.