← Back to Home

Perfectly Flat

Flat design eliminates all three-dimensional elements, focusing on simple shapes, bright colors, and clean typography for a streamlined user experience.

Explore Flat

Flat Principles

▢

No Shadows

Complete absence of depth effects, gradients, or shadows. Everything exists on the same plane.

●

Bright Colors

Bold, saturated colors that stand out and create visual hierarchy without depth.

▲

Simple Shapes

Basic geometric forms and icons that are immediately recognizable and functional.

Pure Simplicity

Flat design emerged as a reaction to skeuomorphism, stripping away all ornamental elements to focus purely on usability and content. It's about clarity, speed, and directness.

FLAT

Keep It Flat

Get Started

AI 프롬프트 예제

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

요구사항

  • 그림자 완전히 제거 (box-shadow 없음)
  • 단순한 기하학적 형태
  • 밝고 채도 높은 색상
  • 2D 평면 디자인
  • 명확한 타이포그래피
  • 아이콘과 일러스트레이션 활용

제약조건

  • 그라데이션 사용 금지
  • 그림자/입체 효과 사용 금지
  • 반응형 디자인 필수

예상 결과

  • 완전히 평면적인 UI
  • 빠른 로딩 속도
  • 명확하고 직관적인 인터페이스
  • 밝고 활기찬 느낌
  • 단순하고 깔끔한 디자인
  • 현대적이고 미니멀한 외관

프롬프트 템플릿

Flat Design 스타일의 프로필 카드를 만들어줘.

요구사항:
- 그림자 완전히 제거 (box-shadow 없음)
- 단순한 사각형과 원형 형태
- 밝고 채도 높은 색상 (예: #3498db, #e74c3c, #2ecc71)
- 2D 평면 디자인만 사용
- 명확한 sans-serif 타이포그래피
- 단순한 아이콘 (SVG)

스타일 가이드:
- box-shadow: none
- border: 2px solid [color] (선택사항)
- background: 단색 (#3498db, #e74c3c 등)
- border-radius: 4-8px (최소한)
- 그라데이션 금지

디자인:
- 프로필 이미지 (원형)
- 이름, 직책
- 소셜 아이콘 버튼
- 밝은 배경색

반응형 디자인 필수, 단순하고 명확한 디자인 유지해줘.