큐레이션 · 오픈 · 무료

Airbnb

사진에 중점을 둔, 깔끔하고 신뢰감 있는 여행 마켓플레이스 UI입니다.

01

디자인 DNA

독특한 숙소와 경험을 위한 글로벌 커뮤니티 마켓플레이스입니다.

02

컬러

단일의 생동감 있는 브랜드 강조색을 사용한 고대비 중성 베이스입니다.

03

타이포그래피

humanist-sans

• display28px · 700
• heading16px · 700
• body14px · 400
• caption12px · 400

04

여백

여유로운 padding을 사용한 8px 수직 리듬입니다.

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgba(0, 0, 0, 0.08)

rgba(0, 0, 0, 0.04) 0px 2px 6px 0px · rgba(0, 0, 0, 0.1) 0px 4px 8px 0px · rgba(0, 0, 0, 0.1) 0px 8px 24px 0px

06

레이아웃

중앙 검색 바와 다중 컬럼 카드 그리드를 갖춘 풀폭 헤더입니다.

07

모션과 인터랙션

hover 시 transform과 box-shadow 트랜지션. · 캐러셀의 부드러운 slide 트랜지션.

box-shadow 또는 opacity를 통한 미묘한 높이 변화입니다. · 주요 버튼과 카드의 scale transform입니다.

08

컴포넌트

• button 검정색 배경에 흰색 텍스트를 사용한 알약 모양 버튼, 또는 생동감 있는 핑크색 원형 검색 아이콘입니다.
• card 이미지가 강조된 둥근 모서리 카드에 하트 아이콘과 최소한의 텍스트가 아래에 배치됩니다.
• chip 검정색 테두리와 흰색 배경을 사용한 알약 모양 태그입니다.
• input 부드러운 그림자와 두드러진 핑크색 액션 버튼을 가진 대형 알약 모양 검색 바입니다.
• hero 주목도 높고 다중 필드 검색 위젯을 갖춘 미니멀리스트 네비게이션 바입니다.

09

보이스와 금지 목록

• 톤 친근하고 초대하며 전문적인 어조입니다.
• 헤드라인 직설적이고 명확하며 대화적인 스타일입니다.
• CTA 행동을 유도하고 간결한 스타일입니다 (예: '검색 시작하기').

• 어두운 배경을 사용하지 마세요 — 스크린샷은 주로 흰색과 밝은 회색의 레이아웃을 보여줍니다.
• 세리프 폰트를 사용하지 마세요 — 스크린샷은 전체적으로 깔끔하고 현대적인 산세리프 타이프페이스를 보여줍니다.
• 복잡하고 다색 팔레트를 사용하지 마세요 — 스크린샷은 단일의 핑크 강조색을 사용한 거의 단색 팔레트를 보여줍니다.
• 카드에 날카롭고 네모난 모서리를 사용하지 마세요 — 스크린샷은 이미지와 버튼에 충분히 둥근 모서리를 보여줍니다.
• 무겁고 단단한 테두리를 사용하지 마세요 — 스크린샷은 매우 가볍고 미묘한 테두리 또는 box-shadow를 보여줍니다.
• 크고 밀도 높은 텍스트 블록을 사용하지 마세요 — 스크린샷은 충분한 여백과 짧고 읽기 쉬운 텍스트 요소를 보여줍니다.
• 피하기: 전문 용어
• 피하기: 지나치게 격식 있는 언어
• 피하기: 공격적인 판매 기법

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko