← Back to Home

Material Design

A design language developed by Google, combining the classic principles of good design with innovation and technology to create intuitive, beautiful experiences.

Explore Material

Core Principles

▢

Elevation

Cards and surfaces exist at different elevations, creating depth through layered shadows that respond to light.

○

Motion

Responsive animations and transitions provide feedback and guide users through interactions naturally.

◇

Bold Colors

Vibrant color palettes inspired by contemporary architecture and bold graphic design.

Design Language

Material Design uses tactile surfaces, bold graphic design, and meaningful motion to create a visual language that synthesizes classic principles with innovation and possibility.

Material

Build with Material

Get Started

AI 프롬프트 예제

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

요구사항

  • Elevation 시스템 (z-depth에 따른 그림자)
  • 카드 기반 레이아웃
  • 리플 효과 (ripple animation)
  • 대담한 색상과 타이포그래피
  • 의미 있는 모션과 전환
  • FAB (Floating Action Button)

제약조건

  • Material Design 가이드라인 준수
  • 반응형 디자인 필수
  • 접근성 표준 준수

예상 결과

  • Material Design 가이드를 따른 일관된 UI
  • Elevation에 따른 계층 구조
  • 부드러운 애니메이션과 전환
  • 직관적인 사용자 경험
  • 카드 중심의 정보 구조
  • 명확한 시각적 피드백

프롬프트 템플릿

Material Design 스타일의 카드 컴포넌트를 만들어줘.

요구사항:
- Elevation 그림자 시스템 (0dp, 2dp, 4dp, 8dp)
- 카드 형태의 레이아웃
- 호버 시 elevation 증가 (2dp → 8dp)
- 리플 효과 (클릭 시)
- 둥근 모서리 (border-radius: 4-8px)
- Primary/Secondary 색상 사용

스타일 가이드:
- elevation 2dp: box-shadow: 0 2px 4px rgba(0,0,0,0.1)
- elevation 8dp: box-shadow: 0 8px 16px rgba(0,0,0,0.2)
- border-radius: 4px
- primary color: #6200EE
- secondary color: #03DAC6

디자인:
- 카드 형태 (이미지, 제목, 설명, 버튼)
- 호버 시 elevation 증가
- 버튼 클릭 시 리플 효과
- 부드러운 전환 애니메이션 (300ms cubic-bezier)

Material Design 가이드라인 준수, 반응형 디자인 필수, 접근성 고려해줘.