styles
← 갤러리

Neo-Brutalist

굵은 검정 테두리와 번지지 않는 하드 오프셋 그림자, 쨍한 원색으로 무장한 시끄럽고 장난스러운 네오브루탈리즘 — 버튼은 눌리고 튀어 오른다.

neo-brutalist neubrutalismhard-shadowbold-bordershigh-contrastplayfulsaturated-primarieschunky
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

2~3px 솔리드 블랙 보더, 블러 0의 하드 오프셋 드롭 섀도우(4~6px 오프셋, 불투명도 100%)를 기본 문법으로 삼는다. 일렉트릭 블루·옐로우·핑크 같은 고채도 원색을 대담하게 쓰고, 두툼한 디스플레이 타입과 강한 대비로 화면을 크게 외친다. 그라디언트나 소프트 섀도우 대신 딱딱한 그림자와 굵은 선으로만 깊이를 만들며, 인터랙션은 물리적으로 눌리고 튀어 오르는 '팝 앤 프레스' 감각을 준다.

타입 스케일

display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen

제목은 Archivo Black급의 헤비 웨이트(700~800)로 두툼하고 크게, 본문은 Space Grotesk 400으로 읽히게. 라벨/배지는 대문자 + 넓은 자간으로 스티커처럼 쓴다. 웨이트 대비를 크게 벌려 '시끄러운' 위계를 만든다.

골든 예제 (exemplar)

New — v2.0 is here

Ship it
LOUD.

Thick borders, hard shadows, zero blur. A design system that refuses to whisper.

01 — Borders

3px, solid, no apologies

Every block is fenced in. The outline is the object.

02 — Shadows

Zero blur, one direction

A single 4px offset shadow, cut out and pasted on.

03 — Motion

Pop up, press down

Hover lifts it; a click collapses the shadow to nothing.

Do

  • 모든 카드·버튼에 2~3px 솔리드 블랙 보더 + 블러 0 하드 오프셋 그림자를 준다
  • 일렉트릭 블루·옐로우·핑크 같은 고채도 원색을 큰 면에 대담하게 채운다
  • 호버는 요소를 떠오르게, 클릭은 그림자 방향으로 눌리게 해 물리감을 준다
  • 제목은 헤비 웨이트로 크고 두툼하게, 라벨은 대문자 스티커처럼 쓴다

Don't

  • 블러가 있는 소프트 그림자나 다중 레이어 섀도우 금지 — 그림자는 딱 한 겹, 블러 0
  • 그라디언트·글래스모피즘·미묘한 파스텔 톤 금지
  • 은은한 1px 회색 경계선 금지 — 보더는 굵고 검정(다크: 흰색)이다
  • 저채도·저대비의 차분한 배색으로 톤을 죽이지 말 것

컴포넌트 노트

button
base: border 3px solid var(--border), radius var(--radius-field), 배경 primary(원색) 채움, 두툼한 라벨 타이포, padding 14px 28px, box-shadow 4px 4px 0 var(--foreground)
hover: translate(-2px,-2px) + box-shadow 6px 6px 0 var(--foreground) — 요소가 떠오른다, 100ms
focus: 3px offset ring outline(var(--ring)), 보더 유지
disabled: opacity 0.5, box-shadow 제거, translate 없음, cursor not-allowed
card
border 3px solid var(--border), radius var(--radius-box), box-shadow 4px 4px 0 var(--foreground). 배경은 card 또는 원색 블록. 내부 padding 24~32px. 그림자는 항상 오른쪽-아래 한 방향.
input
border 3px solid var(--border), radius var(--radius-field), 배경 card, inset 그림자 없음. 포커스 시 3px ring + 살짝 눌린 box-shadow 2px 2px 0.
nav
굵은 하단 보더(3px) 또는 원색 바. 로고는 두툼한 디스플레이 타입, 링크는 대문자 라벨. CTA 버튼은 하드 섀도우 유지.
badge
대문자 라벨, border 2px solid var(--border), radius var(--radius-field), 원색 배경(secondary/accent), 스티커처럼 살짝 회전(-2deg) 허용.