큐레이션 · 오픈 · 무료

Ilia

따뜻한 중성 톤과 세련된 타이포그래피를 사용한 사진 중심의 클린 뷰티 이커머스입니다.

01

디자인 DNA

햇빛이 들어오는 갤러리의 미니멀 뷰티 카운터

02

컬러

따뜻한 중성색이 배경을 지배하며, 전경의 주요 색상으로 짙은 갈색을 사용해 고대비이면서도 부드러운 미적 효과를 만듭니다.

03

타이포그래피

geometric-sans · humanist-sans · ui-monospace

• display40px · 400
• body16px · 400

네비게이션 및 버튼 레이블에는 대문자를 사용합니다 · 큰 디스플레이 텍스트에는 좁은 자간을 적용합니다 · 계층적 강조를 위해 다양한 폰트 두께를 혼합 사용합니다

04

여백

일관된 16px 거터와 패딩을 사용하는 기본 4 단위 시스템

05

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

구분선용 1px solid rgb(229, 231, 235), 주요 버튼용 2px solid rgb(39, 31, 31)

0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 2px 4px -2px rgba(0, 0, 0, 0.1)

06

레이아웃

왼쪽에 중앙 정렬된 흰색 카드, 오른쪽에 풀블리드 라이프스타일 사진이 있는 모달 오버레이

07

모션과 인터랙션

모달 오버레이를 위한 부드러운 투명도 전환 · 호버 시 색상 및 배경색 전환 · 대화형 요소를 위한 변환 애니메이션

0.4s 동안의 색상 및 배경색 전환 · 대화형 요소에 대한 변환 효과

08

컴포넌트

• button 흰색 대문자 텍스트가 포함된 짙은 갈색(#271F1F) 채우기 버튼으로, 8px 둥근 사각형
• card 12px border-radius가 적용된 흰색(#FFFFFF) 모달 카드
• chip 일관된 8px 간격의 격자 레이아웃에 배치된 카테고리 선택 버튼
• input 스크린샷에 보이지 않음
• hero 모달 오버레이와 라이프스타일 제품 사진이 있는 풀 뷰포트 분할 레이아웃

09

보이스와 금지 목록

• 톤 매력적이고 자신감 있으며 접근하기 쉬운 어조
• 헤드라인 직접적인 프로모션 언어('15% 할인을 받으세요')와 큰 기하학적 산세리프체 사용
• CTA 명확한 행동 지향적 대문자 카테고리 레이블

• 다크 모드 사용 금지 — 스크린샷에 밝은 #FAF7F8 배경 표시
• 밝은 강조색 사용 금지 — 스크린샷에 단색 따뜻한 중성색 표시
• 스크립트 또는 장식적 폰트 사용 금지 — 스크린샷에 깔끔한 기하학적 및 휴머니스트 산세리프체 표시
• 무거운 드롭 그림자 사용 금지 — 스크린샷에 저투명도의 미세한 상자 그림자 표시
• 둥근 알약 모양 버튼 사용 금지 — 스크린샷에 8px 둥근 사각형 버튼 표시
• 복잡한 레이아웃 사용 금지 — 스크린샷에 단순한 중앙 정렬 모달 오버레이 패턴 표시
• 피하기: 밝은 채도 높은 색상 사용 금지
• 피하기: 장식적 스크립트 폰트 사용 금지
• 피하기: 다크 모드 사용 금지
• 피하기: 복잡한 그라데이션 사용 금지
• 피하기: 공격적인 그림자 사용 금지
• 피하기: 네온 또는 형광 강조색 사용 금지

10

팩 안의 실제 스크린샷

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

11

System Prompt

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