색·패턴·타이포그래피를 겹겹이 쌓아 빈 곳 없이 밀도 높게 채우는 스타일. 미니멀리즘에 대한 반작용으로 자주 언급됩니다.
디자인 아틀라스<div class="stack">
<div class="layer l1"></div>
<div class="layer l2"></div>
<span class="type t1">BOLD</span>
<span class="type t2">and loud</span>
<div class="sticker"></div>
</div>body{background:#171018}
.stack{position:relative;width:min(88%,300px);aspect-ratio:1.2;overflow:hidden;border-radius:8px}
.layer{position:absolute;inset:0}
.l1{background:
repeating-linear-gradient(45deg,#ff5c8a 0 10px,transparent 10px 20px),
linear-gradient(160deg,#5b5bf7,#18c29c);
mix-blend-mode:screen;opacity:.7}
.l2{background:radial-gradient(circle at 70% 30%,#f4c515 0%,transparent 55%),
radial-gradient(circle at 20% 80%,#ff5c8a 0%,transparent 50%);
animation:drift 6s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(4%,-3%) scale(1.06)}}
.type{position:absolute;font-family:"Arial Black",sans-serif;font-weight:900;color:#fff;
text-shadow:2px 2px 0 #111}
.t1{left:8%;top:18%;font-size:clamp(24px,6vmin,34px);transform:rotate(-4deg)}
.t2{left:14%;bottom:14%;font-size:clamp(13px,3vmin,17px);font-style:italic;color:#f4c515;transform:rotate(2deg)}
.sticker{position:absolute;right:8%;top:10%;width:22%;aspect-ratio:1;border-radius:50%;
background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.4);animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}2010년대 후반, 어디를 가나 비슷해 보이는 미니멀 SaaS 랜딩 페이지("Corporate Memphis")에 대한 피로가 쌓이면서 반작용으로 떠올랐습니다. 콜라주처럼 서로 다른 질감·색·서체를 겹쳐서 "빈 공간 공포(horror vacui)"라 불릴 정도로 화면을 가득 채웁니다.
여러 겹의 배경 패턴, 큼직하고 대비가 강한 헤드라인 서체를 한 화면에 2~3종 섞어 쓰기, 채도 높은 색을 충돌시키는 배색이 특징입니다. 규칙이 없어 보이지만 실제로는 z-index로 층을 명확히 나누고, 그 안에서 한 가지 요소(예: 특정 색)를 반복해 통일감을 주는 식의 숨은 질서가 있는 경우가 많습니다.
패션·음악·문화 브랜드처럼 "에너지"와 "개성"이 핵심 가치인 곳에 잘 맞습니다. 반면 사용자가 다음 행동(구매, 가입)을 빠르게 찾아야 하는 화면에서는 시각적 소음이 전환율을 떨어뜨릴 수 있어 신중해야 합니다.