← BACK

RAW & UNPOLISHED

Grunge design embraces imperfection with rough textures, torn edges, and a deliberately distressed aesthetic that rejects mainstream polish.

EXPLORE CHAOS

GRUNGE ELEMENTS

ROUGH TEXTURE

Scratches, stains, and worn surfaces create an authentic, lived-in feel that tells a story of rebellion and authenticity.

DARK PALETTE

Muted, desaturated colors and deep shadows evoke the underground music scene that inspired the aesthetic.

DISTRESSED TYPE

Heavy, bold typography with worn edges and imperfect alignment that rejects conventional design rules.

ANTI-DESIGN

Born from the punk and alternative rock movements of the 90s, grunge design deliberately rejects perfection and polish. It's about authenticity, rawness, and creative rebellion against the mainstream.

DISTRESSED

GET GRITTY

START DESIGNING

AI 프롬프트 예제

Claude/Cursor를 사용하여 Grunge 스타일의 컴포넌트를 생성할 때 참고하세요.

요구사항

  • 거친 텍스처 (그레인, 스크래치)
  • 찢어진/손상된 효과
  • 어두운 톤 (검정, 갈색, 회색)
  • 불규칙한 가장자리
  • 오버레이 텍스처
  • 반항적이고 날것의 느낌

제약조건

  • 성능 최적화 (텍스처)
  • 반응형 디자인 필수
  • 가독성 유지

예상 결과

  • 90년대 그런지 감성
  • 거칠고 날것의 느낌
  • 반항적이고 대안적인 분위기
  • 텍스처가 살아있는 디자인
  • 진정성 있는 표현
  • 완성되지 않은 듯한 미학

프롬프트 템플릿

Grunge 스타일의 배너 컴포넌트를 만들어줘.

요구사항:
- 거친 텍스처 (그레인, 스크래치, 노이즈)
- 찢어진 가장자리 효과
- 어두운 색상 팔레트 (#1a1a1a, #3a3a3a, #5a5a5a)
- 오버레이 텍스처 (background-image)
- 손상된 타이포그래피 (distressed font)
- 불규칙한 border 또는 clip-path

스타일 가이드:
- colors: #1a1a1a, #3a3a3a, #5a5a5a (다크 톤)
- textures: 그레인, 스크래치, 먼지
- filter: contrast(110%) brightness(90%)
- mix-blend-mode: multiply 또는 overlay
- font: distressed 또는 handwritten style

텍스처:
- CSS background-image (data URI 또는 이미지)
- SVG 필터 (noise, turbulence)
- opacity와 blend mode 조합
- clip-path로 불규칙한 가장자리

디자인:
- 배너 또는 헤더
- 거친 텍스처 배경
- 손상된 타이포그래피
- 찢어진 효과
- 어두운 분위기

성능 최적화, 반응형 디자인 필수, 가독성 유지해줘.